sortable-dnd - npm Package Compare versions

Comparing version 0.3.1 to 0.3.2

dist/sortable.js

 /*!
- * sortable-dnd v0.3.1
+ * sortable-dnd v0.3.2
  * open source under the MIT license
@@ -589,3 +589,3 @@ * https://github.com/mfuu/sortable-dnd#readme
       this.el = null;
-      this.distance = {
+      this.initPos = this.distance = {
         x: 0,
@@ -645,3 +645,3 @@ y: 0
         setTransition(this.el, smooth ? "".concat(this.options.ghostAnimation, "ms") : 'none');
-        setTransform(this.el, "translate3d(".concat(x, "px, ").concat(y, "px, 0)"));
+        setTransform(this.el, "translate3d(".concat(x - this.initPos.x, "px, ").concat(y - this.initPos.y, "px, 0)"));
       }
@@ -842,7 +842,4 @@ }, {
       ghostEl,
+      fromGroup,
       activeGroup,
-      move = {
-    x: 0,
-    y: 0
-  },
       state = new State(),
@@ -873,4 +870,2 @@ // Status record during drag and drop
   var _nearestSortable = function _nearestSortable(evt) {
-    _checkPosition(evt);
-
     if (dragEl) {
@@ -930,3 +925,3 @@ evt = evt.touches ? evt.touches[0] : evt;
 
-  var _checkPosition = function _checkPosition(evt) {
+  var _positionChanged = function _positionChanged(evt) {
     var clientX = evt.clientX,
@@ -939,5 +934,7 @@ clientY = evt.clientY;
 
-    if (clientX !== void 0 && Math.abs(distanceX) < 1 && clientY !== void 0 && Math.abs(distanceY) < 1) {
-      return;
+    if (clientX !== void 0 && Math.abs(distanceX) <= 0 && clientY !== void 0 && Math.abs(distanceY) <= 0) {
+      return false;
     }
+
+    return true;
   };
@@ -1040,7 +1037,2 @@ /**
 
-    if (this.nativeDraggable) {
-      on(el, 'dragover', this);
-      on(el, 'dragenter', this);
-    }
-
     sortables.push(el);
@@ -1063,7 +1055,2 @@ Object.assign(this, Animation(), AutoScroll());
 
-      if (this.nativeDraggable) {
-        off(this.el, 'dragover', this);
-        off(this.el, 'dragenter', this);
-      }
-
       this._clearState(); // Remove draggable attributes
@@ -1096,3 +1083,3 @@
 
-      if (/mousedown|pointerdown/.test(evt.type) && evt.button !== 0 || this.options.disabled || this.options.group.pull === false) return; // only left button and enabled
+      if (/mousedown|pointerdown/.test(evt.type) && evt.button !== 0 || this.options.disabled || this.options.group.pull === false) return true; // only left button and enabled
 
@@ -1105,3 +1092,3 @@ var _getEvent = getEvent(evt),
 
-      if (!this.nativeDraggable && Safari && target && target.tagName.toUpperCase() === 'SELECT') return;
+      if (!this.nativeDraggable && Safari && target && target.tagName.toUpperCase() === 'SELECT') return true;
       if (target === this.el) return true;
@@ -1129,3 +1116,4 @@ if (this.options.stopPropagation) evt.stopPropagation && evt.stopPropagation(); // prevent events from bubbling
 
-      if (touch) dragEl.style['touch-action'] = 'none'; // get the position of the dragged element in the list
+      if (touch) dragEl.style['touch-action'] = 'none';
+      fromGroup = this.el; // get the position of the dragged element in the list
 
@@ -1136,6 +1124,2 @@ var _getElement = getElement(this.el, dragEl),
 
-      move = {
-        x: e.clientX,
-        y: e.clientY
-      };
       differ.from = {
@@ -1152,2 +1136,6 @@ sortable: this,
       };
+      this.ghost.initPos = {
+        x: e.clientX,
+        y: e.clientY
+      };
       state.sortableDown = e; // sortable state down is active
@@ -1157,3 +1145,4 @@
       on(this.ownerDocument, 'mousemove', _nearestSortable);
-      on(this.ownerDocument, 'touchmove', _nearestSortable); // Solve the problem that `dragend` does not take effect when the `dragover` event is not triggered
+      on(this.ownerDocument, 'touchmove', _nearestSortable);
+      on(this.ownerDocument, 'pointermove', _nearestSortable); // Solve the problem that `dragend` does not take effect when the `dragover` event is not triggered
 
@@ -1198,3 +1187,3 @@ on(this.ownerDocument, 'pointerup', this._onDrop);
         on(dragEl, 'dragend', this);
-        on(this.el, 'dragstart', this._onDragStart);
+        on(rootEl, 'dragstart', this._onDragStart);
       } // clear selection
@@ -1232,3 +1221,3 @@
       if (evt.dataTransfer) {
-        evt.dataTransfer.setData('draggableEffect', evt.target.innerText);
+        evt.dataTransfer.setData('DRAGGABLE_EFFECT', evt.target.innerText);
         evt.dataTransfer.effectAllowed = 'move';
@@ -1241,20 +1230,21 @@ }
     _onDragOver: function _onDragOver(evt) {
-      if (evt.dataTransfer) evt.dataTransfer.dropEffect = 'move';
       if (!state.sortableDown || !dragEl) return;
 
-      this._preventEvent(evt);
+      this._preventEvent(evt); // truly started
 
-      _checkPosition(evt); // truly started
 
+      this._onStarted(evt, evt);
 
-      this._onStarted(evt, evt); // onMove callback
+      if (!evt.rootEl) return;
 
+      if (_positionChanged(evt)) {
+        // onMove callback
+        this._dispatchEvent('onMove', _objectSpread2(_objectSpread2({}, differ), {}, {
+          ghostEl: ghostEl,
+          event: evt,
+          originalEvent: evt
+        }));
 
-      this._dispatchEvent('onMove', _objectSpread2(_objectSpread2({}, differ), {}, {
-        ghostEl: ghostEl,
-        event: evt,
-        originalEvent: evt
-      }));
-
-      if (this.options.group.put || differ.from.group === rootEl) this._onChange(evt.target, evt, evt);
+        if (this.options.group.put || fromGroup === this.el) this._onChange(evt.target, evt, evt);
+      }
     },
@@ -1290,2 +1280,3 @@ // -------------------------------- real started ----------------------------------
 
+        if (evt.dataTransfer) evt.dataTransfer.dropEffect = 'move';
         if (Safari) css(document.body, 'user-select', 'none');
@@ -1302,21 +1293,12 @@ }
 
-      var _getEvent2 = getEvent(evt);
-          _getEvent2.touch;
-          var e = _getEvent2.e,
+      this._preventEvent(evt);
+
+      var _getEvent2 = getEvent(evt),
+          e = _getEvent2.e,
           target = _getEvent2.target;
 
-      var clientX = e.clientX,
-          clientY = e.clientY;
-      var distanceX = clientX - move.x;
-      var distanceY = clientY - move.y;
-
-      if (clientX !== void 0 && Math.abs(distanceX) <= 0 && clientY !== void 0 && Math.abs(distanceY) <= 0) {
-        return;
-      }
-
-      this._preventEvent(evt);
-
       this._onStarted(e, evt);
 
-      this.ghost.move(distanceX, distanceY); // onMove callback
+      this.ghost.move(e.clientX, e.clientY);
+      if (!evt.rootEl) return; // onMove callback
 
@@ -1330,3 +1312,3 @@ this._dispatchEvent('onMove', _objectSpread2(_objectSpread2({}, differ), {}, {
 
-      if (this.options.group.put || differ.from.group === rootEl) this._onChange(target, e, evt); // auto scroll
+      if (this.options.group.put || fromGroup === this.el) this._onChange(target, e, evt); // auto scroll
 
@@ -1343,3 +1325,3 @@ clearTimeout(this.autoScrollTimer);
     _onChange: debounce(function (target, e, evt) {
-      var fromSortable = differ.from.sortable;
+      if (!dragEl) return;
 
@@ -1355,3 +1337,3 @@ if (!lastChild(this.el)) {
 
-        fromSortable._dispatchEvent('onRemove', _objectSpread2(_objectSpread2({}, differ), {}, {
+        differ.from.sortable._dispatchEvent('onRemove', _objectSpread2(_objectSpread2({}, differ), {}, {
           event: e,
@@ -1368,2 +1350,4 @@ originalEvent: evt
         this.el.appendChild(dragEl);
+        differ.from.sortable = this;
+        differ.from.group = this.el;
       } else {
@@ -1375,4 +1359,3 @@ var _getElement2 = getElement(rootEl, target),
 
-        if (!el || !dragEl || el && el.animated) return;
-        if (el === dragEl) return;
+        if (!el || el && el.animated || el === dragEl) return;
         dropEl = el;
@@ -1398,3 +1381,3 @@ differ.to = {
             // onRemove callback
-            fromSortable._dispatchEvent('onRemove', _objectSpread2(_objectSpread2({}, differ), {}, {
+            differ.from.sortable._dispatchEvent('onRemove', _objectSpread2(_objectSpread2({}, differ), {}, {
               event: e,
@@ -1410,3 +1393,5 @@ originalEvent: evt
 
-            this.el.insertBefore(dragEl, dropEl);
+            this.el.insertBefore(dragEl, el);
+            differ.from.sortable = this;
+            differ.from.group = this.el;
           } else {
@@ -1427,2 +1412,5 @@ // onChange callback
             }
+
+            differ.from.sortable = this;
+            differ.from.group = this.el;
           }
@@ -1493,4 +1481,4 @@
       differ.destroy();
-      dragEl = dropEl = ghostEl = activeGroup = null;
-      move = lastPosition = {
+      dragEl = dropEl = ghostEl = fromGroup = activeGroup = null;
+      lastPosition = {
         x: 0,
@@ -1512,2 +1500,3 @@ y: 0
       off(this.ownerDocument, 'mousemove', this._onMove);
+      off(this.ownerDocument, 'pointermove', _nearestSortable);
       off(this.ownerDocument, 'touchmove', _nearestSortable);
@@ -1514,0 +1503,0 @@ off(this.ownerDocument, 'mousemove', _nearestSortable);

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 e(e,t){var o,n=Object.keys(e);return Object.getOwnPropertySymbols&&(o=Object.getOwnPropertySymbols(e),t&&(o=o.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,o)),n}function u(n){for(var t=1;t<arguments.length;t++){var i=null!=arguments[t]?arguments[t]:{};t%2?e(Object(i),!0).forEach(function(t){var e,o;e=n,o=i[t=t],t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o}):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(i)):e(Object(i)).forEach(function(t){Object.defineProperty(n,t,Object.getOwnPropertyDescriptor(i,t))})}return n}function a(t){return(a="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){return e&&n(t.prototype,e),o&&n(t,o),Object.defineProperty(t,"prototype",{writable:!1}),t}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 l,c=t(/(?:Trident.*rv[ :]?11\.|msie|iemobile|Windows Phone)/i),W=t(/Edge/i),h=t(/safari/i)&&!t(/chrome/i)&&!t(/android/i),X=t(/iP(ad|od|hone)/i),Y=t(/chrome/i)&&t(/android/i),B={capture:!1,passive:!1},H=/\s+/g,f=["-webkit-transition","-moz-transition","-ms-transition","-o-transition","transition"],N=["-webkit-transform","-moz-transform","-ms-transform","-o-transform","transform"],R=(l=!1,document.addEventListener("checkIfSupportPassive",null,{get passive(){return l=!0}}),l);function d(e,o){o?"none"===o?f.forEach(function(t){return _(e,t,"none")}):f.forEach(function(t){return _(e,t,"".concat(t.split("transition")[0],"transform ").concat(o))}):f.forEach(function(t){return _(e,t,"")})}function p(e,o){o?N.forEach(function(t){return _(e,t,"".concat(t.split("transform")[0]).concat(o))}):N.forEach(function(t){return _(e,t,"")})}function g(t){var e=t.touches&&t.touches[0]||t.pointerType&&"touch"===t.pointerType&&t,t=e||t;return{touch:e,e:t,target:e?document.elementFromPoint(t.clientX,t.clientY):t.target}}function v(t,e,o){window.addEventListener?t.addEventListener(e,o,!(!R&&c)&&B):window.attachEvent&&t.attachEvent("on"+e,o)}function m(t,e,o){window.removeEventListener?t.removeEventListener(e,o,!(!R&&c)&&B):window.detachEvent&&t.detachEvent("on"+e,o)}function b(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 y(){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!==y()?(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 D(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:b(n[t])};for(var i=0;i<n.length;i++)if(F(e,n[i]))return o?n[i]:{index:i,el:n[i],rect:w(n[i]),offset:b(n[i])};return o?null:{index:-1,el:null,rect:{},offset:{}}}function F(t,e){var o;if(t&&e)for(o=t.parentNode;o;){if(e===o)return!0;o=o.parentNode}return!1}function E(t,e,o){var n;t&&e&&(t.classList?t.classList[o?"add":"remove"](e):(n=(" "+t.className+" ").replace(H," ").replace(" "+e+" "," "),t.className=(n+(o?" "+e:"")).replace(H," ")))}function q(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}}function _(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 z(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 V(o,n){var i=null;return function(){var t=this,e=arguments;i=i||setTimeout(function(){i=null,o.apply(t,e)},n)}}var S="Sortable"+Date.now(),U=i(function t(){o(this,t),this.sortableDown=void 0,this.sortableMove=void 0,this.animationEnd=void 0}),Z=function(){function t(){o(this,t),this.from={sortable:null,group:null,node:null,rect:{},offset:{}},this.to={sortable:null,group:null,node:null,rect:{},offset:{}}}return i(t,[{key:"destroy",value:function(){this.from={sortable:null,group:null,node:null,rect:{},offset:{}},this.to={sortable:null,group:null,node:null,rect:{},offset:{}}}}]),t}(),$=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 i(e,[{key:"init",value:function(t,e){var o=!(2<arguments.length&&void 0!==arguments[2])||arguments[2];this.el=t,o&&(o=(t=this.options).ghostClass,t=void 0===(t=t.ghostStyle)?{}:t,E(this.el,o,!0),_(this.el,"box-sizing","border-box"),_(this.el,"margin",0),_(this.el,"top",e.top),_(this.el,"left",e.left),_(this.el,"width",e.width),_(this.el,"height",e.height),_(this.el,"opacity","0.8"),_(this.el,"position","fixed"),_(this.el,"zIndex","100000"),_(this.el,"pointerEvents","none"),this.setStyle(t),d(this.el,"none"),p(this.el,"translate3d(0px, 0px, 0px)"),this.container.appendChild(this.el),_(this.el,"transform-origin",this.distance.x/parseInt(this.el.style.width)*100+"% "+this.distance.y/parseInt(this.el.style.height)*100+"%"),_(this.el,"transform","translateZ(0)"))}},{key:"setStyle",value:function(t){for(var e in t)_(this.el,e,t[e])}},{key:"rect",value:function(){return w(this.el)}},{key:"move",value:function(t,e){this.el&&(d(this.el,2<arguments.length&&void 0!==arguments[2]&&arguments[2]?"".concat(this.options.ghostAnimation,"ms"):"none"),p(this.el,"translate3d(".concat(t,"px, ").concat(e,"px, 0)")))}},{key:"clear",value:function(){this.distance={x:0,y:0},this.el&&this.el.remove(),this.el=null}},{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())}}]),e}();function G(){var i=[];return{_captureAnimationState:function(t,e){var o=r(Array.from(this.el.children)),e=(t=t,e=e,t=(n=o).indexOf(t),n=n.indexOf(e),t<n?{start:t,end:n}:{start:n,end:t}),n=e.start,t=e.end;i.length=0,o.slice(n,t+1).forEach(function(t){i.push({target:t,rect:w(t)})})},_rangeAnimate: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=w(t),i=e.left-n.left,e=e.top-n.top;d(t,"none"),p(t,"translate3d(".concat(i,"px, ").concat(e,"px, 0)")),t.offsetWidth,d(t,"".concat(o,"ms")),p(t,"translate3d(0px, 0px, 0px)"),clearTimeout(t.animated),t.animated=setTimeout(function(){d(t,""),p(t,""),t.animated=null},o)}}}function T(t){if(K(t),O){var e=t=t.touches?t.touches[0]:t,o=e.clientX,e=e.clientY,n=J(o,e);if(n){var i,r={};for(i in t)r[i]=t[i];r.target=document.elementFromPoint(o,e),r.rootEl=n,r.preventDefault=void 0,r.stopPropagation=void 0,n[S]._triggerEvent(r)}}}function J(i,r){var s;return tt.some(function(t){var e,o,n=t[S].options.emptyInsertThreshold;if(n)return o=w(t),e=i>=o.left-n&&i<=o.right+n,o=r>=o.top-n&&r<=o.bottom+n,e&&o?s=t:void 0}),s}function K(t){var e=t.clientX,t=t.clientY,o=e-L.x,n=t-L.y;L.x=e,L.y=t,void 0!==e&&Math.abs(o)<1&&void 0!==t&&Math.abs(n)}var x,O,P,A,M,Q="undefined"!=typeof document&&!Y&&!X&&"draggable"in document.createElement("div"),tt=[],C={x:0,y:0},j=new U,k=new Z,L={x:0,y:0};function I(t,e){if(!t||!t.nodeType||1!==t.nodeType)throw"Sortable: `el` must be an HTMLElement, not ".concat({}.toString.call(t));(t[S]=this).el=t,this.scrollEl=function(t,e){if(!t||!t.getBoundingClientRect)return y();var o=t,n=!1;do{if(o.clientWidth<o.scrollWidth||o.clientHeight<o.scrollHeight){var i=_(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 y();if(n||e)return o;n=!0}}}while(o=o.parentNode);return y()}(t,!0),this.options=e=Object.assign({},e),this.ownerDocument=t.ownerDocument;var o,n,i={group:"",animation:150,draggable:void 0,onDrag:void 0,onMove:void 0,onDrop:void 0,onChange:void 0,autoScroll:!0,scrollStep:5,scrollThreshold:15,delay:0,delayOnTouchOnly:!1,disabled:!1,ghostAnimation:0,ghostClass:"",ghostStyle:{},chosenClass:"",fallbackOnBody:!1,forceFallback:!1,stopPropagation:!1,supportPointer:"PointerEvent"in window&&!h,supportTouch:"ontouchstart"in window,emptyInsertThreshold:5};for(o in i)o in this.options||(this.options[o]=i[o]);for(n in this.container=this.options.fallbackOnBody?document.body:t,this.nativeDraggable=!this.options.forceFallback&&Q,this.ghost=new $(this),this.dragStartTimer=null,this.autoScrollTimer=null,s={},(r=(e=e).group)&&"object"==a(r)||(r={name:r}),s.name=r.name,s.pull=r.pull,s.put=r.put,e.group=s,this)"_"===n.charAt(0)&&"function"==typeof this[n]&&(this[n]=this[n].bind(this));var r=this.options,e=r.supportPointer,s=r.supportTouch;v(t,e?"pointerdown":s?"touchstart":"mousedown",this._onDrag),this.nativeDraggable&&(v(t,"dragover",this),v(t,"dragenter",this)),tt.push(t),Object.assign(this,G(),(window.requestAnimationFrame||(window.requestAnimationFrame=function(t){return setTimeout(t,17)}),{_autoScroll:V(function(t,e){var o,n,i,r,s,a,l,c,h,u,f,d,p,g,v;t.scrollEl&&e.sortableDown&&e.sortableMove&&(o=(n=e.sortableMove).clientX,n=n.clientY,void 0!==o&&void 0!==n&&t.scrollEl!==t.ownerDocument&&(i=(g=t.scrollEl).scrollTop,r=g.scrollLeft,s=g.scrollHeight,g=g.scrollWidth,a=(p=w(t.scrollEl)).top,f=p.right,l=p.bottom,d=p.left,c=p.height,p=p.width,h=(u=t.options).scrollStep,u=u.scrollThreshold,d=0<r&&d<=o&&o<=d+u,p=r+p<g&&o<=f&&f-u<=o,g=i+c<s&&n<=l&&l-u<=n,v={x:r,y:i},(f=0<i&&a<=n&&n<=a+u)?(v.x=d?r-h:p?r+h:r,v.y=i-h):g?(v.x=d?r-h:p?r+h:r,v.y=i+h):d?(v.x=r-h,v.y=i):p&&(v.x=r+h,v.y=i),(f||d||p||g)&&requestAnimationFrame(function(){t.scrollEl.scrollTo(v.x,v.y),t._autoScroll(t,e)})))},10)}))}return(I.prototype={constructor:I,destroy:function(){this.el[S]=null,m(this.el,"pointerdown",this._onDrag),m(this.el,"touchstart",this._onDrag),m(this.el,"mousedown",this._onDrag),this.nativeDraggable&&(m(this.el,"dragover",this),m(this.el,"dragenter",this)),this._clearState(),Array.prototype.forEach.call(this.el.querySelectorAll("[draggable]"),function(t){t.removeAttribute("draggable")})},set:function(t,e){this.options[t]=e},get:function(t){return this.options[t]},_onDrag:function(t){var e=this;if(!(/mousedown|pointerdown/.test(t.type)&&0!==t.button||this.options.disabled||!1===this.options.group.pull)){var o=g(t),n=o.touch,i=o.e,o=o.target;if(this.nativeDraggable||!h||!o||"SELECT"!==o.tagName.toUpperCase()){if(o===this.el)return!0;this.options.stopPropagation&&t.stopPropagation&&t.stopPropagation();t=this.options.draggable;if("function"==typeof t){var r=t(i);if(!r)return!0;!function(e){var t=document.createElement("div");try{return t.appendChild(e.cloneNode(!0)),1==e.nodeType}catch(t){return e==window||e==document}}(r)||(O=r)}else if("string"==typeof t){if(!q(o,t))return!0}else if(t)throw new Error('draggable expected "function" or "string" but received "'.concat(a(t),'"'));if(!(O=O||D(this.el,o,!0))||O.animated)return!0;n&&(O.style["touch-action"]="none");r=D(this.el,O),t=r.rect,o=r.offset,r=(C={x:i.clientX,y:i.clientY},k.from={sortable:this,group:this.el,node:O,rect:t,offset:o},this.ghost.distance={x:i.clientX-t.left,y:i.clientY-t.top},j.sortableDown=i,v(this.ownerDocument,"dragover",T),v(this.ownerDocument,"mousemove",T),v(this.ownerDocument,"touchmove",T),v(this.ownerDocument,"pointerup",this._onDrop),v(this.ownerDocument,"touchend",this._onDrop),v(this.ownerDocument,"mouseup",this._onDrop),this.options),o=r.delay,t=r.delayOnTouchOnly;!o||t&&!n||this.nativeDraggable&&(W||c)?this._onStart(i,n):(clearTimeout(this.dragStartTimer),this.dragStartTimer=setTimeout(function(){return e._onStart(i,n)},o))}}},_onStart:function(t,e){x=this.el,M=this.options.group,!this.nativeDraggable||e?(this.options.supportPointer?v(this.ownerDocument,"pointermove",this._onMove):v(this.ownerDocument,e?"touchmove":"mousemove",this._onMove),v(this.ownerDocument,"pointercancel",this._onDrop),v(this.ownerDocument,"touchcancel",this._onDrop)):(O.draggable=!0,v(O,"dragend",this),v(this.el,"dragstart",this._onDragStart));try{document.selection?setTimeout(function(){document.selection.empty()},0):window.getSelection().removeAllRanges()}catch(t){}},_triggerEvent:function(t){M.name===this.options.group.name&&(x=t.rootEl,this.nativeDraggable?(v(this.el,"dragend",this._onDrop),this._onDragOver(t)):this._onMove(t))},_onDragStart:function(t){t.dataTransfer&&(t.dataTransfer.setData("draggableEffect",t.target.innerText),t.dataTransfer.effectAllowed="move"),v(this.el,"dragover",this._onDragOver),v(this.el,"dragend",this._onDrop)},_onDragOver:function(t){t.dataTransfer&&(t.dataTransfer.dropEffect="move"),j.sortableDown&&O&&(this._preventEvent(t),K(t),this._onStarted(t,t),this._dispatchEvent("onMove",u(u({},k),{},{ghostEl:A,event:t,originalEvent:t})),!this.options.group.put&&k.from.group!==x||this._onChange(t.target,t,t))},_onStarted:function(t,e){j.sortableMove=t,A||(this._dispatchEvent("onDrag",{dragEl:O,event:t,originalEvent:e}),t=k.from.rect,A=O.cloneNode(!0),this.ghost.init(A,t,!this.nativeDraggable),I.ghost=A,E(O,this.options.chosenClass,!0),O.style["will-change"]="transform",this.nativeDraggable&&(this._unbindDropEvents(),v(document,"drop",this)),h&&_(document.body,"user-select","none"))},_onMove:function(t){var e,o,n,i,r,s,a=this;j.sortableDown&&O&&((o=g(t)).touch,e=o.e,o=o.target,n=e.clientX,i=e.clientY,r=n-C.x,s=i-C.y,void 0!==n&&Math.abs(r)<=0&&void 0!==i&&Math.abs(s)<=0||(this._preventEvent(t),this._onStarted(e,t),this.ghost.move(r,s),this._dispatchEvent("onMove",u(u({},k),{},{ghostEl:A,event:e,originalEvent:t})),!this.options.group.put&&k.from.group!==x||this._onChange(o,e,t),clearTimeout(this.autoScrollTimer),this.options.autoScroll&&(this.autoScrollTimer=setTimeout(function(){return a._autoScroll(a,j)},0))))},_onChange:z(function(t,e,o){var n,i,r,s,a,l,c,h=k.from.sortable;!function(t,e){for(var o=t.lastElementChild;o&&(o===I.ghost||"none"===_(o,"display")||e&&!q(o,e));)o=o.previousElementSibling;return o}(this.el)?(k.to={sortable:this,group:this.el,node:O,rect:w(O),offset:b(O)},h._dispatchEvent("onRemove",u(u({},k),{},{event:e,originalEvent:o})),this._dispatchEvent("onAdd",u(u({},k),{},{event:e,originalEvent:o})),this.el.appendChild(O)):(n=(t=D(x,t)).el,l=t.rect,t=t.offset,!n||!O||n&&n.animated||n!==O&&(P=n,k.to={sortable:this,group:this.el,node:P,rect:l,offset:t},i=e.clientX,r=e.clientY,c=l.left,s=l.right,a=l.top,l=l.bottom,c<i&&i<s&&a<r&&r<l&&(this._captureAnimationState(O,P),!1===F(O,x)?(h._dispatchEvent("onRemove",u(u({},k),{},{event:e,originalEvent:o})),this._dispatchEvent("onAdd",u(u({},k),{},{event:e,originalEvent:o})),this.el.insertBefore(O,P)):(this._dispatchEvent("onChange",u(u({},k),{},{event:e,originalEvent:o})),(c=b(O)).top<t.top||c.left<t.left?this.el.insertBefore(O,n.nextElementSibling):this.el.insertBefore(O,n)),this._rangeAnimate())))},5),_onDrop:function(t){var e,o;this._unbindDragEvents(),this._unbindMoveEvents(),this._unbindDropEvents(),this._preventEvent(t),this.dragStartTimer&&clearTimeout(this.dragStartTimer),O&&(this.nativeDraggable&&m(O,"dragend",this),e=g(t).touch,E(O,this.options.chosenClass,!1),this.nativeDraggable&&(O.draggable=!1),e&&(O.style["touch-action"]=""),O.style["will-change"]="",j.sortableDown&&j.sortableMove&&(k.to.offset=b(O),k.to.rect=w(O),e=k.from.offset,o=k.to.offset,e=e.top!==o.top||e.left!==o.left,this._dispatchEvent("onDrop",{changed:e,event:t,originalEvent:t}))),h&&_(document.body,"user-select",""),this.ghost.destroy(k.to.rect),this._clearState()},_preventEvent:function(t){this.options.stopPropagation&&t.stopPropagation&&t.stopPropagation(),void 0!==t.preventDefault&&t.cancelable&&t.preventDefault()},_dispatchEvent:function(t,e){t=this.options[t];"function"==typeof t&&t(e)},_clearState:function(){j=new U,k.destroy(),O=P=A=M=null,C=L={x:0,y:0}},_unbindDragEvents:function(){this.nativeDraggable&&(m(this.el,"dragstart",this._onDragStart),m(this.el,"dragover",this._onDragOver),m(this.el,"dragend",this._onDrop),m(document,"drop",this))},_unbindMoveEvents:function(){m(this.ownerDocument,"pointermove",this._onMove),m(this.ownerDocument,"touchmove",this._onMove),m(this.ownerDocument,"mousemove",this._onMove),m(this.ownerDocument,"touchmove",T),m(this.ownerDocument,"mousemove",T),m(this.ownerDocument,"dragover",T)},_unbindDropEvents:function(){m(this.ownerDocument,"pointerup",this._onDrop),m(this.ownerDocument,"pointercancel",this._onDrop),m(this.ownerDocument,"touchend",this._onDrop),m(this.ownerDocument,"touchcancel",this._onDrop),m(this.ownerDocument,"mouseup",this._onDrop)}}).utils={getRect:w,getOffset:b,debounce:z,throttle:V},I});
+!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 e(e,t){var o,n=Object.keys(e);return Object.getOwnPropertySymbols&&(o=Object.getOwnPropertySymbols(e),t&&(o=o.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,o)),n}function h(n){for(var t=1;t<arguments.length;t++){var i=null!=arguments[t]?arguments[t]:{};t%2?e(Object(i),!0).forEach(function(t){var e,o;e=n,o=i[t=t],t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o}):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(i)):e(Object(i)).forEach(function(t){Object.defineProperty(n,t,Object.getOwnPropertyDescriptor(i,t))})}return n}function a(t){return(a="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){return e&&n(t.prototype,e),o&&n(t,o),Object.defineProperty(t,"prototype",{writable:!1}),t}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 l,c=t(/(?:Trident.*rv[ :]?11\.|msie|iemobile|Windows Phone)/i),B=t(/Edge/i),u=t(/safari/i)&&!t(/chrome/i)&&!t(/android/i),W=t(/iP(ad|od|hone)/i),X=t(/chrome/i)&&t(/android/i),Y={capture:!1,passive:!1},F=/\s+/g,f=["-webkit-transition","-moz-transition","-ms-transition","-o-transition","transition"],H=["-webkit-transform","-moz-transform","-ms-transform","-o-transform","transform"],N=(l=!1,document.addEventListener("checkIfSupportPassive",null,{get passive(){return l=!0}}),l);function d(e,o){o?"none"===o?f.forEach(function(t){return _(e,t,"none")}):f.forEach(function(t){return _(e,t,"".concat(t.split("transition")[0],"transform ").concat(o))}):f.forEach(function(t){return _(e,t,"")})}function p(e,o){o?H.forEach(function(t){return _(e,t,"".concat(t.split("transform")[0]).concat(o))}):H.forEach(function(t){return _(e,t,"")})}function g(t){var e=t.touches&&t.touches[0]||t.pointerType&&"touch"===t.pointerType&&t,t=e||t;return{touch:e,e:t,target:e?document.elementFromPoint(t.clientX,t.clientY):t.target}}function m(t,e,o){window.addEventListener?t.addEventListener(e,o,!(!N&&c)&&Y):window.attachEvent&&t.attachEvent("on"+e,o)}function v(t,e,o){window.removeEventListener?t.removeEventListener(e,o,!(!N&&c)&&Y):window.detachEvent&&t.detachEvent("on"+e,o)}function b(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 y(){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!==y()?(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 D(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:b(n[t])};for(var i=0;i<n.length;i++)if(R(e,n[i]))return o?n[i]:{index:i,el:n[i],rect:w(n[i]),offset:b(n[i])};return o?null:{index:-1,el:null,rect:{},offset:{}}}function R(t,e){var o;if(t&&e)for(o=t.parentNode;o;){if(e===o)return!0;o=o.parentNode}return!1}function E(t,e,o){var n;t&&e&&(t.classList?t.classList[o?"add":"remove"](e):(n=(" "+t.className+" ").replace(F," ").replace(" "+e+" "," "),t.className=(n+(o?" "+e:"")).replace(F," ")))}function q(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}}function _(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 z(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 V(o,n){var i=null;return function(){var t=this,e=arguments;i=i||setTimeout(function(){i=null,o.apply(t,e)},n)}}var S="Sortable"+Date.now(),G=i(function t(){o(this,t),this.sortableDown=void 0,this.sortableMove=void 0,this.animationEnd=void 0}),U=function(){function t(){o(this,t),this.from={sortable:null,group:null,node:null,rect:{},offset:{}},this.to={sortable:null,group:null,node:null,rect:{},offset:{}}}return i(t,[{key:"destroy",value:function(){this.from={sortable:null,group:null,node:null,rect:{},offset:{}},this.to={sortable:null,group:null,node:null,rect:{},offset:{}}}}]),t}(),Z=function(){function e(t){o(this,e),this.el=null,this.initPos=this.distance={x:0,y:0},this.options=t.options,this.container=t.container}return i(e,[{key:"init",value:function(t,e){var o=!(2<arguments.length&&void 0!==arguments[2])||arguments[2];this.el=t,o&&(o=(t=this.options).ghostClass,t=void 0===(t=t.ghostStyle)?{}:t,E(this.el,o,!0),_(this.el,"box-sizing","border-box"),_(this.el,"margin",0),_(this.el,"top",e.top),_(this.el,"left",e.left),_(this.el,"width",e.width),_(this.el,"height",e.height),_(this.el,"opacity","0.8"),_(this.el,"position","fixed"),_(this.el,"zIndex","100000"),_(this.el,"pointerEvents","none"),this.setStyle(t),d(this.el,"none"),p(this.el,"translate3d(0px, 0px, 0px)"),this.container.appendChild(this.el),_(this.el,"transform-origin",this.distance.x/parseInt(this.el.style.width)*100+"% "+this.distance.y/parseInt(this.el.style.height)*100+"%"),_(this.el,"transform","translateZ(0)"))}},{key:"setStyle",value:function(t){for(var e in t)_(this.el,e,t[e])}},{key:"rect",value:function(){return w(this.el)}},{key:"move",value:function(t,e){this.el&&(d(this.el,2<arguments.length&&void 0!==arguments[2]&&arguments[2]?"".concat(this.options.ghostAnimation,"ms"):"none"),p(this.el,"translate3d(".concat(t-this.initPos.x,"px, ").concat(e-this.initPos.y,"px, 0)")))}},{key:"clear",value:function(){this.distance={x:0,y:0},this.el&&this.el.remove(),this.el=null}},{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())}}]),e}();function $(){var i=[];return{_captureAnimationState:function(t,e){var o=r(Array.from(this.el.children)),e=(t=t,e=e,t=(n=o).indexOf(t),n=n.indexOf(e),t<n?{start:t,end:n}:{start:n,end:t}),n=e.start,t=e.end;i.length=0,o.slice(n,t+1).forEach(function(t){i.push({target:t,rect:w(t)})})},_rangeAnimate: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=w(t),i=e.left-n.left,e=e.top-n.top;d(t,"none"),p(t,"translate3d(".concat(i,"px, ").concat(e,"px, 0)")),t.offsetWidth,d(t,"".concat(o,"ms")),p(t,"translate3d(0px, 0px, 0px)"),clearTimeout(t.animated),t.animated=setTimeout(function(){d(t,""),p(t,""),t.animated=null},o)}}}function T(t){if(O){var e=t=t.touches?t.touches[0]:t,o=e.clientX,e=e.clientY,n=J(o,e);if(n){var i,r={};for(i in t)r[i]=t[i];r.target=document.elementFromPoint(o,e),r.rootEl=n,r.preventDefault=void 0,r.stopPropagation=void 0,n[S]._triggerEvent(r)}}}function J(i,r){var s;return Q.some(function(t){var e,o,n=t[S].options.emptyInsertThreshold;if(n)return o=w(t),e=i>=o.left-n&&i<=o.right+n,o=r>=o.top-n&&r<=o.bottom+n,e&&o?s=t:void 0}),s}var x,O,P,A,C,M,K="undefined"!=typeof document&&!X&&!W&&"draggable"in document.createElement("div"),Q=[],j=new G,k=new U,L={x:0,y:0};function I(t,e){if(!t||!t.nodeType||1!==t.nodeType)throw"Sortable: `el` must be an HTMLElement, not ".concat({}.toString.call(t));(t[S]=this).el=t,this.scrollEl=function(t,e){if(!t||!t.getBoundingClientRect)return y();var o=t,n=!1;do{if(o.clientWidth<o.scrollWidth||o.clientHeight<o.scrollHeight){var i=_(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 y();if(n||e)return o;n=!0}}}while(o=o.parentNode);return y()}(t,!0),this.options=e=Object.assign({},e),this.ownerDocument=t.ownerDocument;var o,n,i={group:"",animation:150,draggable:void 0,onDrag:void 0,onMove:void 0,onDrop:void 0,onChange:void 0,autoScroll:!0,scrollStep:5,scrollThreshold:15,delay:0,delayOnTouchOnly:!1,disabled:!1,ghostAnimation:0,ghostClass:"",ghostStyle:{},chosenClass:"",fallbackOnBody:!1,forceFallback:!1,stopPropagation:!1,supportPointer:"PointerEvent"in window&&!u,supportTouch:"ontouchstart"in window,emptyInsertThreshold:5};for(o in i)o in this.options||(this.options[o]=i[o]);for(n in this.container=this.options.fallbackOnBody?document.body:t,this.nativeDraggable=!this.options.forceFallback&&K,this.ghost=new Z(this),this.dragStartTimer=null,this.autoScrollTimer=null,s={},(r=(e=e).group)&&"object"==a(r)||(r={name:r}),s.name=r.name,s.pull=r.pull,s.put=r.put,e.group=s,this)"_"===n.charAt(0)&&"function"==typeof this[n]&&(this[n]=this[n].bind(this));var r=this.options,e=r.supportPointer,s=r.supportTouch;m(t,e?"pointerdown":s?"touchstart":"mousedown",this._onDrag),Q.push(t),Object.assign(this,$(),(window.requestAnimationFrame||(window.requestAnimationFrame=function(t){return setTimeout(t,17)}),{_autoScroll:V(function(t,e){var o,n,i,r,s,a,l,c,h,u,f,d,p,g,m;t.scrollEl&&e.sortableDown&&e.sortableMove&&(o=(n=e.sortableMove).clientX,n=n.clientY,void 0!==o&&void 0!==n&&t.scrollEl!==t.ownerDocument&&(i=(g=t.scrollEl).scrollTop,r=g.scrollLeft,s=g.scrollHeight,g=g.scrollWidth,a=(p=w(t.scrollEl)).top,f=p.right,l=p.bottom,d=p.left,c=p.height,p=p.width,h=(u=t.options).scrollStep,u=u.scrollThreshold,d=0<r&&d<=o&&o<=d+u,p=r+p<g&&o<=f&&f-u<=o,g=i+c<s&&n<=l&&l-u<=n,m={x:r,y:i},(f=0<i&&a<=n&&n<=a+u)?(m.x=d?r-h:p?r+h:r,m.y=i-h):g?(m.x=d?r-h:p?r+h:r,m.y=i+h):d?(m.x=r-h,m.y=i):p&&(m.x=r+h,m.y=i),(f||d||p||g)&&requestAnimationFrame(function(){t.scrollEl.scrollTo(m.x,m.y),t._autoScroll(t,e)})))},10)}))}return(I.prototype={constructor:I,destroy:function(){this.el[S]=null,v(this.el,"pointerdown",this._onDrag),v(this.el,"touchstart",this._onDrag),v(this.el,"mousedown",this._onDrag),this._clearState(),Array.prototype.forEach.call(this.el.querySelectorAll("[draggable]"),function(t){t.removeAttribute("draggable")})},set:function(t,e){this.options[t]=e},get:function(t){return this.options[t]},_onDrag:function(t){var e=this;if(/mousedown|pointerdown/.test(t.type)&&0!==t.button||this.options.disabled||!1===this.options.group.pull)return!0;var o=g(t),n=o.touch,i=o.e,o=o.target;if(!this.nativeDraggable&&u&&o&&"SELECT"===o.tagName.toUpperCase())return!0;if(o===this.el)return!0;this.options.stopPropagation&&t.stopPropagation&&t.stopPropagation();t=this.options.draggable;if("function"==typeof t){var r=t(i);if(!r)return!0;!function(e){var t=document.createElement("div");try{return t.appendChild(e.cloneNode(!0)),1==e.nodeType}catch(t){return e==window||e==document}}(r)||(O=r)}else if("string"==typeof t){if(!q(o,t))return!0}else if(t)throw new Error('draggable expected "function" or "string" but received "'.concat(a(t),'"'));if(!(O=O||D(this.el,o,!0))||O.animated)return!0;n&&(O.style["touch-action"]="none"),C=this.el;r=D(this.el,O),t=r.rect,o=r.offset,k.from={sortable:this,group:this.el,node:O,rect:t,offset:o},this.ghost.distance={x:i.clientX-t.left,y:i.clientY-t.top},this.ghost.initPos={x:i.clientX,y:i.clientY},j.sortableDown=i,m(this.ownerDocument,"dragover",T),m(this.ownerDocument,"mousemove",T),m(this.ownerDocument,"touchmove",T),m(this.ownerDocument,"pointermove",T),m(this.ownerDocument,"pointerup",this._onDrop),m(this.ownerDocument,"touchend",this._onDrop),m(this.ownerDocument,"mouseup",this._onDrop),r=this.options,o=r.delay,t=r.delayOnTouchOnly;!o||t&&!n||this.nativeDraggable&&(B||c)?this._onStart(i,n):(clearTimeout(this.dragStartTimer),this.dragStartTimer=setTimeout(function(){return e._onStart(i,n)},o))},_onStart:function(t,e){x=this.el,M=this.options.group,!this.nativeDraggable||e?(this.options.supportPointer?m(this.ownerDocument,"pointermove",this._onMove):m(this.ownerDocument,e?"touchmove":"mousemove",this._onMove),m(this.ownerDocument,"pointercancel",this._onDrop),m(this.ownerDocument,"touchcancel",this._onDrop)):(O.draggable=!0,m(O,"dragend",this),m(x,"dragstart",this._onDragStart));try{document.selection?setTimeout(function(){document.selection.empty()},0):window.getSelection().removeAllRanges()}catch(t){}},_triggerEvent:function(t){M.name===this.options.group.name&&(x=t.rootEl,this.nativeDraggable?(m(this.el,"dragend",this._onDrop),this._onDragOver(t)):this._onMove(t))},_onDragStart:function(t){t.dataTransfer&&(t.dataTransfer.setData("DRAGGABLE_EFFECT",t.target.innerText),t.dataTransfer.effectAllowed="move"),m(this.el,"dragover",this._onDragOver),m(this.el,"dragend",this._onDrop)},_onDragOver:function(t){var e,o,n,i;j.sortableDown&&O&&(this._preventEvent(t),this._onStarted(t,t),t.rootEl&&(o=(e=t).clientX,e=e.clientY,n=o-L.x,i=e-L.y,L.x=o,L.y=e,void 0!==o&&Math.abs(n)<=0&&void 0!==e&&Math.abs(i)<=0||(this._dispatchEvent("onMove",h(h({},k),{},{ghostEl:A,event:t,originalEvent:t})),!this.options.group.put&&C!==this.el||this._onChange(t.target,t,t))))},_onStarted:function(t,e){j.sortableMove=t,A||(this._dispatchEvent("onDrag",{dragEl:O,event:t,originalEvent:e}),t=k.from.rect,A=O.cloneNode(!0),this.ghost.init(A,t,!this.nativeDraggable),I.ghost=A,E(O,this.options.chosenClass,!0),O.style["will-change"]="transform",this.nativeDraggable&&(this._unbindDropEvents(),m(document,"drop",this)),e.dataTransfer&&(e.dataTransfer.dropEffect="move"),u&&_(document.body,"user-select","none"))},_onMove:function(t){var e,o,n=this;j.sortableDown&&O&&(this._preventEvent(t),e=(o=g(t)).e,o=o.target,this._onStarted(e,t),this.ghost.move(e.clientX,e.clientY),t.rootEl&&(this._dispatchEvent("onMove",h(h({},k),{},{ghostEl:A,event:e,originalEvent:t})),!this.options.group.put&&C!==this.el||this._onChange(o,e,t),clearTimeout(this.autoScrollTimer),this.options.autoScroll&&(this.autoScrollTimer=setTimeout(function(){return n._autoScroll(n,j)},0))))},_onChange:z(function(t,e,o){var n,i,r,s,a,l,c;O&&(!function(t,e){for(var o=t.lastElementChild;o&&(o===I.ghost||"none"===_(o,"display")||e&&!q(o,e));)o=o.previousElementSibling;return o}(this.el)?(k.to={sortable:this,group:this.el,node:O,rect:w(O),offset:b(O)},k.from.sortable._dispatchEvent("onRemove",h(h({},k),{},{event:e,originalEvent:o})),this._dispatchEvent("onAdd",h(h({},k),{},{event:e,originalEvent:o})),this.el.appendChild(O),k.from.sortable=this,k.from.group=this.el):(n=(t=D(x,t)).el,l=t.rect,t=t.offset,n&&!n.animated&&n!==O&&(P=n,k.to={sortable:this,group:this.el,node:P,rect:l,offset:t},i=e.clientX,r=e.clientY,c=l.left,s=l.right,a=l.top,l=l.bottom,c<i&&i<s&&a<r&&r<l&&(this._captureAnimationState(O,P),!1===R(O,x)?(k.from.sortable._dispatchEvent("onRemove",h(h({},k),{},{event:e,originalEvent:o})),this._dispatchEvent("onAdd",h(h({},k),{},{event:e,originalEvent:o})),this.el.insertBefore(O,n)):(this._dispatchEvent("onChange",h(h({},k),{},{event:e,originalEvent:o})),(c=b(O)).top<t.top||c.left<t.left?this.el.insertBefore(O,n.nextElementSibling):this.el.insertBefore(O,n)),k.from.sortable=this,k.from.group=this.el,this._rangeAnimate()))))},5),_onDrop:function(t){var e,o;this._unbindDragEvents(),this._unbindMoveEvents(),this._unbindDropEvents(),this._preventEvent(t),this.dragStartTimer&&clearTimeout(this.dragStartTimer),O&&(this.nativeDraggable&&v(O,"dragend",this),e=g(t).touch,E(O,this.options.chosenClass,!1),this.nativeDraggable&&(O.draggable=!1),e&&(O.style["touch-action"]=""),O.style["will-change"]="",j.sortableDown&&j.sortableMove&&(k.to.offset=b(O),k.to.rect=w(O),e=k.from.offset,o=k.to.offset,e=e.top!==o.top||e.left!==o.left,this._dispatchEvent("onDrop",{changed:e,event:t,originalEvent:t}))),u&&_(document.body,"user-select",""),this.ghost.destroy(k.to.rect),this._clearState()},_preventEvent:function(t){this.options.stopPropagation&&t.stopPropagation&&t.stopPropagation(),void 0!==t.preventDefault&&t.cancelable&&t.preventDefault()},_dispatchEvent:function(t,e){t=this.options[t];"function"==typeof t&&t(e)},_clearState:function(){j=new G,k.destroy(),O=P=A=C=M=null,L={x:0,y:0}},_unbindDragEvents:function(){this.nativeDraggable&&(v(this.el,"dragstart",this._onDragStart),v(this.el,"dragover",this._onDragOver),v(this.el,"dragend",this._onDrop),v(document,"drop",this))},_unbindMoveEvents:function(){v(this.ownerDocument,"pointermove",this._onMove),v(this.ownerDocument,"touchmove",this._onMove),v(this.ownerDocument,"mousemove",this._onMove),v(this.ownerDocument,"pointermove",T),v(this.ownerDocument,"touchmove",T),v(this.ownerDocument,"mousemove",T),v(this.ownerDocument,"dragover",T)},_unbindDropEvents:function(){v(this.ownerDocument,"pointerup",this._onDrop),v(this.ownerDocument,"pointercancel",this._onDrop),v(this.ownerDocument,"touchend",this._onDrop),v(this.ownerDocument,"touchcancel",this._onDrop),v(this.ownerDocument,"mouseup",this._onDrop)}}).utils={getRect:w,getOffset:b,debounce:z,throttle:V},I});

package.json

 {
   "name": "sortable-dnd",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "JS library for drag-and-drop lists, supports sortable and draggable",
@@ -5,0 +5,0 @@ "main": "dist/sortable.min.js",

src/Plugins.js

@@ -34,3 +34,3 @@ import { css, getRect, toggleClass, setTransition, setTransform } from './utils.js'
     this.el = null
-    this.distance = { x: 0, y: 0 }
+    this.initPos = this.distance = { x: 0, y: 0 }
     this.options = sortable.options
@@ -83,3 +83,3 @@ this.container = sortable.container
     setTransition(this.el, smooth ? `${this.options.ghostAnimation}ms` : 'none')
-    setTransform(this.el, `translate3d(${x}px, ${y}px, 0)`)
+    setTransform(this.el, `translate3d(${x - this.initPos.x}px, ${y - this.initPos.y}px, 0)`)
   }
@@ -95,5 +95,7 @@
     if (!this.el) return
+
     const left = parseInt(this.el.style.left)
     const top = parseInt(this.el.style.top)
     this.move(rect.left - left, rect.top - top, true)
+
     const { ghostAnimation } = this.options
@@ -100,0 +102,0 @@ ghostAnimation ? setTimeout(() => this.clear(), ghostAnimation) : this.clear()

src/Sortable.js

@@ -36,4 +36,4 @@ import {
     ghostEl,
+    fromGroup,
     activeGroup,
-    move = { x: 0, y: 0 },
     state = new State, // Status record during drag and drop
@@ -61,3 +61,2 @@ differ = new Differ() // Record the difference before and after dragging
 const _nearestSortable = function(evt) {
-  _checkPosition(evt)
   if (dragEl) {
@@ -107,3 +106,3 @@ evt = evt.touches ? evt.touches[0] : evt
 let lastPosition = { x: 0, y: 0 }
-const _checkPosition = function(evt) {
+const _positionChanged = function(evt) {
   const { clientX, clientY } = evt
@@ -116,5 +115,7 @@ const distanceX = clientX - lastPosition.x
 
-  if ((clientX !== void 0 && Math.abs(distanceX) < 1) && (clientY !== void 0 && Math.abs(distanceY) < 1)) {
-    return
+  if ((clientX !== void 0 && Math.abs(distanceX) <= 0) && (clientY !== void 0 && Math.abs(distanceY) <= 0)) {
+    return false
   }
+
+  return true
 }
@@ -201,7 +202,2 @@
 
-  if (this.nativeDraggable) {
-    on(el, 'dragover', this)
-    on(el, 'dragenter', this)
-  }
-
   sortables.push(el)
@@ -226,7 +222,2 @@
 
-    if (this.nativeDraggable) {
-			off(this.el, 'dragover', this)
-			off(this.el, 'dragenter', this)
-		}
-
     this._clearState()
@@ -255,3 +246,3 @@ // Remove draggable attributes
   _onDrag: function(/** Event|TouchEvent */evt) {
-    if (/mousedown|pointerdown/.test(evt.type) && evt.button !== 0 || this.options.disabled || this.options.group.pull === false) return // only left button and enabled
+    if (/mousedown|pointerdown/.test(evt.type) && evt.button !== 0 || this.options.disabled || this.options.group.pull === false) return true // only left button and enabled
 
@@ -261,3 +252,3 @@ const { touch, e, target } = getEvent(evt)
     // Safari ignores further event handling after mousedown
-		if (!this.nativeDraggable && Safari && target && target.tagName.toUpperCase() === 'SELECT') return
+		if (!this.nativeDraggable && Safari && target && target.tagName.toUpperCase() === 'SELECT') return true
     if (target === this.el) return true
@@ -289,7 +280,10 @@
     
+    fromGroup = this.el
     // get the position of the dragged element in the list
     const { rect, offset } = getElement(this.el, dragEl)
-    move = { x: e.clientX, y: e.clientY }
     differ.from = { sortable: this, group: this.el, node: dragEl, rect, offset}
+
     this.ghost.distance = { x: e.clientX - rect.left, y: e.clientY - rect.top }
+    this.ghost.initPos = { x: e.clientX, y: e.clientY }
+
     state.sortableDown = e // sortable state down is active
@@ -300,2 +294,3 @@
     on(this.ownerDocument, 'touchmove', _nearestSortable)
+    on(this.ownerDocument, 'pointermove', _nearestSortable)
     // Solve the problem that `dragend` does not take effect when the `dragover` event is not triggered
@@ -337,3 +332,3 @@ on(this.ownerDocument, 'pointerup', this._onDrop)
       on(dragEl, 'dragend', this)
-      on(this.el, 'dragstart', this._onDragStart)
+      on(rootEl, 'dragstart', this._onDragStart)
     }
@@ -372,3 +367,3 @@
     if (evt.dataTransfer) {
-      evt.dataTransfer.setData('draggableEffect', evt.target.innerText)
+      evt.dataTransfer.setData('DRAGGABLE_EFFECT', evt.target.innerText)
       evt.dataTransfer.effectAllowed = 'move'
@@ -382,6 +377,4 @@ }
   _onDragOver: function(evt) {
-    if (evt.dataTransfer) evt.dataTransfer.dropEffect = 'move'
     if (!state.sortableDown || !dragEl) return
     this._preventEvent(evt)
-    _checkPosition(evt)
 
@@ -391,6 +384,10 @@ // truly started
 
-    // onMove callback
-    this._dispatchEvent('onMove', { ...differ, ghostEl, event: evt, originalEvent: evt })
+    if (!evt.rootEl) return
 
-    if (this.options.group.put || differ.from.group === rootEl) this._onChange(evt.target, evt, evt)
+    if (_positionChanged(evt)) {
+      // onMove callback
+      this._dispatchEvent('onMove', { ...differ, ghostEl, event: evt, originalEvent: evt })
+
+      if (this.options.group.put || fromGroup === this.el) this._onChange(evt.target, evt, evt)
+    }
   },
@@ -420,2 +417,3 @@
 
+      if (evt.dataTransfer) evt.dataTransfer.dropEffect = 'move'
       if (Safari) css(document.body, 'user-select', 'none')
@@ -429,16 +427,11 @@ }
 
-    const { touch, e, target } = getEvent(evt)
-    const { clientX, clientY } = e
-    const distanceX = clientX - move.x
-    const distanceY = clientY - move.y
+    this._preventEvent(evt)
 
-    if ((clientX !== void 0 && Math.abs(distanceX) <= 0) && (clientY !== void 0 && Math.abs(distanceY) <= 0)) {
-      return
-    }
+    const { e, target } = getEvent(evt)
 
-    this._preventEvent(evt)
-
     this._onStarted(e, evt)
-    this.ghost.move(distanceX, distanceY)
+    this.ghost.move(e.clientX, e.clientY)
 
+    if (!evt.rootEl) return
+
     // onMove callback
@@ -448,3 +441,3 @@ this._dispatchEvent('onMove', { ...differ, ghostEl, event: e, originalEvent: evt })
     // check if element will exchange
-    if (this.options.group.put || differ.from.group === rootEl) this._onChange(target, e, evt)
+    if (this.options.group.put || fromGroup === this.el) this._onChange(target, e, evt)
 
@@ -460,7 +453,7 @@ // auto scroll
   _onChange: debounce(function(target, e, evt) {
-    const fromSortable = differ.from.sortable
+    if (!dragEl) return
     if (!lastChild(this.el)) {
       differ.to = { sortable: this, group: this.el, node: dragEl, rect: getRect(dragEl), offset: getOffset(dragEl) }
       // onRemove callback
-      fromSortable._dispatchEvent('onRemove', { ...differ, event: e, originalEvent: evt })
+      differ.from.sortable._dispatchEvent('onRemove', { ...differ, event: e, originalEvent: evt })
       // onAdd callback
@@ -470,6 +463,8 @@ this._dispatchEvent('onAdd', { ...differ, event: e, originalEvent: evt })
       this.el.appendChild(dragEl)
+
+      differ.from.sortable = this
+      differ.from.group = this.el
     } else {
       const { el, rect, offset } = getElement(rootEl, target)
-      if (!el || !dragEl || (el && el.animated)) return
-      if (el === dragEl) return
+      if (!el || (el && el.animated) || el === dragEl) return
 
@@ -488,7 +483,10 @@ dropEl = el
           // onRemove callback
-          fromSortable._dispatchEvent('onRemove', { ...differ, event: e, originalEvent: evt })
+          differ.from.sortable._dispatchEvent('onRemove', { ...differ, event: e, originalEvent: evt })
           // onAdd callback
           this._dispatchEvent('onAdd', { ...differ, event: e, originalEvent: evt })
 
-          this.el.insertBefore(dragEl, dropEl)
+          this.el.insertBefore(dragEl, el)
+
+          differ.from.sortable = this
+          differ.from.group = this.el
         } else {
@@ -505,2 +503,5 @@ // onChange callback
           }
+
+          differ.from.sortable = this
+          differ.from.group = this.el
         }
@@ -567,4 +568,4 @@
     ghostEl = 
+    fromGroup = 
     activeGroup = null
-    move = 
     lastPosition = { x: 0, y: 0 }
@@ -587,2 +588,3 @@ },
     off(this.ownerDocument, 'mousemove', this._onMove)
+    off(this.ownerDocument, 'pointermove', _nearestSortable)
     off(this.ownerDocument, 'touchmove', _nearestSortable)
@@ -589,0 +591,0 @@ off(this.ownerDocument, 'mousemove', _nearestSortable)

New alerts

License Policy Violation

License

This 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

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

110415

decreased by-0.02%

Lines of code

2386

decreased by-0.42%

No dependency changes