sortable-dnd - npm Package Compare versions

Comparing version 0.2.3 to 0.2.5

dist/sortable.js

 /*!
- * sortable-dnd v0.2.3
+ * sortable-dnd v0.2.5
  * open source under the MIT license
@@ -399,20 +399,26 @@ * https://github.com/mfuu/sortable-dnd#readme
   }
+  function debounce(fn, delay, immediate) {
+    var timer = null;
+    return function () {
+      var context = this,
+          args = arguments;
+      timer && clearTimeout(timer);
+      immediate && !timer && fn.apply(context, args); // 首次立即触发
 
-  var _throttleTimeout;
-
-  function throttle(callback, ms) {
+      timer = setTimeout(function () {
+        fn.apply(context, args);
+      }, delay);
+    };
+  }
+  function throttle(fn, delay) {
+    var timer = null;
     return function () {
-      if (!_throttleTimeout) {
-        var args = arguments,
-            _this = this;
+      var context = this,
+          args = arguments;
 
-        if (args.length === 1) {
-          callback.call(_this, args[0]);
-        } else {
-          callback.apply(_this, args);
-        }
-
-        _throttleTimeout = setTimeout(function () {
-          _throttleTimeout = void 0;
-        }, ms);
+      if (!timer) {
+        timer = setTimeout(function () {
+          timer = null;
+          fn.apply(context, args);
+        }, delay);
       }
@@ -548,2 +554,3 @@ };
 
+        if (!this.$el) return;
         var left = parseInt(this.$el.style.left);
@@ -708,5 +715,5 @@ var top = parseInt(this.$el.style.top);
       // 拖拽到容器边缘时自动滚动
-      scrollStep: 3,
+      scrollStep: 5,
       // 每一帧滚动的距离
-      scrollThreshold: 20,
+      scrollThreshold: 15,
       // 自动滚动的阈值
@@ -772,2 +779,3 @@ delay: 0,
 
+    this.autoScrollTimer = null;
     Object.assign(this, Animation(), DNDEvent());
@@ -798,2 +806,16 @@ this._onStart = this._onStart.bind(this);
     },
+
+    /**
+     * set value for options by key
+     */
+    set: function set(key, value) {
+      this.options[key] = value;
+    },
+
+    /**
+     * get value from options by key
+     */
+    get: function get(key) {
+      return this.options[key];
+    },
     // -------------------------------- prepare start ----------------------------------
@@ -805,8 +827,3 @@ _onStart: function _onStart(
 
-      var _this$options = this.options,
-          delay = _this$options.delay,
-          disabled = _this$options.disabled,
-          stopPropagation = _this$options.stopPropagation,
-          delayOnTouchOnly = _this$options.delayOnTouchOnly;
-      if (/mousedown|pointerdown/.test(evt.type) && evt.button !== 0 || disabled) return; // only left button and enabled
+      if (/mousedown|pointerdown/.test(evt.type) && evt.button !== 0 || this.options.disabled) return; // only left button and enabled
 
@@ -818,6 +835,10 @@ var touch = evt.touches && evt.touches[0] || evt.pointerType && evt.pointerType === 'touch' && evt;
       if (e.target === this.rootEl) return true;
-      if (stopPropagation) evt.stopPropagation();
+      if (this.options.stopPropagation) evt.stopPropagation();
+      var _this$options = this.options,
+          delay = _this$options.delay,
+          delayOnTouchOnly = _this$options.delayOnTouchOnly;
 
       if (delay && (!delayOnTouchOnly || touch) && (!this.nativeDraggable || !(Edge || IE11OrLess))) {
-        clearTimeout(this.dragStartTimer);
+        clearTimeout(this.dragStartTimer); // delay to start
+
         this.dragStartTimer = setTimeout(function () {
@@ -855,6 +876,4 @@ return _this2._onDrag(e, touch);
 
-      if (!this.dragEl || this.dragEl.animated) return true; // 解决移动端无法拖拽问题
+      if (!this.dragEl || this.dragEl.animated) return true; // 获取拖拽元素在列表中的位置
 
-      css(this.dragEl, 'touch-action', 'none'); // 获取拖拽元素在列表中的位置
-
       var _getElement = getElement(this.rootEl, this.dragEl),
@@ -868,6 +887,2 @@ rect = _getElement.rect,
       };
-      this.ghost.distance = {
-        x: e.clientX - rect.left,
-        y: e.clientY - rect.top
-      };
       this.differ.from = {
@@ -878,3 +893,7 @@ node: this.dragEl,
       };
-      this.state.sortableDown = e;
+      this.ghost.distance = {
+        x: e.clientX - rect.left,
+        y: e.clientY - rect.top
+      };
+      this.state.sortableDown = e; // sortable state down is active
 
@@ -889,14 +908,16 @@ this._bindMoveEvents(touch);
     evt) {
-      var onDrag = this.options.onDrag;
-      var rect = this.differ.from.rect; // 将初始化放到move事件中，防止与click事件冲突
-
       if (!this.ghost.$el) {
-        this.ghost.init(this.dragEl.cloneNode(true), rect); // onDrag callback
+        // 将初始化放到move事件中，防止与click事件冲突
+        var rect = this.differ.from.rect;
+        this.ghost.init(this.dragEl.cloneNode(true), rect); // add class for drag element
 
+        toggleClass(this.dragEl, this.options.chosenClass, true); // 解决移动端无法拖拽问题
+
+        this.dragEl.style['touch-action'] = 'none';
+        this.dragEl.style['will-change'] = 'transform'; // onDrag callback
+
+        var onDrag = this.options.onDrag;
         if (onDrag && typeof onDrag === 'function') onDrag(this.dragEl, e, evt);
+        if (Safari) css(document.body, 'user-select', 'none');
       }
-
-      if (Safari) {
-        css(document.body, 'user-select', 'none');
-      }
     },
@@ -907,2 +928,5 @@ // -------------------------------- on move ----------------------------------
     evt) {
+      var _this3 = this;
+
+      if (!this.state.sortableDown) return;
       var touch = evt.touches && evt.touches[0] || evt.pointerType && evt.pointerType === 'touch' && evt;
@@ -920,2 +944,4 @@ var e = touch || evt;
 
+      this.state.sortableMove = e; // sortable state move is active
+
       var stopPropagation = this.options.stopPropagation;
@@ -931,21 +957,26 @@ stopPropagation && evt.stopPropagation && evt.stopPropagation(); // 阻止事件冒泡
       var onMove = this.options.onMove;
-      if (onMove && typeof onMove === 'function') onMove(this.differ.from, this.ghost.$el, e, evt);
-      toggleClass(this.dragEl, this.options.chosenClass, true);
-      if (!this.state.sortableDown) return;
+      if (onMove && typeof onMove === 'function') onMove(this.differ.from, this.ghost.$el, e, evt); // 判断边界值
+
       if (clientX < 0 || clientY < 0) return;
-      this.state.sortableMove = e; // 判断边界值
 
-      var rc = getRect(this.rootEl);
+      var _getRect = getRect(this.rootEl),
+          top = _getRect.top,
+          right = _getRect.right,
+          bottom = _getRect.bottom,
+          left = _getRect.left;
 
-      if (clientX < rc.left || clientX > rc.right || clientY < rc.top || clientY > rc.bottom) {
-        return;
-      } // check if element will exchange
+      if (clientX < left || clientX > right || clientY < top || clientY > bottom) return; // check if element will exchange
 
-
       this._onChange(this, target, e, evt); // auto scroll
 
 
-      this.options.autoScroll && this._autoScroll();
+      this.autoScrollTimer && clearTimeout(this.autoScrollTimer);
+
+      if (this.options.autoScroll) {
+        this.autoScrollTimer = setTimeout(function () {
+          return _this3._autoScroll(_this3);
+        }, 0);
+      }
     },
-    _onChange: throttle(function (_this, target, e, evt) {
+    _onChange: debounce(function (_this, target, e, evt) {
       var _getElement2 = getElement(_this.rootEl, target),
@@ -1003,12 +1034,11 @@ el = _getElement2.el,
       clearTimeout(this.dragStartTimer);
-      var _this$options3 = this.options,
-          onDrop = _this$options3.onDrop,
-          chosenClass = _this$options3.chosenClass,
-          stopPropagation = _this$options3.stopPropagation;
+      var stopPropagation = this.options.stopPropagation;
       stopPropagation && evt.stopPropagation(); // 阻止事件冒泡
 
-      evt.cancelable && evt.preventDefault();
-      toggleClass(this.dragEl, chosenClass, false);
-      css(this.dragEl, 'touch-action', '');
+      evt.cancelable && evt.preventDefault(); // clear style and class
 
+      toggleClass(this.dragEl, this.options.chosenClass, false);
+      this.dragEl.style['touch-action'] = '';
+      this.dragEl.style['will-change'] = '';
+
       if (this.state.sortableDown && this.state.sortableMove) {
@@ -1024,18 +1054,16 @@ // 重新获取一次拖拽元素的 offset 和 rect 值作为拖拽完成后的值
 
+        var onDrop = this.options.onDrop;
         if (onDrop && typeof onDrop === 'function') onDrop(changed, evt);
         this.ghost.destroy(to.rect);
-      } // Safari
+      }
 
-
-      if (Safari) css(document.body, 'user-select', '');
       this.differ.destroy();
       this.state = new State();
+      if (Safari) css(document.body, 'user-select', '');
     },
     // -------------------------------- auto scroll ----------------------------------
-    _autoScroll: function _autoScroll() {
-      var _this3 = this;
-
+    _autoScroll: throttle(function (_this) {
       // check if is moving now
-      if (!this.state.sortableMove) return;
-      var _this$state$sortableM = this.state.sortableMove,
+      if (!(_this.state.sortableDown && _this.state.sortableMove)) return;
+      var _this$state$sortableM = _this.state.sortableMove,
           clientX = _this$state$sortableM.clientX,
@@ -1045,4 +1073,4 @@ clientY = _this$state$sortableM.clientY;
 
-      if (this.scrollEl === this.ownerDocument) ; else {
-        var _this$scrollEl = this.scrollEl,
+      if (_this.scrollEl === _this.ownerDocument) ; else {
+        var _this$scrollEl = _this.scrollEl,
             scrollTop = _this$scrollEl.scrollTop,
@@ -1053,16 +1081,19 @@ scrollLeft = _this$scrollEl.scrollLeft,
 
-        var _getRect = getRect(this.scrollEl),
-            top = _getRect.top,
-            right = _getRect.right,
-            bottom = _getRect.bottom,
-            left = _getRect.left;
+        var _getRect2 = getRect(_this.scrollEl),
+            top = _getRect2.top,
+            right = _getRect2.right,
+            bottom = _getRect2.bottom,
+            left = _getRect2.left,
+            height = _getRect2.height,
+            width = _getRect2.width;
 
-        var _this$options4 = this.options,
-            scrollStep = _this$options4.scrollStep,
-            scrollThreshold = _this$options4.scrollThreshold; // check direction
+        var _this$options3 = _this.options,
+            scrollStep = _this$options3.scrollStep,
+            scrollThreshold = _this$options3.scrollThreshold; // check direction
 
         var totop = scrollTop > 0 && clientY >= top && clientY <= top + scrollThreshold;
         var toleft = scrollLeft > 0 && clientX >= left && clientX <= left + scrollThreshold;
-        var toright = scrollLeft <= scrollWidth && clientX <= right && clientX >= right - scrollThreshold;
-        var tobottom = scrollTop <= scrollHeight && clientY <= bottom && clientY >= bottom - scrollThreshold;
+        var toright = scrollLeft + width < scrollWidth && clientX <= right && clientX >= right - scrollThreshold;
+        var tobottom = scrollTop + height < scrollHeight && clientY <= bottom && clientY >= bottom - scrollThreshold; // scroll position
+
         var position = {
@@ -1110,11 +1141,11 @@ x: scrollLeft,
 
-        if ((position.x || position.y) && (position.x !== scrollLeft || position.y !== scrollTop)) {
+        if (totop || toleft || toright || tobottom) {
           requestAnimationFrame(function () {
-            _this3.scrollEl.scrollTo(position.x, position.y);
+            _this.scrollEl.scrollTo(position.x, position.y);
 
-            _this3._autoScroll();
+            _this._autoScroll(_this);
           });
         }
       }
-    },
+    }, 10),
     // -------------------------------- clear ----------------------------------
@@ -1142,2 +1173,9 @@ _removeSelection: function _removeSelection() {
   };
+  Sortable.utils = {
+    getRect: getRect,
+    getOffset: getOffset,
+    debounce: debounce,
+    throttle: throttle,
+    getParentAutoScrollElement: getParentAutoScrollElement
+  };
 
@@ -1144,0 +1182,0 @@ return Sortable;

dist/sortable.min.js

@@ -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 i(t){return(i="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 r(t,e,o){return e&&n(t.prototype,e),o&&n(t,o),Object.defineProperty(t,"prototype",{writable:!1}),t}function s(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 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)?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 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 e,l,c=t(/(?:Trident.*rv[ :]?11\.|msie|iemobile|Windows Phone)/i),h=t(/Edge/i),f=t(/safari/i)&&!t(/chrome/i)&&!t(/android/i),u=t(/iP(ad|od|hone)/i),d=t(/chrome/i)&&t(/android/i),p={capture:!1,passive:!1},m=/\s+/g,g=["-webkit-transition","-moz-transition","-ms-transition","-o-transition","transition"],v=["-webkit-transform","-moz-transform","-ms-transform","-o-transform","transform"],y=(e=!1,document.addEventListener("checkIfSupportPassive",null,{get passive(){return e=!0}}),e);function w(e,o){o?"none"===o?g.forEach(function(t){return M(e,t,"none")}):g.forEach(function(t){return M(e,t,"".concat(t.split("transition")[0],"transform ").concat(o))}):g.forEach(function(t){return M(e,t,"")})}function b(e,o){o?v.forEach(function(t){return M(e,t,"".concat(t.split("transform")[0]).concat(o))}):v.forEach(function(t){return M(e,t,"")})}function E(t,e,o){window.addEventListener?t.addEventListener(e,o,!(!y&&c)&&p):window.attachEvent&&t.attachEvent("on"+e,o)}function S(t,e,o){window.removeEventListener?t.removeEventListener(e,o,!(!y&&c)&&p):window.detachEvent&&t.detachEvent("on"+e,o)}function _(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 D(){var t=document.scrollingElement;return!t||t.contains(document.body)?document:t}function x(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!==D()?(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 T(t,e,o){var n=s(Array.from(t.children)),t=n.indexOf(e);if(-1<t)return o?n[t]:{index:t,el:n[t],rect:x(n[t]),offset:_(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:x(n[i]),offset:_(n[i])};return o?null:{index:-1,el:null,rect:{},offset:{}}}function $(t,e,o){var n;t&&e&&(t.classList?t.classList[o?"add":"remove"](e):(n=(" "+t.className+" ").replace(m," ").replace(" "+e+" "," "),t.className=(n+(o?" "+e:"")).replace(m," ")))}function M(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 k=r(function t(){o(this,t),this.sortableDown=void 0,this.sortableMove=void 0,this.animationEnd=void 0}),C=function(){function t(){o(this,t),this.from={node:null,rect:{},offset:{}},this.to={node:null,rect:{},offset:{}}}return r(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}(),P=function(){function e(t){o(this,e),this.$el=null,this.distance={x:0,y:0},this.options=t.options,this.container=t.container}return r(e,[{key:"init",value:function(t,e){this.$el=t;var t=this.options,o=t.ghostClass,t=t.ghostStyle,t=void 0===t?{}:t;$(this.$el,o,!0),M(this.$el,"box-sizing","border-box"),M(this.$el,"margin",0),M(this.$el,"top",e.top),M(this.$el,"left",e.left),M(this.$el,"width",e.width),M(this.$el,"height",e.height),M(this.$el,"opacity","0.8"),M(this.$el,"position","fixed"),M(this.$el,"zIndex","100000"),M(this.$el,"pointerEvents","none"),this.setStyle(t),w(this.$el,"none"),b(this.$el,"translate3d(0px, 0px, 0px)"),this.container.appendChild(this.$el),M(this.$el,"transform-origin",this.distance.x/parseInt(this.$el.style.width)*100+"% "+this.distance.y/parseInt(this.$el.style.height)*100+"%")}},{key:"setStyle",value:function(t){for(var e in t)M(this.$el,e,t[e])}},{key:"rect",value:function(){return x(this.$el)}},{key:"move",value:function(t,e){this.$el&&(w(this.$el,2<arguments.length&&void 0!==arguments[2]&&arguments[2]?"".concat(this.options.ghostAnimation,"ms"):"none"),b(this.$el,"translate3d(".concat(t,"px, ").concat(e,"px, 0)")))}},{key:"destroy",value:function(t){var e=this,o=parseInt(this.$el.style.left),n=parseInt(this.$el.style.top),o=(this.move(t.left-o,t.top-n,!0),this.options.ghostAnimation);o?setTimeout(function(){return e.clear()},o):this.clear()}},{key:"clear",value:function(){this.$el&&this.$el.remove(),this.distance={x:0,y:0},this.$el=null}}]),e}();function A(){var i=[];return{captureAnimationState:function(){var t=s(Array.from(this.rootEl.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:x(t)})})},animateRange:function(){var o=this;i.forEach(function(t){var e=t.target,t=t.rect;o.animate(e,t,o.options.animation)})},animate:function(t,e){var o=2<arguments.length&&void 0!==arguments[2]?arguments[2]:150,n=x(t),i=e.left-n.left,e=e.top-n.top;w(t,"none"),b(t,"translate3d(".concat(i,"px, ").concat(e,"px, 0)")),t.offsetLeft,w(t,"".concat(o,"ms")),b(t,"translate3d(0px, 0px, 0px)"),clearTimeout(t.animated),t.animated=setTimeout(function(){w(t,""),b(t,""),t.animated=null},o)}}}var L,O,I="undefined"!=typeof document&&!d&&!u&&"draggable"in document.createElement("div");function H(t,e){if(!t||!t.nodeType||1!==t.nodeType)throw"Sortable: `el` must be an HTMLElement, not ".concat({}.toString.call(t));this.rootEl=t,this.scrollEl=function(t,e){if(!t||!t.getBoundingClientRect)return D();var o=t,n=!1;do{if(o.clientWidth<o.scrollWidth||o.clientHeight<o.scrollHeight){var i=M(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 D();if(n||e)return o;n=!0}}}while(o=o.parentNode);return D()}(t,!0),this.options=e=Object.assign({},e),this.ownerDocument=t.ownerDocument;var o,n={autoScroll:!0,scrollStep:3,scrollThreshold:20,delay:0,delayOnTouchOnly:!1,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,fallbackOnBody:!1,forceFallback:!1,stopPropagation:!1,supportPointer:"PointerEvent"in window&&!f,supportTouch:"ontouchstart"in window};for(o in n)o in this.options||(this.options[o]=n[o]);this.container=this.options.fallbackOnBody?document.body:this.rootEl,this.nativeDraggable=!this.options.forceFallback&&I,this.move={x:0,y:0},this.state=new k,this.differ=new C,this.ghost=new P(this),this.dragEl=null,this.dropEl=null,this.dragStartTimer=null,Object.assign(this,A(),{_bindEventListener:function(){var t=this.options,e=t.supportPointer,t=t.supportTouch;E(this.rootEl,e?"pointerdown":t?"touchstart":"mousedown",this._onStart)},_unbindEventListener:function(){S(this.rootEl,"pointerdown",this._onStart),S(this.rootEl,"touchstart",this._onStart),S(this.rootEl,"mousedown",this._onStart)},_bindMoveEvents:function(t){this.options.supportPointer?E(this.ownerDocument,"pointermove",this._onMove):E(this.ownerDocument,t?"touchmove":"mousemove",this._onMove)},_bindUpEvents:function(){E(this.ownerDocument,"pointerup",this._onDrop),E(this.ownerDocument,"pointercancel",this._onDrop),E(this.ownerDocument,"touchend",this._onDrop),E(this.ownerDocument,"touchcancel",this._onDrop),E(this.ownerDocument,"mouseup",this._onDrop)},_unbindMoveEvents:function(){S(this.ownerDocument,"pointermove",this._onMove),S(this.ownerDocument,"touchmove",this._onMove),S(this.ownerDocument,"mousemove",this._onMove)},_unbindUpEvents:function(){S(this.ownerDocument,"pointerup",this._onDrop),S(this.ownerDocument,"pointercancel",this._onDrop),S(this.ownerDocument,"touchend",this._onDrop),S(this.ownerDocument,"touchcancel",this._onDrop),S(this.ownerDocument,"mouseup",this._onDrop)}}),this._onStart=this._onStart.bind(this),this._onMove=this._onMove.bind(this),this._onDrop=this._onDrop.bind(this),this._bindEventListener(),window.requestAnimationFrame||(window.requestAnimationFrame=function(t){return setTimeout(t,17)})}return H.prototype={constructor:H,destroy:function(){this._unbindEventListener(),this._clearState()},_onStart:function(t){var e=this,o=this.options,n=o.delay,i=o.disabled,r=o.stopPropagation,o=o.delayOnTouchOnly;if(!(/mousedown|pointerdown/.test(t.type)&&0!==t.button||i)){var s=t.touches&&t.touches[0]||t.pointerType&&"touch"===t.pointerType&&t,a=s||t;if(this.nativeDraggable||!f||!a.target||"SELECT"!==a.target.tagName.toUpperCase()){if(a.target===this.rootEl)return!0;r&&t.stopPropagation(),!n||o&&!s||this.nativeDraggable&&(h||c)?this._onDrag(a,s):(clearTimeout(this.dragStartTimer),this.dragStartTimer=setTimeout(function(){return e._onDrag(a,s)},n))}}},_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(i(n),'"'));if(this._removeSelection(),o){if("function"!=typeof o)throw new Error('dragging expected "function" or "string" but received "'.concat(i(o),'"'));this.dragEl=o(t)}else this.dragEl=T(this.rootEl,t.target,!0);if(!this.dragEl||this.dragEl.animated)return!0;M(this.dragEl,"touch-action","none");n=T(this.rootEl,this.dragEl),o=n.rect,n=n.offset;this.move={x:t.clientX,y:t.clientY},this.ghost.distance={x:t.clientX-o.left,y:t.clientY-o.top},this.differ.from={node:this.dragEl,rect:o,offset:n},this.state.sortableDown=t,this._bindMoveEvents(e),this._bindUpEvents(e)},_onStarted:function(t,e){var o=this.options.onDrag,n=this.differ.from.rect;this.ghost.$el||(this.ghost.init(this.dragEl.cloneNode(!0),n),o&&"function"==typeof o&&o(this.dragEl,t,e)),f&&M(document.body,"user-select","none")},_onMove:function(t){var e=t.touches&&t.touches[0]||t.pointerType&&"touch"===t.pointerType&&t,o=e||t,n=o.clientX,i=o.clientY,e=e?document.elementFromPoint(n,i):o.target,r=n-this.move.x,s=i-this.move.y;void 0!==n&&Math.abs(r)<=0&&void 0!==i&&Math.abs(s)<=0||(this.options.stopPropagation&&t.stopPropagation&&t.stopPropagation(),void 0!==t.preventDefault&&t.cancelable&&t.preventDefault(),this._onStarted(o,t),this.ghost.move(r,s),(r=this.options.onMove)&&"function"==typeof r&&r(this.differ.from,this.ghost.$el,o,t),$(this.dragEl,this.options.chosenClass,!0),!this.state.sortableDown||n<0||i<0||(this.state.sortableMove=o,n<(s=x(this.rootEl)).left||n>s.right||i<s.top||i>s.bottom||(this._onChange(this,e,o,t),this.options.autoScroll&&this._autoScroll())))},_onChange:(L=function(t,e,o,n){var i,r,s,a,l,c,e=T(t.rootEl,e),h=e.el,f=e.rect,e=e.offset;h&&!h.animated&&(t.dropEl=h,c=o.clientX,i=o.clientY,l=f.left,r=f.right,s=f.top,a=f.bottom,l<c&&c<r&&s<i&&i<a&&h!==t.dragEl&&(t.differ.to={node:t.dropEl,rect:f,offset:e},t.captureAnimationState(),l=t.options.onChange,c=_(t.dragEl),l&&"function"==typeof l&&l(t.differ.from,t.differ.to,o,n),c.top<e.top||c.left<e.left?t.rootEl.insertBefore(t.dragEl,h.nextElementSibling):t.rootEl.insertBefore(t.dragEl,h),t.animateRange()))},O=5,function(){var t;l||(1===(t=arguments).length?L.call(this,t[0]):L.apply(this,t),l=setTimeout(function(){l=void 0},O))}),_onDrop:function(t){this._unbindMoveEvents(),this._unbindUpEvents(),clearTimeout(this.dragStartTimer);var e=this.options,o=e.onDrop,n=e.chosenClass;e.stopPropagation&&t.stopPropagation(),t.cancelable&&t.preventDefault(),$(this.dragEl,n,!1),M(this.dragEl,"touch-action",""),this.state.sortableDown&&this.state.sortableMove&&(this.differ.to.offset=_(this.dragEl),this.differ.to.rect=x(this.dragEl),n=(e=this.differ).from,e=e.to,n=n.offset.top!==e.offset.top||n.offset.left!==e.offset.left,o&&"function"==typeof o&&o(n,t),this.ghost.destroy(e.rect)),f&&M(document.body,"user-select",""),this.differ.destroy(),this.state=new k},_autoScroll:function(){var t,e,o,n,i,r,s,a,l,c,h,f,u,d=this;this.state.sortableMove&&(t=(e=this.state.sortableMove).clientX,e=e.clientY,void 0!==t&&void 0!==e&&this.scrollEl!==this.ownerDocument&&(o=(h=this.scrollEl).scrollTop,n=h.scrollLeft,i=h.scrollHeight,h=h.scrollWidth,r=(c=x(this.scrollEl)).top,f=c.right,s=c.bottom,c=c.left,a=(l=this.options).scrollStep,l=l.scrollThreshold,c=0<n&&c<=t&&t<=c+l,h=n<=h&&t<=f&&f-l<=t,f=o<=i&&e<=s&&s-l<=e,u={x:n,y:o},0<o&&r<=e&&e<=r+l?(u.x=c?n-a:h?n+a:n,u.y=o-a):f?(u.x=c?n-a:h?n+a:n,u.y=o+a):c?(u.x=n-a,u.y=o):h&&(u.x=n+a,u.y=o),!u.x&&!u.y||u.x===n&&u.y===o||requestAnimationFrame(function(){d.scrollEl.scrollTo(u.x,u.y),d._autoScroll()})))},_removeSelection:function(){try{document.selection?setTimeout(function(){document.selection.empty()},0):window.getSelection().removeAllRanges()}catch(t){}},_clearState:function(){this.dragEl=null,this.dropEl=null,this.state=new k,this.ghost.destroy(),this.differ.destroy()}},H});
+!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 i(t){return(i="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 r(t,e,o){return e&&n(t.prototype,e),o&&n(t,o),Object.defineProperty(t,"prototype",{writable:!1}),t}function s(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 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)?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 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 e,l=t(/(?:Trident.*rv[ :]?11\.|msie|iemobile|Windows Phone)/i),c=t(/Edge/i),h=t(/safari/i)&&!t(/chrome/i)&&!t(/android/i),u=t(/iP(ad|od|hone)/i),f=t(/chrome/i)&&t(/android/i),d={capture:!1,passive:!1},p=/\s+/g,m=["-webkit-transition","-moz-transition","-ms-transition","-o-transition","transition"],g=["-webkit-transform","-moz-transform","-ms-transform","-o-transform","transform"],v=(e=!1,document.addEventListener("checkIfSupportPassive",null,{get passive(){return e=!0}}),e);function y(e,o){o?"none"===o?m.forEach(function(t){return M(e,t,"none")}):m.forEach(function(t){return M(e,t,"".concat(t.split("transition")[0],"transform ").concat(o))}):m.forEach(function(t){return M(e,t,"")})}function w(e,o){o?g.forEach(function(t){return M(e,t,"".concat(t.split("transform")[0]).concat(o))}):g.forEach(function(t){return M(e,t,"")})}function b(t,e,o){window.addEventListener?t.addEventListener(e,o,!(!v&&l)&&d):window.attachEvent&&t.attachEvent("on"+e,o)}function E(t,e,o){window.removeEventListener?t.removeEventListener(e,o,!(!v&&l)&&d):window.detachEvent&&t.detachEvent("on"+e,o)}function S(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 _(t,e){if(!t||!t.getBoundingClientRect)return D();var o=t,n=!1;do{if(o.clientWidth<o.scrollWidth||o.clientHeight<o.scrollHeight){var i=M(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 D();if(n||e)return o;n=!0}}}while(o=o.parentNode);return D()}function D(){var t=document.scrollingElement;return!t||t.contains(document.body)?document:t}function T(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!==D()?(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 x(t,e,o){var n=s(Array.from(t.children)),t=n.indexOf(e);if(-1<t)return o?n[t]:{index:t,el:n[t],rect:T(n[t]),offset:S(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:T(n[i]),offset:S(n[i])};return o?null:{index:-1,el:null,rect:{},offset:{}}}function $(t,e,o){var n;t&&e&&(t.classList?t.classList[o?"add":"remove"](e):(n=(" "+t.className+" ").replace(p," ").replace(" "+e+" "," "),t.className=(n+(o?" "+e:"")).replace(p," ")))}function M(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")}}function k(o,n,i){var r=null;return function(){var t=this,e=arguments;r&&clearTimeout(r),i&&!r&&o.apply(t,e),r=setTimeout(function(){o.apply(t,e)},n)}}function P(o,n){var i=null;return function(){var t=this,e=arguments;i=i||setTimeout(function(){i=null,o.apply(t,e)},n)}}var A=r(function t(){o(this,t),this.sortableDown=void 0,this.sortableMove=void 0,this.animationEnd=void 0}),C=function(){function t(){o(this,t),this.from={node:null,rect:{},offset:{}},this.to={node:null,rect:{},offset:{}}}return r(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}(),L=function(){function e(t){o(this,e),this.$el=null,this.distance={x:0,y:0},this.options=t.options,this.container=t.container}return r(e,[{key:"init",value:function(t,e){this.$el=t;var t=this.options,o=t.ghostClass,t=t.ghostStyle,t=void 0===t?{}:t;$(this.$el,o,!0),M(this.$el,"box-sizing","border-box"),M(this.$el,"margin",0),M(this.$el,"top",e.top),M(this.$el,"left",e.left),M(this.$el,"width",e.width),M(this.$el,"height",e.height),M(this.$el,"opacity","0.8"),M(this.$el,"position","fixed"),M(this.$el,"zIndex","100000"),M(this.$el,"pointerEvents","none"),this.setStyle(t),y(this.$el,"none"),w(this.$el,"translate3d(0px, 0px, 0px)"),this.container.appendChild(this.$el),M(this.$el,"transform-origin",this.distance.x/parseInt(this.$el.style.width)*100+"% "+this.distance.y/parseInt(this.$el.style.height)*100+"%")}},{key:"setStyle",value:function(t){for(var e in t)M(this.$el,e,t[e])}},{key:"rect",value:function(){return T(this.$el)}},{key:"move",value:function(t,e){this.$el&&(y(this.$el,2<arguments.length&&void 0!==arguments[2]&&arguments[2]?"".concat(this.options.ghostAnimation,"ms"):"none"),w(this.$el,"translate3d(".concat(t,"px, ").concat(e,"px, 0)")))}},{key:"destroy",value:function(t){var e,o,n=this;this.$el&&(o=parseInt(this.$el.style.left),e=parseInt(this.$el.style.top),this.move(t.left-o,t.top-e,!0),(o=this.options.ghostAnimation)?setTimeout(function(){return n.clear()},o):this.clear())}},{key:"clear",value:function(){this.$el&&this.$el.remove(),this.distance={x:0,y:0},this.$el=null}}]),e}();function O(){var i=[];return{captureAnimationState:function(){var t=s(Array.from(this.rootEl.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:T(t)})})},animateRange:function(){var o=this;i.forEach(function(t){var e=t.target,t=t.rect;o.animate(e,t,o.options.animation)})},animate:function(t,e){var o=2<arguments.length&&void 0!==arguments[2]?arguments[2]:150,n=T(t),i=e.left-n.left,e=e.top-n.top;y(t,"none"),w(t,"translate3d(".concat(i,"px, ").concat(e,"px, 0)")),t.offsetLeft,y(t,"".concat(o,"ms")),w(t,"translate3d(0px, 0px, 0px)"),clearTimeout(t.animated),t.animated=setTimeout(function(){y(t,""),w(t,""),t.animated=null},o)}}}var I="undefined"!=typeof document&&!f&&!u&&"draggable"in document.createElement("div");function H(t,e){if(!t||!t.nodeType||1!==t.nodeType)throw"Sortable: `el` must be an HTMLElement, not ".concat({}.toString.call(t));this.rootEl=t,this.scrollEl=_(t,!0),this.options=e=Object.assign({},e),this.ownerDocument=t.ownerDocument;var o,n={autoScroll:!0,scrollStep:5,scrollThreshold:15,delay:0,delayOnTouchOnly:!1,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,fallbackOnBody:!1,forceFallback:!1,stopPropagation:!1,supportPointer:"PointerEvent"in window&&!h,supportTouch:"ontouchstart"in window};for(o in n)o in this.options||(this.options[o]=n[o]);this.container=this.options.fallbackOnBody?document.body:this.rootEl,this.nativeDraggable=!this.options.forceFallback&&I,this.move={x:0,y:0},this.state=new A,this.differ=new C,this.ghost=new L(this),this.dragEl=null,this.dropEl=null,this.dragStartTimer=null,this.autoScrollTimer=null,Object.assign(this,O(),{_bindEventListener:function(){var t=this.options,e=t.supportPointer,t=t.supportTouch;b(this.rootEl,e?"pointerdown":t?"touchstart":"mousedown",this._onStart)},_unbindEventListener:function(){E(this.rootEl,"pointerdown",this._onStart),E(this.rootEl,"touchstart",this._onStart),E(this.rootEl,"mousedown",this._onStart)},_bindMoveEvents:function(t){this.options.supportPointer?b(this.ownerDocument,"pointermove",this._onMove):b(this.ownerDocument,t?"touchmove":"mousemove",this._onMove)},_bindUpEvents:function(){b(this.ownerDocument,"pointerup",this._onDrop),b(this.ownerDocument,"pointercancel",this._onDrop),b(this.ownerDocument,"touchend",this._onDrop),b(this.ownerDocument,"touchcancel",this._onDrop),b(this.ownerDocument,"mouseup",this._onDrop)},_unbindMoveEvents:function(){E(this.ownerDocument,"pointermove",this._onMove),E(this.ownerDocument,"touchmove",this._onMove),E(this.ownerDocument,"mousemove",this._onMove)},_unbindUpEvents:function(){E(this.ownerDocument,"pointerup",this._onDrop),E(this.ownerDocument,"pointercancel",this._onDrop),E(this.ownerDocument,"touchend",this._onDrop),E(this.ownerDocument,"touchcancel",this._onDrop),E(this.ownerDocument,"mouseup",this._onDrop)}}),this._onStart=this._onStart.bind(this),this._onMove=this._onMove.bind(this),this._onDrop=this._onDrop.bind(this),this._bindEventListener(),window.requestAnimationFrame||(window.requestAnimationFrame=function(t){return setTimeout(t,17)})}return H.prototype={constructor:H,destroy:function(){this._unbindEventListener(),this._clearState()},set:function(t,e){this.options[t]=e},get:function(t){return this.options[t]},_onStart:function(t){var e=this;if(!(/mousedown|pointerdown/.test(t.type)&&0!==t.button||this.options.disabled)){var o=t.touches&&t.touches[0]||t.pointerType&&"touch"===t.pointerType&&t,n=o||t;if(this.nativeDraggable||!h||!n.target||"SELECT"!==n.target.tagName.toUpperCase()){if(n.target===this.rootEl)return!0;this.options.stopPropagation&&t.stopPropagation();var t=this.options,i=t.delay,t=t.delayOnTouchOnly;!i||t&&!o||this.nativeDraggable&&(c||l)?this._onDrag(n,o):(clearTimeout(this.dragStartTimer),this.dragStartTimer=setTimeout(function(){return e._onDrag(n,o)},i))}}},_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(i(n),'"'));if(this._removeSelection(),o){if("function"!=typeof o)throw new Error('dragging expected "function" or "string" but received "'.concat(i(o),'"'));this.dragEl=o(t)}else this.dragEl=x(this.rootEl,t.target,!0);if(!this.dragEl||this.dragEl.animated)return!0;n=x(this.rootEl,this.dragEl),o=n.rect,n=n.offset;this.move={x:t.clientX,y:t.clientY},this.differ.from={node:this.dragEl,rect:o,offset:n},this.ghost.distance={x:t.clientX-o.left,y:t.clientY-o.top},this.state.sortableDown=t,this._bindMoveEvents(e),this._bindUpEvents(e)},_onStarted:function(t,e){var o;this.ghost.$el||(o=this.differ.from.rect,this.ghost.init(this.dragEl.cloneNode(!0),o),$(this.dragEl,this.options.chosenClass,!0),this.dragEl.style["touch-action"]="none",this.dragEl.style["will-change"]="transform",(o=this.options.onDrag)&&"function"==typeof o&&o(this.dragEl,t,e),h&&M(document.body,"user-select","none"))},_onMove:function(t){var e,o,n,i,r,s,a,l,c=this;this.state.sortableDown&&(o=(e=(i=t.touches&&t.touches[0]||t.pointerType&&"touch"===t.pointerType&&t)||t).clientX,n=e.clientY,i=i?document.elementFromPoint(o,n):e.target,s=o-this.move.x,r=n-this.move.y,void 0!==o&&Math.abs(s)<=0&&void 0!==n&&Math.abs(r)<=0||(this.state.sortableMove=e,this.options.stopPropagation&&t.stopPropagation&&t.stopPropagation(),void 0!==t.preventDefault&&t.cancelable&&t.preventDefault(),this._onStarted(e,t),this.ghost.move(s,r),(s=this.options.onMove)&&"function"==typeof s&&s(this.differ.from,this.ghost.$el,e,t),o<0||n<0||(s=(r=T(this.rootEl)).top,a=r.right,l=r.bottom,o<r.left||a<o||n<s||l<n||(this._onChange(this,i,e,t),this.autoScrollTimer&&clearTimeout(this.autoScrollTimer),this.options.autoScroll&&(this.autoScrollTimer=setTimeout(function(){return c._autoScroll(c)},0))))))},_onChange:k(function(t,e,o,n){var i,r,s,a,l,c,e=x(t.rootEl,e),h=e.el,u=e.rect,e=e.offset;h&&!h.animated&&(t.dropEl=h,c=o.clientX,i=o.clientY,l=u.left,r=u.right,s=u.top,a=u.bottom,l<c&&c<r&&s<i&&i<a&&h!==t.dragEl&&(t.differ.to={node:t.dropEl,rect:u,offset:e},t.captureAnimationState(),l=t.options.onChange,c=S(t.dragEl),l&&"function"==typeof l&&l(t.differ.from,t.differ.to,o,n),c.top<e.top||c.left<e.left?t.rootEl.insertBefore(t.dragEl,h.nextElementSibling):t.rootEl.insertBefore(t.dragEl,h),t.animateRange()))},5),_onDrop:function(t){var e,o,n;this._unbindMoveEvents(),this._unbindUpEvents(),clearTimeout(this.dragStartTimer),this.options.stopPropagation&&t.stopPropagation(),t.cancelable&&t.preventDefault(),$(this.dragEl,this.options.chosenClass,!1),this.dragEl.style["touch-action"]="",this.dragEl.style["will-change"]="",this.state.sortableDown&&this.state.sortableMove&&(this.differ.to.offset=S(this.dragEl),this.differ.to.rect=T(this.dragEl),o=(e=this.differ).from,e=e.to,o=o.offset.top!==e.offset.top||o.offset.left!==e.offset.left,(n=this.options.onDrop)&&"function"==typeof n&&n(o,t),this.ghost.destroy(e.rect)),this.differ.destroy(),this.state=new A,h&&M(document.body,"user-select","")},_autoScroll:P(function(t){var e,o,n,i,r,s,a,l,c,h,u,f,d,p,m;t.state.sortableDown&&t.state.sortableMove&&(e=(o=t.state.sortableMove).clientX,o=o.clientY,void 0!==e&&void 0!==o&&t.scrollEl!==t.ownerDocument&&(n=(p=t.scrollEl).scrollTop,i=p.scrollLeft,r=p.scrollHeight,p=p.scrollWidth,s=(d=T(t.scrollEl)).top,u=d.right,a=d.bottom,f=d.left,l=d.height,d=d.width,c=(h=t.options).scrollStep,h=h.scrollThreshold,f=0<i&&f<=e&&e<=f+h,d=i+d<p&&e<=u&&u-h<=e,p=n+l<r&&o<=a&&a-h<=o,m={x:i,y:n},(u=0<n&&s<=o&&o<=s+h)?(m.x=f?i-c:d?i+c:i,m.y=n-c):p?(m.x=f?i-c:d?i+c:i,m.y=n+c):f?(m.x=i-c,m.y=n):d&&(m.x=i+c,m.y=n),(u||f||d||p)&&requestAnimationFrame(function(){t.scrollEl.scrollTo(m.x,m.y),t._autoScroll(t)})))},10),_removeSelection:function(){try{document.selection?setTimeout(function(){document.selection.empty()},0):window.getSelection().removeAllRanges()}catch(t){}},_clearState:function(){this.dragEl=null,this.dropEl=null,this.state=new A,this.ghost.destroy(),this.differ.destroy()}},H.utils={getRect:T,getOffset:S,debounce:k,throttle:P,getParentAutoScrollElement:_},H});

package.json

 {
   "name": "sortable-dnd",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "description": "JS Library for Drag and Drop, supports Sortable and Draggable",
@@ -20,2 +20,3 @@ "main": "dist/sortable.min.js",
   "keywords": [
+    "list",
     "drag",
@@ -26,3 +27,3 @@ "drop",
     "draggable",
-    "list"
+    "drag and drop"
   ],
@@ -29,0 +30,0 @@ "author": "mfuu",

README.md

@@ -14,2 +14,4 @@ <p>
 
+## [Demo](https://mfuu.github.io/sortable-dnd/)
+
 # Usage
@@ -83,4 +85,4 @@
 | `autoScroll`      | `Boolean`         | `true`      | Automatic scrolling when moving to the edge of the container |
-| `scrollStep`      | `Number`          | `3`         | The distance to scroll each frame when autoscrolling |
-| `scrollThreshold` | `Number`          | `20`        | Threshold to trigger autoscroll |
+| `scrollStep`      | `Number`          | `5`         | The distance to scroll each frame when autoscrolling |
+| `scrollThreshold` | `Number`          | `15`        | Threshold to trigger autoscroll |
 
@@ -87,0 +89,0 @@

src/Plugins.js

@@ -88,2 +88,3 @@ import { css, getRect, toggleClass, setTransition, setTransform } from './utils.js'
   destroy(rect) {
+    if (!this.$el) return
     const left = parseInt(this.$el.style.left)
@@ -90,0 +91,0 @@ const top = parseInt(this.$el.style.top)

src/Sortable.js

@@ -39,4 +39,4 @@ import {
     autoScroll: true, // 拖拽到容器边缘时自动滚动
-    scrollStep: 3, // 每一帧滚动的距离
-    scrollThreshold: 20, // 自动滚动的阈值
+    scrollStep: 5, // 每一帧滚动的距离
+    scrollThreshold: 15, // 自动滚动的阈值
     
@@ -83,2 +83,3 @@ delay: 0, // 定义鼠标选中列表单元可以开始拖动的延迟时间
   this.dragStartTimer = null // setTimeout timer
+  this.autoScrollTimer = null
 
@@ -110,6 +111,19 @@ Object.assign(this, Animation(), Events())
 
+  /**
+   * set value for options by key
+   */
+  set (key, value) {
+    this.options[key] = value
+  },
+
+  /**
+   * get value from options by key
+   */
+  get (key) {
+    return this.options[key]
+  },
+
   // -------------------------------- prepare start ----------------------------------
   _onStart: function(/** Event|TouchEvent */evt) {
-    const { delay, disabled, stopPropagation, delayOnTouchOnly } = this.options
-    if (/mousedown|pointerdown/.test(evt.type) && evt.button !== 0 || disabled) return // only left button and enabled
+    if (/mousedown|pointerdown/.test(evt.type) && evt.button !== 0 || this.options.disabled) return // only left button and enabled
 
@@ -123,6 +137,8 @@ const touch = (evt.touches && evt.touches[0]) || (evt.pointerType && evt.pointerType === 'touch' && evt)
 
-    if (stopPropagation) evt.stopPropagation()
+    if (this.options.stopPropagation) evt.stopPropagation()
 
+    const { delay, delayOnTouchOnly } = this.options
     if (delay && (!delayOnTouchOnly || touch) && (!this.nativeDraggable || !(Edge || IE11OrLess))) {
       clearTimeout(this.dragStartTimer)
+      // delay to start
       this.dragStartTimer = setTimeout(() => this._onDrag(e, touch), delay)
@@ -159,17 +175,8 @@ } else {
 
-    // 解决移动端无法拖拽问题
-    css(this.dragEl, 'touch-action', 'none')
-
     // 获取拖拽元素在列表中的位置
     const { rect, offset } = getElement(this.rootEl, this.dragEl)
-    this.move = {
-      x: e.clientX,
-      y: e.clientY
-    }
-    this.ghost.distance = {
-      x: e.clientX - rect.left,
-      y: e.clientY - rect.top
-    }
+    this.move = { x: e.clientX, y: e.clientY }
     this.differ.from = { node: this.dragEl, rect, offset}
-    this.state.sortableDown = e
+    this.ghost.distance = { x: e.clientX - rect.left, y: e.clientY - rect.top }
+    this.state.sortableDown = e // sortable state down is active
 
@@ -182,14 +189,19 @@ this._bindMoveEvents(touch)
   _onStarted: function(e, /** originalEvent */evt) {
-    const { onDrag } = this.options
-    const { rect } = this.differ.from
-    // 将初始化放到move事件中，防止与click事件冲突
     if (!this.ghost.$el) {
+      // 将初始化放到move事件中，防止与click事件冲突
+      const { rect } = this.differ.from
       this.ghost.init(this.dragEl.cloneNode(true), rect)
 
+      // add class for drag element
+      toggleClass(this.dragEl, this.options.chosenClass, true)
+      // 解决移动端无法拖拽问题
+      this.dragEl.style['touch-action'] = 'none'
+      this.dragEl.style['will-change'] = 'transform'
+
       // onDrag callback
+      const { onDrag } = this.options
       if (onDrag && typeof onDrag === 'function') onDrag(this.dragEl, e, evt)
+
+      if (Safari) css(document.body, 'user-select', 'none')
     }
-    if (Safari) {
-			css(document.body, 'user-select', 'none');
-		}
   },
@@ -199,2 +211,3 @@
   _onMove: function(/** Event|TouchEvent */evt) {
+    if (!this.state.sortableDown) return
     const touch = (evt.touches && evt.touches[0]) || (evt.pointerType && evt.pointerType === 'touch' && evt)
@@ -204,3 +217,2 @@ const e = touch || evt
     const target = touch ? document.elementFromPoint(clientX, clientY) : e.target
-
     const distanceX = clientX - this.move.x
@@ -213,2 +225,4 @@ const distanceY = clientY - this.move.y
 
+    this.state.sortableMove = e // sortable state move is active
+
     const { stopPropagation } = this.options
@@ -225,27 +239,20 @@ stopPropagation && evt.stopPropagation && evt.stopPropagation() // 阻止事件冒泡
 
-    toggleClass(this.dragEl, this.options.chosenClass, true)
-
-    if (!this.state.sortableDown) return
+    // 判断边界值
     if (clientX < 0 || clientY < 0) return
+    const { top, right, bottom, left } = getRect(this.rootEl)
+    if (clientX < left || clientX > right || clientY < top || clientY > bottom) return
 
-    this.state.sortableMove = e
-
-    // 判断边界值
-    const rc = getRect(this.rootEl)
-
-    if (clientX < rc.left || clientX > rc.right || clientY < rc.top || clientY > rc.bottom) {
-      return
-    }
     // check if element will exchange
     this._onChange(this, target, e, evt)
     // auto scroll
-    this.options.autoScroll && this._autoScroll()
+    this.autoScrollTimer && clearTimeout(this.autoScrollTimer)
+    if (this.options.autoScroll) {
+      this.autoScrollTimer = setTimeout(() => this._autoScroll(this), 0)
+    }
   },
-  _onChange: throttle(function(_this, target, e, evt) {
+  _onChange: debounce(function(_this, target, e, evt) {
     const { el, rect, offset } = getElement(_this.rootEl, target)
-    
     if (!el || (el && el.animated)) return
     
     _this.dropEl = el
-
     const { clientX, clientY } = e
@@ -285,12 +292,12 @@ const { left, right, top, bottom } = rect
 
-    const { onDrop, chosenClass, stopPropagation } = this.options
-
+    const { stopPropagation } = this.options
     stopPropagation && evt.stopPropagation() // 阻止事件冒泡
     evt.cancelable && evt.preventDefault()
 
-    toggleClass(this.dragEl, chosenClass, false)
-    css(this.dragEl, 'touch-action', '')
+    // clear style and class
+    toggleClass(this.dragEl, this.options.chosenClass, false)
+    this.dragEl.style['touch-action'] = ''
+    this.dragEl.style['will-change'] = ''
 
     if (this.state.sortableDown && this.state.sortableMove) {
-
       // 重新获取一次拖拽元素的 offset 和 rect 值作为拖拽完成后的值
@@ -301,7 +308,6 @@ this.differ.to.offset = getOffset(this.dragEl)
       const { from, to } = this.differ
-
       // 通过 offset 比较是否进行了元素交换
       const changed = from.offset.top !== to.offset.top || from.offset.left !== to.offset.left
-      
       // onDrop callback
+      const { onDrop } = this.options
       if (onDrop && typeof onDrop === 'function') onDrop(changed, evt)
@@ -311,27 +317,26 @@
     }
-    // Safari
-    if (Safari) css(document.body, 'user-select', '')
     this.differ.destroy()
     this.state = new State
+    if (Safari) css(document.body, 'user-select', '')
   },
 
   // -------------------------------- auto scroll ----------------------------------
-  _autoScroll: function() {
+  _autoScroll: throttle(function(_this) {
     // check if is moving now
-    if (!this.state.sortableMove) return
-    const { clientX, clientY } = this.state.sortableMove
+    if (!(_this.state.sortableDown && _this.state.sortableMove)) return
+    const { clientX, clientY } = _this.state.sortableMove
     if (clientX === void 0 || clientY === void 0) return
 
-    if (this.scrollEl === this.ownerDocument) {
+    if (_this.scrollEl === _this.ownerDocument) {
       // does not support now
     } else {
-      const { scrollTop, scrollLeft, scrollHeight, scrollWidth } = this.scrollEl
-      const { top, right, bottom, left } = getRect(this.scrollEl)
-      const { scrollStep, scrollThreshold } = this.options
+      const { scrollTop, scrollLeft, scrollHeight, scrollWidth } = _this.scrollEl
+      const { top, right, bottom, left, height, width } = getRect(_this.scrollEl)
+      const { scrollStep, scrollThreshold } = _this.options
       // check direction
       const totop = scrollTop > 0 && clientY >= top && clientY <= (top + scrollThreshold)
       const toleft = scrollLeft > 0 && clientX >= left && clientX <= (left + scrollThreshold)
-      const toright = scrollLeft <= scrollWidth && clientX <= right && clientX >= (right - scrollThreshold)
-      const tobottom = scrollTop <= scrollHeight && clientY <= bottom && clientY >= (bottom - scrollThreshold)
-
+      const toright = (scrollLeft + width) < scrollWidth && clientX <= right && clientX >= (right - scrollThreshold)
+      const tobottom = (scrollTop + height) < scrollHeight && clientY <= bottom && clientY >= (bottom - scrollThreshold)
+      // scroll position
       const position = { x: scrollLeft, y: scrollTop }
@@ -373,10 +378,10 @@
       // if need to scroll
-      if ((position.x || position.y) && (position.x !== scrollLeft || position.y !== scrollTop)) {
+      if (totop || toleft || toright || tobottom) {
         requestAnimationFrame(() => {
-          this.scrollEl.scrollTo(position.x, position.y)
-          this._autoScroll()
+          _this.scrollEl.scrollTo(position.x, position.y)
+          _this._autoScroll(_this)
         })
       }
     }
-  },
+  }, 10),
 
@@ -405,2 +410,10 @@ // -------------------------------- clear ----------------------------------
 
+Sortable.utils = {
+  getRect,
+  getOffset,
+  debounce,
+  throttle,
+  getParentAutoScrollElement
+}
+
 export default Sortable

src/utils.js

@@ -317,7 +317,10 @@ import { IE11OrLess } from './Brower.js'
 
-export function debounce(fn, delay) {
-  return function (...args) {
-    clearTimeout(fn.id)
-    fn.id = setTimeout(() => {
-      fn.call(this, ...args)
+export function debounce(fn, delay, immediate) {
+  let timer = null
+  return function() {
+    const context = this, args = arguments
+    timer && clearTimeout(timer)
+    immediate && !timer && fn.apply(context, args) // 首次立即触发
+    timer = setTimeout(function() {
+      fn.apply(context, args)
     }, delay)
@@ -327,19 +330,13 @@ }
 
-let _throttleTimeout
-export function throttle(callback, ms) {
-	return function () {
-		if (!_throttleTimeout) {
-			let args = arguments, _this = this
-
-			if (args.length === 1) {
-				callback.call(_this, args[0])
-			} else {
-				callback.apply(_this, args)
-			}
-
-			_throttleTimeout = setTimeout(function () {
-				_throttleTimeout = void 0
-			}, ms)
-		}
-	};
+export function throttle(fn, delay) {
+  let timer = null
+  return function() {
+    const context = this, args = arguments
+    if(!timer) {
+      timer = setTimeout(function() {
+        timer = null
+        fn.apply(context, args)
+      }, delay)
+    }
+  }
 }
@@ -346,0 +343,0 @@

No alert changes

Improved metrics

Total package byte prevSize

90032

increased by3.14%

Lines of code

1918

increased by3.01%

Number of lines in readme file

103

increased by1.98%

No dependency changes