Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
sortable-dnd
Advanced tools
sortable-dnd - npm Package Compare versions
Comparing version 0.1.3 to 0.2.0
| /*! | ||
| * sortable-dnd v0.1.3 | ||
| * sortable-dnd v0.2.0 | ||
| * open source under the MIT license | ||
@@ -202,5 +202,5 @@ * https://github.com/mfuu/sortable-dnd#readme | ||
| if (scrollingElement) { | ||
| return scrollingElement; | ||
| return scrollingElement.contains(document.body) ? document : scrollingElement; | ||
| } else { | ||
| return document.documentElement; | ||
| return document; | ||
| } | ||
@@ -248,12 +248,6 @@ } | ||
| * @param {HTMLElement} el | ||
| * @param {Boolean} onlyEl only get element | ||
| */ | ||
| function getElement(group, el) { | ||
| var result = { | ||
| index: -1, | ||
| el: null, | ||
| rect: {}, | ||
| offset: {} | ||
| }; | ||
| function getElement(group, el, onlyEl) { | ||
| var children = _toConsumableArray(Array.from(group.children)); // 如果能直接在子元素中找到，返回对应的index | ||
@@ -263,3 +257,3 @@ | ||
| var index = children.indexOf(el); | ||
| if (index > -1) Object.assign(result, { | ||
| if (index > -1) return onlyEl ? children[index] : { | ||
| index: index, | ||
@@ -269,7 +263,7 @@ el: children[index], | ||
| offset: getOffset(children[index]) | ||
| }); // children 中无法直接找到对应的dom时，需要向下寻找 | ||
| }; // children 中无法直接找到对应的dom时，需要向下寻找 | ||
| for (var i = 0; i < children.length; i++) { | ||
| if (isChildOf(el, children[i])) { | ||
| Object.assign(result, { | ||
| return onlyEl ? children[i] : { | ||
| index: i, | ||
@@ -279,8 +273,12 @@ el: children[i], | ||
| offset: getOffset(children[i]) | ||
| }); | ||
| break; | ||
| }; | ||
| } | ||
| } | ||
| return result; | ||
| return onlyEl ? null : { | ||
| index: -1, | ||
| el: null, | ||
| rect: {}, | ||
| offset: {} | ||
| }; | ||
| } | ||
@@ -381,2 +379,15 @@ /** | ||
| var animationState = []; | ||
| function getRange(children, drag, drop) { | ||
| var start = children.indexOf(drag); | ||
| var end = children.indexOf(drop); | ||
| return start < end ? { | ||
| start: start, | ||
| end: end | ||
| } : { | ||
| start: end, | ||
| end: start | ||
| }; | ||
| } | ||
| return { | ||
@@ -442,14 +453,2 @@ captureAnimationState: function captureAnimationState() { | ||
| function getRange(children, drag, drop) { | ||
| var start = children.indexOf(drag); | ||
| var end = children.indexOf(drop); | ||
| return start < end ? { | ||
| start: start, | ||
| end: end | ||
| } : { | ||
| start: end, | ||
| end: start | ||
| }; | ||
| } | ||
| function DNDEvent() { | ||
@@ -543,3 +542,3 @@ return { | ||
| this._old_ = { | ||
| this.from = { | ||
| node: null, | ||
@@ -549,3 +548,3 @@ rect: {}, | ||
| }; | ||
| this._new_ = { | ||
| this.to = { | ||
| node: null, | ||
@@ -570,3 +569,3 @@ rect: {}, | ||
| value: function destroy() { | ||
| this._old_ = { | ||
| this.from = { | ||
| node: null, | ||
@@ -576,3 +575,3 @@ rect: {}, | ||
| }; | ||
| this._new_ = { | ||
| this.to = { | ||
| node: null, | ||
@@ -738,7 +737,13 @@ rect: {}, | ||
| draggable: undefined, | ||
| // String: css selecter, Function: (e) => return true | ||
| // String: css选择器, Function: (e) => return true | ||
| dragging: undefined, | ||
| // 必须为函数且必须返回一个 HTMLElement: (e) => return e.target | ||
| dragEnd: undefined, | ||
| // 拖拽完成时的回调函数: (old, new, changed) => {} | ||
| // 设置拖拽元素，必须为函数且必须返回一个 HTMLElement: (e) => return e.target | ||
| onDrag: undefined, | ||
| // 拖拽开始时触发的回调函数: () => {} | ||
| onMove: undefined, | ||
| // 拖拽过程中的回调函数: (from, to) => {} | ||
| onDrop: undefined, | ||
| // 拖拽完成时的回调函数: (from, to, changed) => {} | ||
| onChange: undefined, | ||
| // 拖拽元素改变位置的时候: (from, to) => {} | ||
| forceFallback: false, | ||
@@ -768,5 +773,3 @@ // 忽略 HTML5拖拽行为，强制回调进行 | ||
| Sortable.prototype = | ||
| /** @lends Sortable.prototype */ | ||
| { | ||
| Sortable.prototype = { | ||
| constructor: Sortable, | ||
@@ -807,4 +810,4 @@ destroy: function destroy() { | ||
| var _this$options3 = this.options, | ||
| dragging = _this$options3.dragging, | ||
| draggable = _this$options3.draggable; | ||
| draggable = _this$options3.draggable, | ||
| dragging = _this$options3.dragging; | ||
@@ -827,28 +830,29 @@ if (typeof draggable === 'function') { | ||
| window.getSelection().removeAllRanges(); | ||
| } // 获取拖拽元素 | ||
| } | ||
| } catch (error) { | ||
| throw new Error(error); | ||
| } // 获取拖拽元素 | ||
| var element = typeof dragging === 'function' ? dragging(e) : getElement(this.$el, e.target).el; // 不存在拖拽元素时不允许拖拽 | ||
| if (dragging) { | ||
| if (typeof dragging === 'function') this.dragEl = dragging(e);else throw new Error("dragging expected \"function\" or \"string\" but received \"".concat(_typeof(dragging), "\"")); | ||
| } else { | ||
| this.dragEl = getElement(this.$el, e.target, true); | ||
| } // 不存在拖拽元素时不允许拖拽 | ||
| if (!element) return true; | ||
| if (element.animated) return; | ||
| this.dragEl = element; | ||
| } catch (error) { | ||
| throw new Error(error); | ||
| } | ||
| window.sortableDndOnDown = true; // 获取当前元素在列表中的位置 | ||
| if (!this.dragEl || this.dragEl.animated) return true; // 获取拖拽元素在列表中的位置 | ||
| var _getElement = getElement(this.$el, this.dragEl), | ||
| index = _getElement.index, | ||
| el = _getElement.el, | ||
| rect = _getElement.rect, | ||
| offset = _getElement.offset; | ||
| if (!el || index < 0) return true; | ||
| window.sortableDndOnDownState = true; | ||
| this.ghost.set('x', rect.left); | ||
| this.ghost.set('y', rect.top); | ||
| this.differ._old_.rect = rect; | ||
| this.differ._old_.offset = offset; | ||
| this.differ._old_.node = this.dragEl; | ||
| this.differ.from = { | ||
| node: this.dragEl, | ||
| rect: rect, | ||
| offset: offset | ||
| }; | ||
| this.calcXY = { | ||
@@ -867,10 +871,9 @@ x: e.clientX, | ||
| if (evt.preventDefault !== void 0) evt.preventDefault(); // prevent scrolling | ||
| // 将初始化放到move事件中，防止与click事件冲突 | ||
| if (!this.ghost.$el) { | ||
| // 将拖拽元素克隆一份作为蒙版 | ||
| var ghostEl = this.dragEl.cloneNode(true); | ||
| this.ghost.init(ghostEl, this.differ._old_.rect); | ||
| } | ||
| var _this$options4 = this.options, | ||
| chosenClass = _this$options4.chosenClass, | ||
| stopPropagation = _this$options4.stopPropagation, | ||
| onMove = _this$options4.onMove, | ||
| onDrag = _this$options4.onDrag; | ||
| if (stopPropagation) evt.stopPropagation(); | ||
| var touch = evt.touches && evt.touches[0]; | ||
@@ -880,12 +883,27 @@ var e = touch || evt; | ||
| clientY = e.clientY; | ||
| var target = touch ? document.elementFromPoint(clientX, clientY) : e.target; | ||
| var _this$options4 = this.options, | ||
| chosenClass = _this$options4.chosenClass, | ||
| stopPropagation = _this$options4.stopPropagation; | ||
| if (stopPropagation) evt.stopPropagation(); | ||
| var target = touch ? document.elementFromPoint(clientX, clientY) : e.target; // 将初始化放到move事件中，防止与click事件冲突 | ||
| // 将拖拽元素克隆一份作为蒙版 | ||
| if (!this.ghost.$el) { | ||
| this.ghost.init(this.dragEl.cloneNode(true), this.differ.from.rect); | ||
| if (onDrag !== undefined) { | ||
| if (typeof onDrag === 'function') onDrag(this.dragEl, e, | ||
| /** originalEvent */ | ||
| evt);else throw new Error("onDrag expected \"function\" but received \"".concat(_typeof(onDrag), "\"")); | ||
| } | ||
| } // 拖拽过程中触发的回调 | ||
| if (onMove !== undefined) { | ||
| if (typeof onMove === 'function') onMove(this.differ.from, this.ghost.$el, e, | ||
| /** originalEvent */ | ||
| evt);else throw new Error("onMove expected \"function\" but received \"".concat(_typeof(onMove), "\"")); | ||
| } | ||
| toggleClass(this.dragEl, chosenClass, true); | ||
| this.ghost.move(); | ||
| if (!window.sortableDndOnDown) return; | ||
| if (!window.sortableDndOnDownState) return; | ||
| if (clientX < 0 || clientY < 0) return; | ||
| window.sortableDndOnMove = true; | ||
| window.sortableDndOnMoveState = true; | ||
| this.ghost.set('x', this.ghost.x + clientX - this.calcXY.x); | ||
@@ -930,22 +948,32 @@ this.ghost.set('y', this.ghost.y + clientY - this.calcXY.y); | ||
| this.dropEl = el; | ||
| if (clientX > left && clientX < right && clientY > top && clientY < bottom) { | ||
| this.dropEl = el; // 拖拽前后元素不一致时交换 | ||
| if (this.dropEl !== this.dragEl) { | ||
| if (this.dropEl.animated) return; | ||
| // 拖拽前后元素不一致时交换 | ||
| if (el !== this.dragEl) { | ||
| this.differ.to = { | ||
| node: this.dropEl, | ||
| rect: rect, | ||
| offset: offset | ||
| }; | ||
| if (el.animated) return; | ||
| this.captureAnimationState(); | ||
| var onChange = this.options.onChange; | ||
| var _offset = getOffset(this.dragEl); // 获取拖拽元素的 offset 值 | ||
| // 优先比较 top 值，top 值相同再比较 left | ||
| // 元素发生位置交换时触发的回调 | ||
| if (onChange !== undefined) { | ||
| if (typeof onChange === 'function') onChange(this.differ.from, this.differ.to, e, evt);else throw new Error("onChange expected \"function\" but received \"".concat(_typeof(onChange), "\"")); | ||
| } // 优先比较 top 值，top 值相同再比较 left | ||
| if (_offset.top < offset.top || _offset.left < offset.left) { | ||
| this.$el.insertBefore(this.dragEl, this.dropEl.nextElementSibling); | ||
| this.$el.insertBefore(this.dragEl, el.nextElementSibling); | ||
| } else { | ||
| this.$el.insertBefore(this.dragEl, this.dropEl); | ||
| this.$el.insertBefore(this.dragEl, el); | ||
| } | ||
| this.animateRange(); | ||
| this.differ._new_.node = this.dropEl; | ||
| this.differ._new_.rect = getRect(this.dropEl); | ||
| } | ||
@@ -963,3 +991,3 @@ } | ||
| var _this$options5 = this.options, | ||
| dragEnd = _this$options5.dragEnd, | ||
| onDrop = _this$options5.onDrop, | ||
| chosenClass = _this$options5.chosenClass, | ||
@@ -971,23 +999,16 @@ stopPropagation = _this$options5.stopPropagation; | ||
| if (window.sortableDndOnDown && window.sortableDndOnMove) { | ||
| // 重新获取一次拖拽元素的 offset 值作为拖拽完成后的 offset 值 | ||
| this.differ._new_.offset = getOffset(this.dragEl); // 拖拽完成触发回调函数 | ||
| if (window.sortableDndOnDownState && window.sortableDndOnMoveState) { | ||
| // 重新获取一次拖拽元素的 offset 和 rect 值作为拖拽完成后的值 | ||
| this.differ.to.offset = getOffset(this.dragEl); | ||
| this.differ.to.rect = getRect(this.dragEl); | ||
| var _this$differ = this.differ, | ||
| _old_ = _this$differ._old_, | ||
| _new_ = _this$differ._new_; // 通过 offset 比较是否进行了元素交换 | ||
| from = _this$differ.from, | ||
| to = _this$differ.to; // 通过 offset 比较是否进行了元素交换 | ||
| var changed = _old_.offset.top !== _new_.offset.top || _old_.offset.left !== _new_.offset.left; // 如果拖拽前后没有发生交换，重新赋值一次 | ||
| var changed = from.offset.top !== to.offset.top || from.offset.left !== to.offset.left; // 拖拽完成触发回调函数 | ||
| if (!changed) { | ||
| this.differ._new_.node = this.differ._old_.node; | ||
| this.differ._new_.rect = this.differ._old_.rect; | ||
| if (onDrop !== undefined) { | ||
| if (typeof onDrop === 'function') onDrop(changed, evt);else throw new Error("onDrop expected \"function\" but received \"".concat(_typeof(onDrop), "\"")); | ||
| } | ||
| if (typeof dragEnd === 'function') { | ||
| dragEnd(_old_, _new_, changed); | ||
| } else { | ||
| throw new Error("Sortable-dnd Error: dragEnd expected \"function\" but received \"".concat(_typeof(dragEnd), "\"")); | ||
| } | ||
| this.ghost.destroy(getRect(this.dragEl)); | ||
@@ -1014,6 +1035,8 @@ } | ||
| _removeWindowState: function _removeWindowState() { | ||
| window.sortableDndOnDown = null; | ||
| window.sortableDndOnMove = null; | ||
| delete window.sortableDndOnDown; | ||
| delete window.sortableDndOnMove; | ||
| window.sortableDndOnDownState = null; | ||
| window.sortableDndOnMoveState = null; | ||
| window.sortableDndAnimationEnd = null; | ||
| delete window.sortableDndOnDownState; | ||
| delete window.sortableDndOnMoveState; | ||
| delete window.sortableDndAnimationEnd; | ||
| }, | ||
@@ -1020,0 +1043,0 @@ // -------------------------------- auto destroy ---------------------------------- |
@@ -1,1 +0,1 @@ | ||
| !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).Sortable=e()}(this,function(){"use strict";function s(t){return(s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function o(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}function i(t,e,n){e&&o(t.prototype,e),n&&o(t,n),Object.defineProperty(t,"prototype",{writable:!1})}function r(t){return function(t){if(Array.isArray(t))return a(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||function(t,e){if(t){if("string"==typeof t)return a(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);return"Map"===(n="Object"===n&&t.constructor?t.constructor.name:n)||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?a(t,e):void 0}}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function a(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,o=new Array(e);n<e;n++)o[n]=t[n];return o}function t(t){if("undefined"!=typeof window&&window.navigator)return!!navigator.userAgent.match(t)}var l=t(/(?:Trident.*rv[ :]?11\.|msie|iemobile|Windows Phone)/i),h=t(/Edge/i),f=t(/safari/i)&&!t(/chrome/i)&&!t(/android/i),e=t(/iP(ad|od|hone)/i),c=t(/chrome/i)&&t(/android/i),d={capture:!1,passive:!1},u=/\s+/g;function p(t,e,n,o){window.addEventListener?t.addEventListener(e,n,!(!o&&l)&&d):window.attachEvent&&t.attachEvent("on"+e,n)}function v(t,e,n,o){window.removeEventListener?t.removeEventListener(e,n,!(!o&&l)&&d):window.detachEvent&&t.detachEvent("on"+e,n)}function g(t){for(var e={top:0,left:0,height:0,width:0},n=(e.height=t.offsetHeight,e.width=t.offsetWidth,e.top=t.offsetTop,e.left=t.offsetLeft,t.offsetParent);null!==n;)e.top+=n.offsetTop,e.left+=n.offsetLeft,n=n.offsetParent;return e}function m(){var t=document.scrollingElement;return t||document.documentElement}function w(t){var e;if(t.getBoundingClientRect||t===window)return e={top:0,left:0,bottom:0,right:0,height:0,width:0},t!==window&&t.parentNode&&t!==m()?(t=t.getBoundingClientRect(),e.top=t.top,e.left=t.left,e.bottom=t.bottom,e.right=t.right,e.height=t.height,e.width=t.width):(e.top=0,e.left=0,e.bottom=window.innerHeight,e.right=window.innerWidth,e.height=window.innerHeight,e.width=window.innerWidth),e}function y(t,e){var n={index:-1,el:null,rect:{},offset:{}},o=r(Array.from(t.children)),t=o.indexOf(e);-1<t&&Object.assign(n,{index:t,el:o[t],rect:w(o[t]),offset:g(o[t])});for(var i=0;i<o.length;i++)if(function(t,e){var n;if(t&&e)for(n=t.parentNode;n;){if(e===n)return 1;n=n.parentNode}return}(e,o[i])){Object.assign(n,{index:i,el:o[i],rect:w(o[i]),offset:g(o[i])});break}return n}function b(t,e,n){var o;t&&e&&(t.classList?t.classList[n?"add":"remove"](e):(o=(" "+t.className+" ").replace(u," ").replace(" "+e+" "," "),t.className=(o+(n?" "+e:"")).replace(u," ")))}function _(t,e,n){var o=t&&t.style;if(o){if(void 0===n)return document.defaultView&&document.defaultView.getComputedStyle?n=document.defaultView.getComputedStyle(t,""):t.currentStyle&&(n=t.currentStyle),void 0===e?n:n[e];o[e=e in o||-1!==e.indexOf("webkit")?e:"-webkit-"+e]=n+("string"==typeof n?"":"px")}}var E=["-webkit-transition","-moz-transition","-ms-transition","-o-transition","transition"],S=["-webkit-transform","-moz-transform","-ms-transform","-o-transform","transform"];function D(){var o=[];return{captureAnimationState:function(){var t=r(Array.from(this.$el.children)),e=function(t,e,n){e=t.indexOf(e),t=t.indexOf(n);return e<t?{start:e,end:t}:{start:t,end:e}}(t,this.dragEl,this.dropEl),n=e.start,e=e.end;o.length=0,t.slice(n,e+1).forEach(function(t){o.push({target:t,rect:w(t)})})},animateRange:function(){var n=this;o.forEach(function(t){var e=t.target,t=t.rect;n.animate(e,t,n.animation)})},animate:function(e,t){var n=2<arguments.length&&void 0!==arguments[2]?arguments[2]:150,o=w(e),i=t.left-o.left,r=t.top-o.top;E.forEach(function(t){return _(e,t,"none")}),S.forEach(function(t){return _(e,t,"".concat(t.split("transform")[0],"translate3d(").concat(i,"px, ").concat(r,"px, 0)"))}),e.offsetLeft,E.forEach(function(t){return _(e,t,"".concat(t.split("transition")[0],"transform ").concat(n,"ms"))}),S.forEach(function(t){return _(e,t,"".concat(t.split("transform")[0],"translate3d(0px, 0px, 0px)"))}),clearTimeout(e.animated),e.animated=setTimeout(function(){E.forEach(function(t){return _(e,t,"")}),S.forEach(function(t){return _(e,t,"")}),e.animated=null},n)}}}var $=function(){function t(){n(this,t),this._old_={node:null,rect:{},offset:{}},this._new_={node:null,rect:{},offset:{}}}return i(t,[{key:"get",value:function(t){return this[t]}},{key:"set",value:function(t,e){this[t]=e}},{key:"destroy",value:function(){this._old_={node:null,rect:{},offset:{}},this._new_={node:null,rect:{},offset:{}}}}]),t}(),x=function(){function e(t){n(this,e),this.options=t,this.x=0,this.y=0,this.exist=!1}return i(e,[{key:"init",value:function(t,e){var n,o;t&&(this.$el=t,n=(t=this.options).ghostClass,t=void 0===(t=t.ghostStyle)?{}:t,o=e.width,e=e.height,this.$el.class=n,this.$el.style.width=o+"px",this.$el.style.height=e+"px",this.$el.style.transform="",this.$el.style.transition="",this.$el.style.position="fixed",this.$el.style.left=0,this.$el.style.top=0,this.$el.style.zIndex=1e5,this.$el.style.opacity=.8,this.$el.style.pointerEvents="none",this.$el.style.cursor="move",this.setStyle(t))}},{key:"get",value:function(t){return this[t]}},{key:"set",value:function(t,e){this[t]=e,this[t]=e}},{key:"setStyle",value:function(t){for(var e in t)_(this.$el,e,t[e])}},{key:"rect",value:function(){return this.$el.getBoundingClientRect()}},{key:"move",value:function(t){var e=this.options.ghostAnimation;this.$el.style.transition=t?"all ".concat(e,"ms"):"",this.exist||(document.body.appendChild(this.$el),this.exist=!0),this.$el.style.transform="translate3d(".concat(this.x,"px, ").concat(this.y,"px, 0)"),"move"!==this.$el.style.cursor&&(this.$el.style.cursor="move")}},{key:"destroy",value:function(t){var e=this;t&&(this.x=t.left,this.y=t.top,this.move(!0)),setTimeout(function(){e.$el&&e.$el.remove(),e.$el=null,e.x=0,e.y=0,e.exist=!1},this.options.ghostAnimation)}}]),e}(),O="undefined"!=typeof document&&!c&&!e&&"draggable"in document.createElement("div");function P(t,e){if(!t||!t.nodeType||1!==t.nodeType)throw"Sortable: `el` must be an HTMLElement, not ".concat({}.toString.call(t));this.$el=t,this.options=e=Object.assign({},e),this.scrollEl=function(t,e){if(!t||!t.getBoundingClientRect)return m();var n=t,o=!1;do{if(n.clientWidth<n.scrollWidth||n.clientHeight<n.scrollHeight){var i=_(n);if(n.clientWidth<n.scrollWidth&&("auto"==i.overflowX||"scroll"==i.overflowX)||n.clientHeight<n.scrollHeight&&("auto"==i.overflowY||"scroll"==i.overflowY)){if(!n.getBoundingClientRect||n===document.body)return m();if(o||e)return n;o=!0}}}while(n=n.parentNode);return m()}(this.$el,!0),this.dragEl=null,this.dropEl=null,this.differ=null,this.ghost=null;var n,o,i={delay:0,delayOnTouchOnly:!(this.calcXY={x:0,y:0}),disabled:!1,animation:150,ghostAnimation:0,ghostClass:"",ghostStyle:{},chosenClass:"",draggable:void 0,dragging:void 0,dragEnd:void 0,forceFallback:!1,stopPropagation:!1,supportPassive:(n=!1,document.addEventListener("checkIfSupportPassive",null,{get passive(){return n=!0}}),n),supportPointer:"PointerEvent"in window&&!f,supportTouch:"ontouchstart"in window,ownerDocument:this.$el.ownerDocument};for(o in i)o in this.options||(this.options[o]=i[o]);this.nativeDraggable=!this.options.forceFallback&&O,this.differ=new $,this.ghost=new x(this.options),Object.assign(this,D(),{_bindEventListener:function(){this._onStart=this._onStart.bind(this),this._onMove=this._onMove.bind(this),this._onDrop=this._onDrop.bind(this);var t=this.options,e=t.supportPointer,n=t.supportTouch,t=t.supportPassive;p(this.$el,e?"pointerdown":n?"touchstart":"mousedown",this._onStart,t),this.nativeDraggable&&(p(this.$el,"dragover",this),p(this.$el,"dragenter",this))},_unbindEventListener:function(){var t=this.options.supportPassive;v(this.$el,"pointerdown",this._onStart,t),v(this.$el,"touchstart",this._onStart,t),v(this.$el,"mousedown",this._onStart,t),this.nativeDraggable&&(v(this.$el,"dragover",this),v(this.$el,"dragenter",this))},_onMoveEvents:function(t){var e=this.options,n=e.supportPointer,o=e.ownerDocument,e=e.supportPassive;p(o,n?"pointermove":t?"touchmove":"mousemove",this._onMove,e)},_onUpEvents:function(){var t=this.options,e=t.ownerDocument,t=t.supportPassive;p(e,"pointerup",this._onDrop,t),p(e,"pointercancel",this._onDrop,t),p(e,"touchend",this._onDrop,t),p(e,"touchcancel",this._onDrop,t),p(e,"mouseup",this._onDrop,t)},_offMoveEvents:function(){var t=this.options,e=t.ownerDocument,t=t.supportPassive;v(e,"pointermove",this._onMove,t),v(e,"touchmove",this._onMove,t),v(e,"mousemove",this._onMove,t)},_offUpEvents:function(){var t=this.options,e=t.ownerDocument,t=t.supportPassive;v(e,"pointerup",this._onDrop,t),v(e,"pointercancel",this._onDrop,t),v(e,"touchend",this._onDrop,t),v(e,"touchcancel",this._onDrop,t),v(e,"mouseup",this._onDrop,t)}}),this._bindEventListener(),this._handleDestroy()}return P.prototype={constructor:P,destroy:function(){this._unbindEventListener(),this._resetState()},_onStart:function(t){var e=this.options,n=e.delay,o=e.disabled,i=e.stopPropagation,e=e.delayOnTouchOnly;if(!(/mousedown|pointerdown/.test(t.type)&&0!==t.button||o)){var o=t.touches&&t.touches[0]||t.pointerType&&"touch"===t.pointerType&&t,r=o||t;if(this.nativeDraggable||!f||!r.target||"SELECT"!==r.target.tagName.toUpperCase()){if(r.target===this.$el)return!0;void 0!==t.preventDefault&&t.preventDefault(),i&&t.stopPropagation(),!n||e&&!o||this.nativeDraggable&&(h||l)?this._onDrag(r,o):this.dragStartTimer=setTimeout(this._onDrag(r,o),n)}}},_onDrag:function(t,e){var n=this.options,o=n.dragging,n=n.draggable;if("function"==typeof n){if(!n(t))return!0}else if("string"==typeof n){if(!function(t,e){if(e&&(">"===e[0]&&(e=e.substring(1)),t))try{if(t.matches)return t.matches(e);if(t.msMatchesSelector)return t.msMatchesSelector(e);if(t.webkitMatchesSelector)return t.webkitMatchesSelector(e)}catch(t){return}}(t.target,n))return!0}else if(void 0!==n)throw new Error('draggable expected "function" or "string" but received "'.concat(s(n),'"'));try{document.selection?setTimeout(function(){document.selection.empty()},0):window.getSelection().removeAllRanges();var i="function"==typeof o?o(t):y(this.$el,t.target).el;if(!i)return!0;if(i.animated)return;this.dragEl=i}catch(t){throw new Error(t)}window.sortableDndOnDown=!0;var n=y(this.$el,this.dragEl),o=n.index,i=n.el,r=n.rect,n=n.offset;if(!i||o<0)return!0;this.ghost.set("x",r.left),this.ghost.set("y",r.top),this.differ._old_.rect=r,this.differ._old_.offset=n,this.differ._old_.node=this.dragEl,this.calcXY={x:t.clientX,y:t.clientY},this._onMoveEvents(e),this._onUpEvents(e)},_onMove:function(t){void 0!==t.preventDefault&&t.preventDefault(),this.ghost.$el||(e=this.dragEl.cloneNode(!0),this.ghost.init(e,this.differ._old_.rect));var e=t.touches&&t.touches[0],n=e||t,o=n.clientX,i=n.clientY,e=e?document.elementFromPoint(o,i):n.target,n=this.options,r=n.chosenClass,n=n.stopPropagation;if(n&&t.stopPropagation(),b(this.dragEl,r,!0),this.ghost.move(),window.sortableDndOnDown&&!(o<0||i<0)){window.sortableDndOnMove=!0,this.ghost.set("x",this.ghost.x+o-this.calcXY.x),this.ghost.set("y",this.ghost.y+i-this.calcXY.y),this.calcXY={x:o,y:i},this.ghost.move();n=w(this.$el);if(o<n.left||o>n.right||i<n.top||i>n.bottom)this.ghost.setStyle({cursor:"not-allowed"});else{var t=y(this.$el,e),r=t.index,e=t.el,s=t.rect,t=t.offset,a=s.left,l=s.right,h=s.top,s=s.bottom;if(!(!e||r<0||h<0)){var r=this.scrollEl,f=r.scrollTop,r=r.scrollLeft,r=n.left+r,f=n.top+f;if(this.scrollEl!==this.$el&&(n.left<0||n.top<0)){if(n.top<0&&h<f||n.left<0&&a<r)return}else if(h<n.top||a<n.left)return;a<o&&o<l&&h<i&&i<s&&(this.dropEl=e,this.dropEl===this.dragEl||this.dropEl.animated||(this.captureAnimationState(),(f=g(this.dragEl)).top<t.top||f.left<t.left?this.$el.insertBefore(this.dragEl,this.dropEl.nextElementSibling):this.$el.insertBefore(this.dragEl,this.dropEl),this.animateRange(),this.differ._new_.node=this.dropEl,this.differ._new_.rect=w(this.dropEl)))}}}},_onDrop:function(t){this._offMoveEvents(),this._offUpEvents(),clearTimeout(this.dragStartTimer);var e=this.options,n=e.dragEnd,o=e.chosenClass;if(e.stopPropagation&&t.stopPropagation(),b(this.dragEl,o,!1),window.sortableDndOnDown&&window.sortableDndOnMove){this.differ._new_.offset=g(this.dragEl);e=this.differ,t=e._old_,o=e._new_,e=t.offset.top!==o.offset.top||t.offset.left!==o.offset.left;if(e||(this.differ._new_.node=this.differ._old_.node,this.differ._new_.rect=this.differ._old_.rect),"function"!=typeof n)throw new Error('Sortable-dnd Error: dragEnd expected "function" but received "'.concat(s(n),'"'));n(t,o,e),this.ghost.destroy(w(this.dragEl))}this.differ.destroy(),this._removeWindowState()},_resetState:function(){this.dragEl=null,this.dropEl=null,this.ghost.destroy(),this.differ.destroy(),this.calcXY={x:0,y:0},this._removeWindowState()},_removeWindowState:function(){window.sortableDndOnDown=null,window.sortableDndOnMove=null,delete window.sortableDndOnDown,delete window.sortableDndOnMove},_handleDestroy:function(){var t=this,e=null,n=window.MutationObserver||window.WebKitMutationObserver||window.MozMutationObserver;if(n){var o=this.options.ownerDocument;if(!o)return;(e=new n(function(){o.body.contains(t.$el)||(e.disconnect(),e=null,t._unbindEventListener(),t._resetState())})).observe(this.$el.parentNode,{childList:!0,attributes:!1,subtree:!1})}window.onbeforeunload=function(){e&&e.disconnect(),e=null,t._unbindEventListener(),t._resetState()}}},P}); | ||
| !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).Sortable=e()}(this,function(){"use strict";function p(t){return(p="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function n(t,e){for(var o=0;o<e.length;o++){var n=e[o];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}function i(t,e,o){e&&n(t.prototype,e),o&&n(t,o),Object.defineProperty(t,"prototype",{writable:!1})}function r(t){return function(t){if(Array.isArray(t))return s(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||function(t,e){if(t){if("string"==typeof t)return s(t,e);var o=Object.prototype.toString.call(t).slice(8,-1);return"Map"===(o="Object"===o&&t.constructor?t.constructor.name:o)||"Set"===o?Array.from(t):"Arguments"===o||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(o)?s(t,e):void 0}}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function s(t,e){(null==e||e>t.length)&&(e=t.length);for(var o=0,n=new Array(e);o<e;o++)n[o]=t[o];return n}function t(t){if("undefined"!=typeof window&&window.navigator)return!!navigator.userAgent.match(t)}var a=t(/(?:Trident.*rv[ :]?11\.|msie|iemobile|Windows Phone)/i),l=t(/Edge/i),h=t(/safari/i)&&!t(/chrome/i)&&!t(/android/i),e=t(/iP(ad|od|hone)/i),f=t(/chrome/i)&&t(/android/i),c={capture:!1,passive:!1},u=/\s+/g;function d(t,e,o,n){window.addEventListener?t.addEventListener(e,o,!(!n&&a)&&c):window.attachEvent&&t.attachEvent("on"+e,o)}function v(t,e,o,n){window.removeEventListener?t.removeEventListener(e,o,!(!n&&a)&&c):window.detachEvent&&t.detachEvent("on"+e,o)}function g(t){for(var e={top:0,left:0,height:0,width:0},o=(e.height=t.offsetHeight,e.width=t.offsetWidth,e.top=t.offsetTop,e.left=t.offsetLeft,t.offsetParent);null!==o;)e.top+=o.offsetTop,e.left+=o.offsetLeft,o=o.offsetParent;return e}function m(){var t=document.scrollingElement;return!t||t.contains(document.body)?document:t}function w(t){var e;if(t.getBoundingClientRect||t===window)return e={top:0,left:0,bottom:0,right:0,height:0,width:0},t!==window&&t.parentNode&&t!==m()?(t=t.getBoundingClientRect(),e.top=t.top,e.left=t.left,e.bottom=t.bottom,e.right=t.right,e.height=t.height,e.width=t.width):(e.top=0,e.left=0,e.bottom=window.innerHeight,e.right=window.innerWidth,e.height=window.innerHeight,e.width=window.innerWidth),e}function y(t,e,o){var n=r(Array.from(t.children)),t=n.indexOf(e);if(-1<t)return o?n[t]:{index:t,el:n[t],rect:w(n[t]),offset:g(n[t])};for(var i=0;i<n.length;i++)if(function(t,e){var o;if(t&&e)for(o=t.parentNode;o;){if(e===o)return 1;o=o.parentNode}return}(e,n[i]))return o?n[i]:{index:i,el:n[i],rect:w(n[i]),offset:g(n[i])};return o?null:{index:-1,el:null,rect:{},offset:{}}}function b(t,e,o){var n;t&&e&&(t.classList?t.classList[o?"add":"remove"](e):(n=(" "+t.className+" ").replace(u," ").replace(" "+e+" "," "),t.className=(n+(o?" "+e:"")).replace(u," ")))}function E(t,e,o){var n=t&&t.style;if(n){if(void 0===o)return document.defaultView&&document.defaultView.getComputedStyle?o=document.defaultView.getComputedStyle(t,""):t.currentStyle&&(o=t.currentStyle),void 0===e?o:o[e];n[e=e in n||-1!==e.indexOf("webkit")?e:"-webkit-"+e]=o+("string"==typeof o?"":"px")}}var S=["-webkit-transition","-moz-transition","-ms-transition","-o-transition","transition"],D=["-webkit-transform","-moz-transform","-ms-transform","-o-transform","transform"];function _(){var i=[];return{captureAnimationState:function(){var t=r(Array.from(this.$el.children)),e=(o=t,n=this.dragEl,e=this.dropEl,n=o.indexOf(n),o=o.indexOf(e),n<o?{start:n,end:o}:{start:o,end:n}),o=e.start,n=e.end;i.length=0,t.slice(o,n+1).forEach(function(t){i.push({target:t,rect:w(t)})})},animateRange:function(){var o=this;i.forEach(function(t){var e=t.target,t=t.rect;o.animate(e,t,o.animation)})},animate:function(e,t){var o=2<arguments.length&&void 0!==arguments[2]?arguments[2]:150,n=w(e),i=t.left-n.left,r=t.top-n.top;S.forEach(function(t){return E(e,t,"none")}),D.forEach(function(t){return E(e,t,"".concat(t.split("transform")[0],"translate3d(").concat(i,"px, ").concat(r,"px, 0)"))}),e.offsetLeft,S.forEach(function(t){return E(e,t,"".concat(t.split("transition")[0],"transform ").concat(o,"ms"))}),D.forEach(function(t){return E(e,t,"".concat(t.split("transform")[0],"translate3d(0px, 0px, 0px)"))}),clearTimeout(e.animated),e.animated=setTimeout(function(){S.forEach(function(t){return E(e,t,"")}),D.forEach(function(t){return E(e,t,"")}),e.animated=null},o)}}}var $=function(){function t(){o(this,t),this.from={node:null,rect:{},offset:{}},this.to={node:null,rect:{},offset:{}}}return i(t,[{key:"get",value:function(t){return this[t]}},{key:"set",value:function(t,e){this[t]=e}},{key:"destroy",value:function(){this.from={node:null,rect:{},offset:{}},this.to={node:null,rect:{},offset:{}}}}]),t}(),x=function(){function e(t){o(this,e),this.options=t,this.x=0,this.y=0,this.exist=!1}return i(e,[{key:"init",value:function(t,e){var o,n;t&&(this.$el=t,o=(t=this.options).ghostClass,t=void 0===(t=t.ghostStyle)?{}:t,n=e.width,e=e.height,this.$el.class=o,this.$el.style.width=n+"px",this.$el.style.height=e+"px",this.$el.style.transform="",this.$el.style.transition="",this.$el.style.position="fixed",this.$el.style.left=0,this.$el.style.top=0,this.$el.style.zIndex=1e5,this.$el.style.opacity=.8,this.$el.style.pointerEvents="none",this.$el.style.cursor="move",this.setStyle(t))}},{key:"get",value:function(t){return this[t]}},{key:"set",value:function(t,e){this[t]=e,this[t]=e}},{key:"setStyle",value:function(t){for(var e in t)E(this.$el,e,t[e])}},{key:"rect",value:function(){return this.$el.getBoundingClientRect()}},{key:"move",value:function(t){var e=this.options.ghostAnimation;this.$el.style.transition=t?"all ".concat(e,"ms"):"",this.exist||(document.body.appendChild(this.$el),this.exist=!0),this.$el.style.transform="translate3d(".concat(this.x,"px, ").concat(this.y,"px, 0)"),"move"!==this.$el.style.cursor&&(this.$el.style.cursor="move")}},{key:"destroy",value:function(t){var e=this;t&&(this.x=t.left,this.y=t.top,this.move(!0)),setTimeout(function(){e.$el&&e.$el.remove(),e.$el=null,e.x=0,e.y=0,e.exist=!1},this.options.ghostAnimation)}}]),e}(),M="undefined"!=typeof document&&!f&&!e&&"draggable"in document.createElement("div");function O(t,e){if(!t||!t.nodeType||1!==t.nodeType)throw"Sortable: `el` must be an HTMLElement, not ".concat({}.toString.call(t));this.$el=t,this.options=e=Object.assign({},e),this.scrollEl=function(t,e){if(!t||!t.getBoundingClientRect)return m();var o=t,n=!1;do{if(o.clientWidth<o.scrollWidth||o.clientHeight<o.scrollHeight){var i=E(o);if(o.clientWidth<o.scrollWidth&&("auto"==i.overflowX||"scroll"==i.overflowX)||o.clientHeight<o.scrollHeight&&("auto"==i.overflowY||"scroll"==i.overflowY)){if(!o.getBoundingClientRect||o===document.body)return m();if(n||e)return o;n=!0}}}while(o=o.parentNode);return m()}(this.$el,!0),this.dragEl=null,this.dropEl=null,this.differ=null,this.ghost=null;var o,n,i={delay:0,delayOnTouchOnly:!(this.calcXY={x:0,y:0}),disabled:!1,animation:150,ghostAnimation:0,ghostClass:"",ghostStyle:{},chosenClass:"",draggable:void 0,dragging:void 0,onDrag:void 0,onMove:void 0,onDrop:void 0,onChange:void 0,forceFallback:!1,stopPropagation:!1,supportPassive:(o=!1,document.addEventListener("checkIfSupportPassive",null,{get passive(){return o=!0}}),o),supportPointer:"PointerEvent"in window&&!h,supportTouch:"ontouchstart"in window,ownerDocument:this.$el.ownerDocument};for(n in i)n in this.options||(this.options[n]=i[n]);this.nativeDraggable=!this.options.forceFallback&&M,this.differ=new $,this.ghost=new x(this.options),Object.assign(this,_(),{_bindEventListener:function(){this._onStart=this._onStart.bind(this),this._onMove=this._onMove.bind(this),this._onDrop=this._onDrop.bind(this);var t=this.options,e=t.supportPointer,o=t.supportTouch,t=t.supportPassive;d(this.$el,e?"pointerdown":o?"touchstart":"mousedown",this._onStart,t),this.nativeDraggable&&(d(this.$el,"dragover",this),d(this.$el,"dragenter",this))},_unbindEventListener:function(){var t=this.options.supportPassive;v(this.$el,"pointerdown",this._onStart,t),v(this.$el,"touchstart",this._onStart,t),v(this.$el,"mousedown",this._onStart,t),this.nativeDraggable&&(v(this.$el,"dragover",this),v(this.$el,"dragenter",this))},_onMoveEvents:function(t){var e=this.options,o=e.supportPointer,n=e.ownerDocument,e=e.supportPassive;d(n,o?"pointermove":t?"touchmove":"mousemove",this._onMove,e)},_onUpEvents:function(){var t=this.options,e=t.ownerDocument,t=t.supportPassive;d(e,"pointerup",this._onDrop,t),d(e,"pointercancel",this._onDrop,t),d(e,"touchend",this._onDrop,t),d(e,"touchcancel",this._onDrop,t),d(e,"mouseup",this._onDrop,t)},_offMoveEvents:function(){var t=this.options,e=t.ownerDocument,t=t.supportPassive;v(e,"pointermove",this._onMove,t),v(e,"touchmove",this._onMove,t),v(e,"mousemove",this._onMove,t)},_offUpEvents:function(){var t=this.options,e=t.ownerDocument,t=t.supportPassive;v(e,"pointerup",this._onDrop,t),v(e,"pointercancel",this._onDrop,t),v(e,"touchend",this._onDrop,t),v(e,"touchcancel",this._onDrop,t),v(e,"mouseup",this._onDrop,t)}}),this._bindEventListener(),this._handleDestroy()}return O.prototype={constructor:O,destroy:function(){this._unbindEventListener(),this._resetState()},_onStart:function(t){var e=this.options,o=e.delay,n=e.disabled,i=e.stopPropagation,e=e.delayOnTouchOnly;if(!(/mousedown|pointerdown/.test(t.type)&&0!==t.button||n)){var n=t.touches&&t.touches[0]||t.pointerType&&"touch"===t.pointerType&&t,r=n||t;if(this.nativeDraggable||!h||!r.target||"SELECT"!==r.target.tagName.toUpperCase()){if(r.target===this.$el)return!0;void 0!==t.preventDefault&&t.preventDefault(),i&&t.stopPropagation(),!o||e&&!n||this.nativeDraggable&&(l||a)?this._onDrag(r,n):this.dragStartTimer=setTimeout(this._onDrag(r,n),o)}}},_onDrag:function(t,e){var o=this.options,n=o.draggable,o=o.dragging;if("function"==typeof n){if(!n(t))return!0}else if("string"==typeof n){if(!function(t,e){if(e&&(">"===e[0]&&(e=e.substring(1)),t))try{if(t.matches)return t.matches(e);if(t.msMatchesSelector)return t.msMatchesSelector(e);if(t.webkitMatchesSelector)return t.webkitMatchesSelector(e)}catch(t){return}}(t.target,n))return!0}else if(void 0!==n)throw new Error('draggable expected "function" or "string" but received "'.concat(p(n),'"'));try{document.selection?setTimeout(function(){document.selection.empty()},0):window.getSelection().removeAllRanges()}catch(t){throw new Error(t)}if(o){if("function"!=typeof o)throw new Error('dragging expected "function" or "string" but received "'.concat(p(o),'"'));this.dragEl=o(t)}else this.dragEl=y(this.$el,t.target,!0);if(!this.dragEl||this.dragEl.animated)return!0;n=y(this.$el,this.dragEl),o=n.rect,n=n.offset;window.sortableDndOnDownState=!0,this.ghost.set("x",o.left),this.ghost.set("y",o.top),this.differ.from={node:this.dragEl,rect:o,offset:n},this.calcXY={x:t.clientX,y:t.clientY},this._onMoveEvents(e),this._onUpEvents(e)},_onMove:function(t){void 0!==t.preventDefault&&t.preventDefault();var e=this.options,o=e.chosenClass,n=e.stopPropagation,i=e.onMove,e=e.onDrag,n=(n&&t.stopPropagation(),t.touches&&t.touches[0]),r=n||t,s=r.clientX,a=r.clientY,n=n?document.elementFromPoint(s,a):r.target;if(!this.ghost.$el&&(this.ghost.init(this.dragEl.cloneNode(!0),this.differ.from.rect),void 0!==e)){if("function"!=typeof e)throw new Error('onDrag expected "function" but received "'.concat(p(e),'"'));e(this.dragEl,r,t)}if(void 0!==i){if("function"!=typeof i)throw new Error('onMove expected "function" but received "'.concat(p(i),'"'));i(this.differ.from,this.ghost.$el,r,t)}if(b(this.dragEl,o,!0),this.ghost.move(),window.sortableDndOnDownState&&!(s<0||a<0)){window.sortableDndOnMoveState=!0,this.ghost.set("x",this.ghost.x+s-this.calcXY.x),this.ghost.set("y",this.ghost.y+a-this.calcXY.y),this.calcXY={x:s,y:a},this.ghost.move();e=w(this.$el);if(s<e.left||s>e.right||a<e.top||a>e.bottom)this.ghost.setStyle({cursor:"not-allowed"});else{var i=y(this.$el,n),o=i.index,n=i.el,l=i.rect,i=i.offset,h=l.left,f=l.right,c=l.top,u=l.bottom;if(!(!n||o<0||c<0)){var o=this.scrollEl,d=o.scrollTop,o=o.scrollLeft,o=e.left+o,d=e.top+d;if(this.scrollEl!==this.$el&&(e.left<0||e.top<0)){if(e.top<0&&c<d||e.left<0&&h<o)return}else if(c<e.top||h<e.left)return;if(this.dropEl=n,h<s&&s<f&&c<a&&a<u&&n!==this.dragEl&&(this.differ.to={node:this.dropEl,rect:l,offset:i},!n.animated)){this.captureAnimationState();d=this.options.onChange,o=g(this.dragEl);if(void 0!==d){if("function"!=typeof d)throw new Error('onChange expected "function" but received "'.concat(p(d),'"'));d(this.differ.from,this.differ.to,r,t)}o.top<i.top||o.left<i.left?this.$el.insertBefore(this.dragEl,n.nextElementSibling):this.$el.insertBefore(this.dragEl,n),this.animateRange()}}}}},_onDrop:function(t){this._offMoveEvents(),this._offUpEvents(),clearTimeout(this.dragStartTimer);var e=this.options,o=e.onDrop,n=e.chosenClass;if(e.stopPropagation&&t.stopPropagation(),b(this.dragEl,n,!1),window.sortableDndOnDownState&&window.sortableDndOnMoveState){this.differ.to.offset=g(this.dragEl),this.differ.to.rect=w(this.dragEl);e=this.differ,n=e.from,e=e.to,n=n.offset.top!==e.offset.top||n.offset.left!==e.offset.left;if(void 0!==o){if("function"!=typeof o)throw new Error('onDrop expected "function" but received "'.concat(p(o),'"'));o(n,t)}this.ghost.destroy(w(this.dragEl))}this.differ.destroy(),this._removeWindowState()},_resetState:function(){this.dragEl=null,this.dropEl=null,this.ghost.destroy(),this.differ.destroy(),this.calcXY={x:0,y:0},this._removeWindowState()},_removeWindowState:function(){window.sortableDndOnDownState=null,window.sortableDndOnMoveState=null,window.sortableDndAnimationEnd=null,delete window.sortableDndOnDownState,delete window.sortableDndOnMoveState,delete window.sortableDndAnimationEnd},_handleDestroy:function(){var t=this,e=null,o=window.MutationObserver||window.WebKitMutationObserver||window.MozMutationObserver;if(o){var n=this.options.ownerDocument;if(!n)return;(e=new o(function(){n.body.contains(t.$el)||(e.disconnect(),e=null,t._unbindEventListener(),t._resetState())})).observe(this.$el.parentNode,{childList:!0,attributes:!1,subtree:!1})}window.onbeforeunload=function(){e&&e.disconnect(),e=null,t._unbindEventListener(),t._resetState()}}},O}); |
| { | ||
| "name": "sortable-dnd", | ||
| "version": "0.1.3", | ||
| "version": "0.2.0", | ||
| "description": "JS Library for Drag and Drop, supports Sortable and Draggable", | ||
@@ -5,0 +5,0 @@ "main": "dist/sortable.js", |
@@ -47,6 +47,15 @@ <p> | ||
| dragging: (e) => { | ||
| return e.target | ||
| return e.target.parentNode | ||
| }, | ||
| dragEnd: (old, new, changed) => { | ||
| ... | ||
| onDrag: (dragEl, event, originalEvent) => { | ||
| // code | ||
| }, | ||
| onMove: (from, ghostEl, event, originalEvent) => { | ||
| // code | ||
| }, | ||
| onDrop: (changed, /* originalEvent */event) => { | ||
| // code | ||
| }, | ||
| onChange: (from, to, event, originalEvent) => { | ||
| // code | ||
| } | ||
@@ -66,4 +75,7 @@ } | ||
| | `draggable` | `String/Function` | `undefined` | Specifies which items inside the element should be draggable, the function type must return a boolean | | ||
| | `dragging` | `Function` | `undefined` | Specifies the drag element, which must return an HTMLElement, such as `(e) => e.target` | | ||
| | `dragEnd` | `Function` | `undefined` | The callback function when the drag is completed, such as `(old, new, changed) => {}` | | ||
| | `dragging` | `Function` | `undefined` | Specifies the element witch you want to drag: <br /> `(e) => return e.target` | | ||
| | `onDrag` | `Function` | `undefined` | The callback function when the drag is started: <br />`(dragEl, event, originalEvent) => {}` | | ||
| | `onMove` | `Function` | `undefined` | The callback function when the dragged element is moving: <br /> `(from, ghostEl, event, originalEvent) => {}` | | ||
| | `onDrop` | `Function` | `undefined` | The callback function when the drag is completed: <br /> `(changed, originalEvent) => {}` | | ||
| | `onChange` | `Function` | `undefined` | The callback function when the dragged element changes position: <br /> `(from, to, event, originalEvent) => {}` | | ||
| | `ghostStyle` | `Object` | `{}` | The style of the mask element when dragging | | ||
@@ -70,0 +82,0 @@ | `ghostClass` | `String` | `''` | The class of the mask element when dragging | |
@@ -10,2 +10,8 @@ import { getRect, css } from './utils.js' | ||
| function getRange(children, drag, drop) { | ||
| const start = children.indexOf(drag) | ||
| const end = children.indexOf(drop) | ||
| return start < end ? { start, end } : { start: end, end: start } | ||
| } | ||
| return { | ||
@@ -56,7 +62,1 @@ | ||
| } | ||
| function getRange(children, drag, drop) { | ||
| const start = children.indexOf(drag) | ||
| const end = children.indexOf(drop) | ||
| return start< end ? { start, end } : { start: end, end: start } | ||
| } |
@@ -1,2 +0,2 @@ | ||
| import { on, off } from './utils.js' | ||
| import { on, off, debounce } from './utils.js' | ||
@@ -30,2 +30,3 @@ export default function DNDEvent() { | ||
| off(this.$el, 'mousedown', this._onStart, supportPassive) | ||
| if (this.nativeDraggable) { | ||
@@ -32,0 +33,0 @@ off(this.$el, 'dragover', this) |
@@ -21,4 +21,4 @@ import { | ||
| constructor() { | ||
| this._old_ = { node: null, rect: {}, offset: {} } | ||
| this._new_ = { node: null, rect: {}, offset: {} } | ||
| this.from = { node: null, rect: {}, offset: {} } | ||
| this.to = { node: null, rect: {}, offset: {} } | ||
| } | ||
@@ -35,4 +35,4 @@ | ||
| destroy() { | ||
| this._old_ = { node: null, rect: {}, offset: {} } | ||
| this._new_ = { node: null, rect: {}, offset: {} } | ||
| this.from = { node: null, rect: {}, offset: {} } | ||
| this.to = { node: null, rect: {}, offset: {} } | ||
| } | ||
@@ -157,5 +157,9 @@ } | ||
| chosenClass: '', // 选中元素样式 | ||
| draggable: undefined, // String: css selecter, Function: (e) => return true | ||
| dragging: undefined, // 必须为函数且必须返回一个 HTMLElement: (e) => return e.target | ||
| dragEnd: undefined, // 拖拽完成时的回调函数: (old, new, changed) => {} | ||
| draggable: undefined, // String: css选择器, Function: (e) => return true | ||
| dragging: undefined, // 设置拖拽元素，必须为函数且必须返回一个 HTMLElement: (e) => return e.target | ||
| onDrag: undefined, // 拖拽开始时触发的回调函数: () => {} | ||
| onMove: undefined, // 拖拽过程中的回调函数: (from, to) => {} | ||
| onDrop: undefined, // 拖拽完成时的回调函数: (from, to, changed) => {} | ||
| onChange: undefined, // 拖拽元素改变位置的时候: (from, to) => {} | ||
@@ -185,7 +189,6 @@ forceFallback: false, // 忽略 HTML5拖拽行为，强制回调进行 | ||
| this._bindEventListener() | ||
| this._handleDestroy() | ||
| } | ||
| Sortable.prototype = /** @lends Sortable.prototype */ { | ||
| Sortable.prototype = { | ||
| constructor: Sortable, | ||
@@ -220,3 +223,3 @@ | ||
| _onDrag: function(/** Event|TouchEvent */e, touch) { | ||
| const { dragging, draggable } = this.options | ||
| const { draggable, dragging } = this.options | ||
@@ -240,12 +243,2 @@ if (typeof draggable === 'function') { | ||
| } | ||
| // 获取拖拽元素 | ||
| const element = typeof dragging === 'function' ? dragging(e) : getElement(this.$el, e.target).el | ||
| // 不存在拖拽元素时不允许拖拽 | ||
| if (!element) return true | ||
| if (element.animated) return | ||
| this.dragEl = element | ||
| } catch (error) { | ||
@@ -255,16 +248,21 @@ throw new Error(error) | ||
| window.sortableDndOnDown = true | ||
| // 获取拖拽元素 | ||
| if (dragging) { | ||
| if (typeof dragging === 'function') this.dragEl = dragging(e) | ||
| else throw new Error(`dragging expected "function" or "string" but received "${typeof dragging}"`) | ||
| } else { | ||
| this.dragEl = getElement(this.$el, e.target, true) | ||
| } | ||
| // 获取当前元素在列表中的位置 | ||
| const { index, el, rect, offset } = getElement(this.$el, this.dragEl) | ||
| // 不存在拖拽元素时不允许拖拽 | ||
| if (!this.dragEl || this.dragEl.animated) return true | ||
| if (!el || index < 0) return true | ||
| // 获取拖拽元素在列表中的位置 | ||
| const { rect, offset } = getElement(this.$el, this.dragEl) | ||
| window.sortableDndOnDownState = true | ||
| this.ghost.set('x', rect.left) | ||
| this.ghost.set('y', rect.top) | ||
| this.differ._old_.rect = rect | ||
| this.differ._old_.offset = offset | ||
| this.differ._old_.node = this.dragEl | ||
| this.differ.from = { node: this.dragEl, rect, offset} | ||
| this.calcXY = { x: e.clientX, y: e.clientY } | ||
@@ -278,9 +276,6 @@ | ||
| // 将初始化放到move事件中，防止与click事件冲突 | ||
| if (!this.ghost.$el) { | ||
| // 将拖拽元素克隆一份作为蒙版 | ||
| const ghostEl = this.dragEl.cloneNode(true) | ||
| this.ghost.init(ghostEl, this.differ._old_.rect) | ||
| } | ||
| const { chosenClass, stopPropagation, onMove, onDrag } = this.options | ||
| if (stopPropagation) evt.stopPropagation() | ||
| const touch = evt.touches && evt.touches[0] | ||
@@ -291,5 +286,17 @@ const e = touch || evt | ||
| const { chosenClass, stopPropagation } = this.options | ||
| // 将初始化放到move事件中，防止与click事件冲突 | ||
| // 将拖拽元素克隆一份作为蒙版 | ||
| if (!this.ghost.$el) { | ||
| this.ghost.init(this.dragEl.cloneNode(true), this.differ.from.rect) | ||
| if (onDrag !== undefined) { | ||
| if (typeof onDrag === 'function') onDrag(this.dragEl, e, /** originalEvent */evt) | ||
| else throw new Error(`onDrag expected "function" but received "${typeof onDrag}"`) | ||
| } | ||
| } | ||
| if (stopPropagation) evt.stopPropagation() | ||
| // 拖拽过程中触发的回调 | ||
| if (onMove !== undefined) { | ||
| if (typeof onMove === 'function') onMove(this.differ.from, this.ghost.$el, e, /** originalEvent */evt) | ||
| else throw new Error(`onMove expected "function" but received "${typeof onMove}"`) | ||
| } | ||
@@ -299,6 +306,6 @@ toggleClass(this.dragEl, chosenClass, true) | ||
| if (!window.sortableDndOnDown) return | ||
| if (!window.sortableDndOnDownState) return | ||
| if (clientX < 0 || clientY < 0) return | ||
| window.sortableDndOnMove = true | ||
| window.sortableDndOnMoveState = true | ||
@@ -334,23 +341,30 @@ this.ghost.set('x', this.ghost.x + clientX - this.calcXY.x) | ||
| this.dropEl = el | ||
| if (clientX > left && clientX < right && clientY > top && clientY < bottom) { | ||
| this.dropEl = el | ||
| // 拖拽前后元素不一致时交换 | ||
| if (this.dropEl !== this.dragEl) { | ||
| if (this.dropEl.animated) return | ||
| if (el !== this.dragEl) { | ||
| this.differ.to = { node: this.dropEl, rect, offset } | ||
| if (el.animated) return | ||
| this.captureAnimationState() | ||
| const { onChange } = this.options | ||
| const _offset = getOffset(this.dragEl) // 获取拖拽元素的 offset 值 | ||
| // 元素发生位置交换时触发的回调 | ||
| if (onChange !== undefined) { | ||
| if (typeof onChange === 'function') onChange(this.differ.from, this.differ.to, e, evt) | ||
| else throw new Error(`onChange expected "function" but received "${typeof onChange}"`) | ||
| } | ||
| // 优先比较 top 值，top 值相同再比较 left | ||
| if (_offset.top < offset.top || _offset.left < offset.left) { | ||
| this.$el.insertBefore(this.dragEl, this.dropEl.nextElementSibling) | ||
| this.$el.insertBefore(this.dragEl, el.nextElementSibling) | ||
| } else { | ||
| this.$el.insertBefore(this.dragEl, this.dropEl) | ||
| this.$el.insertBefore(this.dragEl, el) | ||
| } | ||
| this.animateRange() | ||
| this.differ._new_.node = this.dropEl | ||
| this.differ._new_.rect = getRect(this.dropEl) | ||
| } | ||
@@ -364,3 +378,3 @@ } | ||
| const { dragEnd, chosenClass, stopPropagation } = this.options | ||
| const { onDrop, chosenClass, stopPropagation } = this.options | ||
@@ -371,23 +385,17 @@ if (stopPropagation) evt.stopPropagation() // 阻止事件冒泡 | ||
| if (window.sortableDndOnDown && window.sortableDndOnMove) { | ||
| if (window.sortableDndOnDownState && window.sortableDndOnMoveState) { | ||
| // 重新获取一次拖拽元素的 offset 值作为拖拽完成后的 offset 值 | ||
| this.differ._new_.offset = getOffset(this.dragEl) | ||
| // 重新获取一次拖拽元素的 offset 和 rect 值作为拖拽完成后的值 | ||
| this.differ.to.offset = getOffset(this.dragEl) | ||
| this.differ.to.rect = getRect(this.dragEl) | ||
| // 拖拽完成触发回调函数 | ||
| const { _old_, _new_ } = this.differ | ||
| const { from, to } = this.differ | ||
| // 通过 offset 比较是否进行了元素交换 | ||
| const changed = _old_.offset.top !== _new_.offset.top || _old_.offset.left !== _new_.offset.left | ||
| // 如果拖拽前后没有发生交换，重新赋值一次 | ||
| if (!changed) { | ||
| this.differ._new_.node = this.differ._old_.node | ||
| this.differ._new_.rect = this.differ._old_.rect | ||
| } | ||
| const changed = from.offset.top !== to.offset.top || from.offset.left !== to.offset.left | ||
| if (typeof dragEnd === 'function') { | ||
| dragEnd(_old_, _new_, changed) | ||
| } else { | ||
| throw new Error(`Sortable-dnd Error: dragEnd expected "function" but received "${typeof dragEnd}"`) | ||
| // 拖拽完成触发回调函数 | ||
| if (onDrop !== undefined) { | ||
| if (typeof onDrop === 'function') onDrop(changed, evt) | ||
| else throw new Error(`onDrop expected "function" but received "${typeof onDrop}"`) | ||
| } | ||
@@ -411,6 +419,8 @@ | ||
| _removeWindowState: function() { | ||
| window.sortableDndOnDown = null | ||
| window.sortableDndOnMove = null | ||
| delete window.sortableDndOnDown | ||
| delete window.sortableDndOnMove | ||
| window.sortableDndOnDownState = null | ||
| window.sortableDndOnMoveState = null | ||
| window.sortableDndAnimationEnd = null | ||
| delete window.sortableDndOnDownState | ||
| delete window.sortableDndOnMoveState | ||
| delete window.sortableDndAnimationEnd | ||
| }, | ||
@@ -449,2 +459,2 @@ | ||
| export default Sortable | ||
| export default Sortable |
@@ -118,5 +118,5 @@ import { IE11OrLess } from './Brower.js' | ||
| if (scrollingElement) { | ||
| return scrollingElement | ||
| return scrollingElement.contains(document.body) ? document : scrollingElement | ||
| } else { | ||
| return document.documentElement | ||
| return document | ||
| } | ||
@@ -180,5 +180,5 @@ } | ||
| * @param {HTMLElement} el | ||
| * @param {Boolean} onlyEl only get element | ||
| */ | ||
| export function getElement(group, el) { | ||
| const result = { index: -1, el: null, rect: {}, offset: {} } | ||
| export function getElement(group, el, onlyEl) { | ||
| const children = [...Array.from(group.children)] | ||
@@ -189,3 +189,3 @@ | ||
| if (index > -1) | ||
| Object.assign(result, { | ||
| return onlyEl ? children[index] : { | ||
| index, | ||
@@ -195,3 +195,3 @@ el: children[index], | ||
| offset: getOffset(children[index]) | ||
| }) | ||
| } | ||
@@ -201,3 +201,3 @@ // children 中无法直接找到对应的dom时，需要向下寻找 | ||
| if (isChildOf(el, children[i])) { | ||
| Object.assign(result, { | ||
| return onlyEl ? children[i] : { | ||
| index: i, | ||
@@ -207,7 +207,6 @@ el: children[i], | ||
| offset: getOffset(children[i]) | ||
| }) | ||
| break | ||
| } | ||
| } | ||
| } | ||
| return result | ||
| return onlyEl ? null : { index: -1, el: null, rect: {}, offset: {} } | ||
| } | ||
@@ -325,2 +324,2 @@ | ||
| getParentAutoScrollElement, | ||
| } | ||
| } |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by4.47%
83276
- Lines of code
- increased by2.11%
1739
- Number of lines in readme file
- increased by14.81%
93
No dependency changes