sortable-dnd - npm Package Compare versions

Comparing version 0.2.6 to 0.2.7

dist/sortable.js

 /*!
- * sortable-dnd v0.2.6
+ * sortable-dnd v0.2.7
  * open source under the MIT license
@@ -132,2 +132,17 @@ * https://github.com/mfuu/sortable-dnd#readme
   /**
+   * get touch event and current event
+   * @param {Event} evt 
+   */
+
+  function getEvent(evt) {
+    var touch = evt.touches && evt.touches[0] || evt.pointerType && evt.pointerType === 'touch' && evt;
+    var e = touch || evt;
+    var target = touch ? document.elementFromPoint(e.clientX, e.clientY) : e.target;
+    return {
+      touch: touch,
+      e: e,
+      target: target
+    };
+  }
+  /**
    * detect passive event support
@@ -737,3 +752,3 @@ */
     return {
-      _bindDragEventListener: function _bindDragEventListener() {
+      _bindEventListener: function _bindEventListener() {
         this._onDrag = this._onDrag.bind(this);
@@ -754,3 +769,3 @@ this._onMove = this._onMove.bind(this);
       },
-      _unbindDragEventListener: function _unbindDragEventListener() {
+      _clearEvent: function _clearEvent() {
         off(this.rootEl, 'pointerdown', this._onDrag);
@@ -877,5 +892,5 @@ off(this.rootEl, 'touchstart', this._onDrag);
     this.autoScrollTimer = null;
-    Object.assign(this, Animation(), AutoScroll(), DNDEvent());
+    Object.assign(this, DNDEvent(), Animation(), AutoScroll());
 
-    this._bindDragEventListener();
+    this._bindEventListener();
   }
@@ -892,3 +907,3 @@
 
-      this._unbindDragEventListener(); // Remove draggable attributes
+      this._clearEvent(); // Remove draggable attributes
 
@@ -922,7 +937,10 @@
 
-      var touch = evt.touches && evt.touches[0] || evt.pointerType && evt.pointerType === 'touch' && evt;
-      var e = touch || evt; // Safari ignores further event handling after mousedown
+      var _getEvent = getEvent(evt),
+          touch = _getEvent.touch,
+          e = _getEvent.e,
+          target = _getEvent.target; // Safari ignores further event handling after mousedown
 
-      if (!this.nativeDraggable && Safari && e.target && e.target.tagName.toUpperCase() === 'SELECT') return;
-      if (e.target === this.rootEl) return true;
+
+      if (!this.nativeDraggable && Safari && target && target.tagName.toUpperCase() === 'SELECT') return;
+      if (target === this.rootEl) return true;
       if (this.options.stopPropagation) evt.stopPropagation();
@@ -936,3 +954,3 @@ var _this$options = this.options,
       } else if (typeof draggable === 'string') {
-        if (!matches(e.target, draggable)) return true;
+        if (!matches(target, draggable)) return true;
       } else if (draggable !== undefined) {
@@ -946,8 +964,10 @@ throw new Error("draggable expected \"function\" or \"string\" but received \"".concat(_typeof(draggable), "\""));
       } else {
-        this.dragEl = getElement(this.rootEl, e.target, true);
+        this.dragEl = getElement(this.rootEl, target, true);
       } // No dragging is allowed when there is no dragging element
 
 
-      if (!this.dragEl || this.dragEl.animated) return true; // get the position of the dragged element in the list
+      if (!this.dragEl || this.dragEl.animated) return true; // solve the problem that the mobile cannot be dragged
 
+      if (touch) this.dragEl.style['touch-action'] = 'none'; // get the position of the dragged element in the list
+
       var _getElement = getElement(this.rootEl, this.dragEl),
@@ -999,2 +1019,3 @@ rect = _getElement.rect,
       } else {
+        // allow HTML5 drag event
         this.dragEl.draggable = true;
@@ -1056,7 +1077,9 @@ this._onDragStart = this._onDragStart.bind(this);
       if (!this.state.sortableDown) return;
-      var touch = evt.touches && evt.touches[0] || evt.pointerType && evt.pointerType === 'touch' && evt;
-      var e = touch || evt;
+
+      var _getEvent2 = getEvent(evt),
+          e = _getEvent2.e,
+          target = _getEvent2.target;
+
       var clientX = e.clientX,
           clientY = e.clientY;
-      var target = touch ? document.elementFromPoint(clientX, clientY) : e.target;
       var distanceX = clientX - this.move.x;
@@ -1108,3 +1131,6 @@ var distanceY = clientY - this.move.y;
       if (!this.ghost.$el) {
-        // Init in the move event to prevent conflict with the click event
+        // onDrag callback
+        var onDrag = this.options.onDrag;
+        if (onDrag && typeof onDrag === 'function') onDrag(this.dragEl, e, evt); // Init in the move event to prevent conflict with the click event
+
         var rect = this.differ.from.rect;
@@ -1114,9 +1140,4 @@ var ghostEl = this.dragEl.cloneNode(true);
 
-        toggleClass(this.dragEl, this.options.chosenClass, true); // solve the problem that the mobile cannot be dragged
-
-        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);
+        toggleClass(this.dragEl, this.options.chosenClass, true);
+        this.dragEl.style['will-change'] = 'transform';
         if (Safari) css(document.body, 'user-select', 'none');
@@ -1182,8 +1203,12 @@ if (this.nativeDraggable) this._unbindDropEvents();
       stopPropagation && evt.stopPropagation();
-      evt.preventDefault && evt.preventDefault(); // clear style and class
+      evt.preventDefault && evt.preventDefault();
 
+      var _getEvent3 = getEvent(evt),
+          touch = _getEvent3.touch; // clear style and class
+
+
       toggleClass(this.dragEl, this.options.chosenClass, false);
-      this.dragEl.style['touch-action'] = '';
+      if (this.nativeDraggable) this.dragEl.draggable = false;
+      if (touch) this.dragEl.style['touch-action'] = '';
       this.dragEl.style['will-change'] = '';
-      this.dragEl.draggable = false;
 
@@ -1204,13 +1229,12 @@ if (this.state.sortableDown && this.state.sortableMove) {
 
-      this._clearState();
-
+      if (Safari) css(document.body, 'user-select', '');
       this.ghost.destroy(this.differ.to.rect);
-      if (Safari) css(document.body, 'user-select', '');
+      this.state = new State();
     },
     // -------------------------------- clear ----------------------------------
     _clearState: function _clearState() {
+      this.state = new State();
+      this.differ.destroy();
       this.dragEl = null;
       this.dropEl = null;
-      this.state = new State();
-      this.differ.destroy();
     }
@@ -1217,0 +1241,0 @@ };

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 r(t){return(r="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 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),h=t(/Edge/i),c=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,g=["-webkit-transition","-moz-transition","-ms-transition","-o-transition","transition"],m=["-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?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?m.forEach(function(t){return M(e,t,"".concat(t.split("transform")[0]).concat(o))}):m.forEach(function(t){return M(e,t,"")})}function w(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 D(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 S();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 S();if(n||e)return o;n=!0}}}while(o=o.parentNode);return S()}function S(){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!==S()?(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:D(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:D(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 P(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 A(o,n){var i=null;return function(){var t=this,e=arguments;i=i||setTimeout(function(){i=null,o.apply(t,e)},n)}}var O=i(function t(){o(this,t),this.sortableDown=void 0,this.sortableMove=void 0,this.animationEnd=void 0}),k=function(){function t(){o(this,t),this.from={node:null,rect:{},offset:{}},this.to={node:null,rect:{},offset:{}}}return i(t,[{key:"get",value:function(t){return this[t]}},{key:"set",value:function(t,e){this[t]=e}},{key:"destroy",value:function(){this.from={node:null,rect:{},offset:{}},this.to={node:null,rect:{},offset:{}}}}]),t}(),C=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],t=(this.$el=t,this.options),n=t.ghostClass,t=t.ghostStyle,t=void 0===t?{}:t;$(this.$el,n,!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"),b(this.$el,"translate3d(0px, 0px, 0px)"),o&&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"),b(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 L(){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"),b(t,"translate3d(".concat(i,"px, ").concat(e,"px, 0)")),t.offsetLeft,y(t,"".concat(o,"ms")),b(t,"translate3d(0px, 0px, 0px)"),clearTimeout(t.animated),t.animated=setTimeout(function(){y(t,""),b(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&&!c,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 O,this.differ=new k,this.ghost=new C(this),this.dragEl=null,this.dropEl=null,this.dragStartTimer=null,this.autoScrollTimer=null,Object.assign(this,L(),(window.requestAnimationFrame||(window.requestAnimationFrame=function(t){return setTimeout(t,17)}),{_autoScroll:A(function(t){var e,o,n,i,r,s,a,l,h,c,u,f,d,p,g;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,h=(c=t.options).scrollStep,c=c.scrollThreshold,f=0<i&&f<=e&&e<=f+c,d=i+d<p&&e<=u&&u-c<=e,p=n+l<r&&o<=a&&a-c<=o,g={x:i,y:n},(u=0<n&&s<=o&&o<=s+c)?(g.x=f?i-h:d?i+h:i,g.y=n-h):p?(g.x=f?i-h:d?i+h:i,g.y=n+h):f?(g.x=i-h,g.y=n):d&&(g.x=i+h,g.y=n),(u||f||d||p)&&requestAnimationFrame(function(){t.scrollEl.scrollTo(g.x,g.y),t._autoScroll(t)})))},10)}),{_bindDragEventListener:function(){this._onDrag=this._onDrag.bind(this),this._onMove=this._onMove.bind(this),this._onDrop=this._onDrop.bind(this);var t=this.options,e=t.supportPointer,t=t.supportTouch;w(this.rootEl,e?"pointerdown":t?"touchstart":"mousedown",this._onDrag)},_unbindDragEventListener:function(){E(this.rootEl,"pointerdown",this._onDrag),E(this.rootEl,"touchstart",this._onDrag),E(this.rootEl,"mousedown",this._onDrag)},_bindMoveEvents:function(t){this.options.supportPointer?w(this.ownerDocument,"pointermove",this._onMove):w(this.ownerDocument,t?"touchmove":"mousemove",this._onMove)},_unbindMoveEvents:function(){E(this.ownerDocument,"pointermove",this._onMove),E(this.ownerDocument,"touchmove",this._onMove),E(this.ownerDocument,"mousemove",this._onMove)},_unbindDropEvents: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)},_unbindDragEvents:function(){this.nativeDraggable&&(E(this.rootEl,"dragstart",this._onDragStart),E(this.rootEl,"dragover",this._onDragOver),E(this.rootEl,"dragend",this._onDrop))}}),this._bindDragEventListener()}return(H.prototype={constructor:H,destroy:function(){this._clearState(),this._unbindDragEventListener(),Array.prototype.forEach.call(this.rootEl.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)){var o=t.touches&&t.touches[0]||t.pointerType&&"touch"===t.pointerType&&t,n=o||t;if(this.nativeDraggable||!c||!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.draggable,t=t.dragging;if("function"==typeof i){if(!i(n))return!0}else if("string"==typeof i){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}}(n.target,i))return!0}else if(void 0!==i)throw new Error('draggable expected "function" or "string" but received "'.concat(r(i),'"'));if(t){if("function"!=typeof t)throw new Error('dragging expected "function" or "string" but received "'.concat(r(t),'"'));this.dragEl=t(n)}else this.dragEl=x(this.rootEl,n.target,!0);if(!this.dragEl||this.dragEl.animated)return!0;i=x(this.rootEl,this.dragEl),t=i.rect,i=i.offset,i=(this.move={x:n.clientX,y:n.clientY},this.differ.from={node:this.dragEl,rect:t,offset:i},this.ghost.distance={x:n.clientX-t.left,y:n.clientY-t.top},this.state.sortableDown=n,w(this.ownerDocument,"pointerup",this._onDrop),w(this.ownerDocument,"touchend",this._onDrop),w(this.ownerDocument,"mouseup",this._onDrop),this.options),t=i.delay,i=i.delayOnTouchOnly;!t||i&&!o||this.nativeDraggable&&(h||l)?this._onStart(n,o):(clearTimeout(this.dragStartTimer),this.dragStartTimer=setTimeout(function(){return e._onStart(n,o)},t))}}},_onStart:function(t,e){!this.nativeDraggable||e?(this._bindMoveEvents(e),w(this.ownerDocument,"pointercancel",this._onDrop),w(this.ownerDocument,"touchcancel",this._onDrop)):(this.dragEl.draggable=!0,this._onDragStart=this._onDragStart.bind(this),this._onDragOver=this._onDragOver.bind(this),w(this.rootEl,"dragstart",this._onDragStart));try{document.selection?setTimeout(function(){document.selection.empty()},0):window.getSelection().removeAllRanges()}catch(t){}},_onDragStart:function(t){t.dataTransfer.setData("te",t.target.innerText),w(this.rootEl,"dragover",this._onDragOver),w(this.rootEl,"dragend",this._onDrop)},_onDragOver:function(t){var e,o,n,i;this.state.sortableDown&&(this.options.stopPropagation&&t.stopPropagation&&t.stopPropagation(),void 0!==t.preventDefault&&t.cancelable&&t.preventDefault(),e=t.clientX,o=t.clientY,n=e-this.move.x,i=o-this.move.y,void 0!==e&&Math.abs(n)<=0&&void 0!==o&&Math.abs(i)<=0||(this._onStarted(t,t),t.target!==this.rootEl&&this._onChange(this,t.target,t,t)))},_onMove:function(t){var e,o,n,i,r,s,a,l,h=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.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 h._autoScroll(h)},0))))))},_onStarted:function(t,e){var o,n;this.state.sortableMove=t,this.ghost.$el||(o=this.differ.from.rect,n=this.dragEl.cloneNode(!0),this.ghost.init(n,o,!this.nativeDraggable),$(this.dragEl,this.options.chosenClass,!0),this.dragEl.style["touch-action"]="none",this.dragEl.style["will-change"]="transform",(n=this.options.onDrag)&&"function"==typeof n&&n(this.dragEl,t,e),c&&M(document.body,"user-select","none"),this.nativeDraggable&&this._unbindDropEvents())},_onChange:P(function(t,e,o,n){var i,r,s,a,l,h,e=x(t.rootEl,e),c=e.el,u=e.rect,e=e.offset;c&&!c.animated&&(t.dropEl=c,h=o.clientX,i=o.clientY,l=u.left,r=u.right,s=u.top,a=u.bottom,l<h&&h<r&&s<i&&i<a&&c!==t.dragEl&&(t.differ.to={node:t.dropEl,rect:u,offset:e},t.captureAnimationState(),l=t.options.onChange,h=D(t.dragEl),l&&"function"==typeof l&&l(t.differ.from,t.differ.to,o,n),h.top<e.top||h.left<e.left?t.rootEl.insertBefore(t.dragEl,c.nextElementSibling):t.rootEl.insertBefore(t.dragEl,c),t.animateRange()))},5),_onDrop:function(t){var e,o;this._unbindDragEvents(),this._unbindMoveEvents(),this._unbindDropEvents(),this.dragStartTimer&&clearTimeout(this.dragStartTimer),this.options.stopPropagation&&t.stopPropagation(),t.preventDefault&&t.preventDefault(),$(this.dragEl,this.options.chosenClass,!1),this.dragEl.style["touch-action"]="",this.dragEl.style["will-change"]="",this.dragEl.draggable=!1,this.state.sortableDown&&this.state.sortableMove&&(this.differ.to.offset=D(this.dragEl),this.differ.to.rect=T(this.dragEl),e=(o=this.differ).from,o=o.to,e=e.offset.top!==o.offset.top||e.offset.left!==o.offset.left,(o=this.options.onDrop)&&"function"==typeof o&&o(e,t)),this._clearState(),this.ghost.destroy(this.differ.to.rect),c&&M(document.body,"user-select","")},_clearState:function(){this.dragEl=null,this.dropEl=null,this.state=new O,this.differ.destroy()}}).utils={getRect:T,getOffset:D,debounce:P,throttle:A,getParentAutoScrollElement:_},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 s(t){return(s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function 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 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),h=t(/Edge/i),c=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,g=["-webkit-transition","-moz-transition","-ms-transition","-o-transition","transition"],m=["-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?g.forEach(function(t){return P(e,t,"none")}):g.forEach(function(t){return P(e,t,"".concat(t.split("transition")[0],"transform ").concat(o))}):g.forEach(function(t){return P(e,t,"")})}function b(e,o){o?m.forEach(function(t){return P(e,t,"".concat(t.split("transform")[0]).concat(o))}):m.forEach(function(t){return P(e,t,"")})}function w(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 E(t,e,o){window.addEventListener?t.addEventListener(e,o,!(!v&&l)&&d):window.attachEvent&&t.attachEvent("on"+e,o)}function D(t,e,o){window.removeEventListener?t.removeEventListener(e,o,!(!v&&l)&&d):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 S(t,e){if(!t||!t.getBoundingClientRect)return T();var o=t,n=!1;do{if(o.clientWidth<o.scrollWidth||o.clientHeight<o.scrollHeight){var i=P(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 T();if(n||e)return o;n=!0}}}while(o=o.parentNode);return T()}function T(){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!==T()?(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,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: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 M(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 P(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 A(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 O(o,n){var i=null;return function(){var t=this,e=arguments;i=i||setTimeout(function(){i=null,o.apply(t,e)},n)}}var k=i(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 i(t,[{key:"get",value:function(t){return this[t]}},{key:"set",value:function(t,e){this[t]=e}},{key:"destroy",value:function(){this.from={node:null,rect:{},offset:{}},this.to={node:null,rect:{},offset:{}}}}]),t}(),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 i(e,[{key:"init",value:function(t,e){var o=!(2<arguments.length&&void 0!==arguments[2])||arguments[2],t=(this.$el=t,this.options),n=t.ghostClass,t=t.ghostStyle,t=void 0===t?{}:t;M(this.$el,n,!0),P(this.$el,"box-sizing","border-box"),P(this.$el,"margin",0),P(this.$el,"top",e.top),P(this.$el,"left",e.left),P(this.$el,"width",e.width),P(this.$el,"height",e.height),P(this.$el,"opacity","0.8"),P(this.$el,"position","fixed"),P(this.$el,"zIndex","100000"),P(this.$el,"pointerEvents","none"),this.setStyle(t),y(this.$el,"none"),b(this.$el,"translate3d(0px, 0px, 0px)"),o&&this.container.appendChild(this.$el),P(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)P(this.$el,e,t[e])}},{key:"rect",value:function(){return x(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"),b(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 I(){var i=[];return{captureAnimationState:function(){var t=r(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;y(t,"none"),b(t,"translate3d(".concat(i,"px, ").concat(e,"px, 0)")),t.offsetLeft,y(t,"".concat(o,"ms")),b(t,"translate3d(0px, 0px, 0px)"),clearTimeout(t.animated),t.animated=setTimeout(function(){y(t,""),b(t,""),t.animated=null},o)}}}var W="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=S(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&&!c,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&&W,this.move={x:0,y:0},this.state=new k,this.differ=new C,this.ghost=new L(this),this.dragEl=null,this.dropEl=null,this.dragStartTimer=null,this.autoScrollTimer=null,Object.assign(this,{_bindEventListener:function(){this._onDrag=this._onDrag.bind(this),this._onMove=this._onMove.bind(this),this._onDrop=this._onDrop.bind(this);var t=this.options,e=t.supportPointer,t=t.supportTouch;E(this.rootEl,e?"pointerdown":t?"touchstart":"mousedown",this._onDrag)},_clearEvent:function(){D(this.rootEl,"pointerdown",this._onDrag),D(this.rootEl,"touchstart",this._onDrag),D(this.rootEl,"mousedown",this._onDrag)},_bindMoveEvents:function(t){this.options.supportPointer?E(this.ownerDocument,"pointermove",this._onMove):E(this.ownerDocument,t?"touchmove":"mousemove",this._onMove)},_unbindMoveEvents:function(){D(this.ownerDocument,"pointermove",this._onMove),D(this.ownerDocument,"touchmove",this._onMove),D(this.ownerDocument,"mousemove",this._onMove)},_unbindDropEvents:function(){D(this.ownerDocument,"pointerup",this._onDrop),D(this.ownerDocument,"pointercancel",this._onDrop),D(this.ownerDocument,"touchend",this._onDrop),D(this.ownerDocument,"touchcancel",this._onDrop),D(this.ownerDocument,"mouseup",this._onDrop)},_unbindDragEvents:function(){this.nativeDraggable&&(D(this.rootEl,"dragstart",this._onDragStart),D(this.rootEl,"dragover",this._onDragOver),D(this.rootEl,"dragend",this._onDrop))}},I(),(window.requestAnimationFrame||(window.requestAnimationFrame=function(t){return setTimeout(t,17)}),{_autoScroll:O(function(t){var e,o,n,i,r,s,a,l,h,c,u,f,d,p,g;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=x(t.scrollEl)).top,u=d.right,a=d.bottom,f=d.left,l=d.height,d=d.width,h=(c=t.options).scrollStep,c=c.scrollThreshold,f=0<i&&f<=e&&e<=f+c,d=i+d<p&&e<=u&&u-c<=e,p=n+l<r&&o<=a&&a-c<=o,g={x:i,y:n},(u=0<n&&s<=o&&o<=s+c)?(g.x=f?i-h:d?i+h:i,g.y=n-h):p?(g.x=f?i-h:d?i+h:i,g.y=n+h):f?(g.x=i-h,g.y=n):d&&(g.x=i+h,g.y=n),(u||f||d||p)&&requestAnimationFrame(function(){t.scrollEl.scrollTo(g.x,g.y),t._autoScroll(t)})))},10)})),this._bindEventListener()}return(H.prototype={constructor:H,destroy:function(){this._clearState(),this._clearEvent(),Array.prototype.forEach.call(this.rootEl.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)){var o=w(t),n=o.touch,i=o.e,o=o.target;if(this.nativeDraggable||!c||!o||"SELECT"!==o.tagName.toUpperCase()){if(o===this.rootEl)return!0;this.options.stopPropagation&&t.stopPropagation();var t=this.options,r=t.draggable,t=t.dragging;if("function"==typeof r){if(!r(i))return!0}else if("string"==typeof r){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}}(o,r))return!0}else if(void 0!==r)throw new Error('draggable expected "function" or "string" but received "'.concat(s(r),'"'));if(t){if("function"!=typeof t)throw new Error('dragging expected "function" or "string" but received "'.concat(s(t),'"'));this.dragEl=t(i)}else this.dragEl=$(this.rootEl,o,!0);if(!this.dragEl||this.dragEl.animated)return!0;n&&(this.dragEl.style["touch-action"]="none");r=$(this.rootEl,this.dragEl),t=r.rect,o=r.offset,r=(this.move={x:i.clientX,y:i.clientY},this.differ.from={node:this.dragEl,rect:t,offset:o},this.ghost.distance={x:i.clientX-t.left,y:i.clientY-t.top},this.state.sortableDown=i,E(this.ownerDocument,"pointerup",this._onDrop),E(this.ownerDocument,"touchend",this._onDrop),E(this.ownerDocument,"mouseup",this._onDrop),this.options),o=r.delay,t=r.delayOnTouchOnly;!o||t&&!n||this.nativeDraggable&&(h||l)?this._onStart(i,n):(clearTimeout(this.dragStartTimer),this.dragStartTimer=setTimeout(function(){return e._onStart(i,n)},o))}}},_onStart:function(t,e){!this.nativeDraggable||e?(this._bindMoveEvents(e),E(this.ownerDocument,"pointercancel",this._onDrop),E(this.ownerDocument,"touchcancel",this._onDrop)):(this.dragEl.draggable=!0,this._onDragStart=this._onDragStart.bind(this),this._onDragOver=this._onDragOver.bind(this),E(this.rootEl,"dragstart",this._onDragStart));try{document.selection?setTimeout(function(){document.selection.empty()},0):window.getSelection().removeAllRanges()}catch(t){}},_onDragStart:function(t){t.dataTransfer.setData("te",t.target.innerText),E(this.rootEl,"dragover",this._onDragOver),E(this.rootEl,"dragend",this._onDrop)},_onDragOver:function(t){var e,o,n,i;this.state.sortableDown&&(this.options.stopPropagation&&t.stopPropagation&&t.stopPropagation(),void 0!==t.preventDefault&&t.cancelable&&t.preventDefault(),e=t.clientX,o=t.clientY,n=e-this.move.x,i=o-this.move.y,void 0!==e&&Math.abs(n)<=0&&void 0!==o&&Math.abs(i)<=0||(this._onStarted(t,t),t.target!==this.rootEl&&this._onChange(this,t.target,t,t)))},_onMove:function(t){var e,o,n,i,r,s,a,l,h=this;this.state.sortableDown&&(e=(o=w(t)).e,o=o.target,n=e.clientX,i=e.clientY,s=n-this.move.x,r=i-this.move.y,void 0!==n&&Math.abs(s)<=0&&void 0!==i&&Math.abs(r)<=0||(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),n<0||i<0||(s=(r=x(this.rootEl)).top,a=r.right,l=r.bottom,n<r.left||a<n||i<s||l<i||(this._onChange(this,o,e,t),this.autoScrollTimer&&clearTimeout(this.autoScrollTimer),this.options.autoScroll&&(this.autoScrollTimer=setTimeout(function(){return h._autoScroll(h)},0))))))},_onStarted:function(t,e){var o;this.state.sortableMove=t,this.ghost.$el||((o=this.options.onDrag)&&"function"==typeof o&&o(this.dragEl,t,e),o=this.differ.from.rect,t=this.dragEl.cloneNode(!0),this.ghost.init(t,o,!this.nativeDraggable),M(this.dragEl,this.options.chosenClass,!0),this.dragEl.style["will-change"]="transform",c&&P(document.body,"user-select","none"),this.nativeDraggable&&this._unbindDropEvents())},_onChange:A(function(t,e,o,n){var i,r,s,a,l,h,e=$(t.rootEl,e),c=e.el,u=e.rect,e=e.offset;c&&!c.animated&&(t.dropEl=c,h=o.clientX,i=o.clientY,l=u.left,r=u.right,s=u.top,a=u.bottom,l<h&&h<r&&s<i&&i<a&&c!==t.dragEl&&(t.differ.to={node:t.dropEl,rect:u,offset:e},t.captureAnimationState(),l=t.options.onChange,h=_(t.dragEl),l&&"function"==typeof l&&l(t.differ.from,t.differ.to,o,n),h.top<e.top||h.left<e.left?t.rootEl.insertBefore(t.dragEl,c.nextElementSibling):t.rootEl.insertBefore(t.dragEl,c),t.animateRange()))},5),_onDrop:function(t){this._unbindDragEvents(),this._unbindMoveEvents(),this._unbindDropEvents(),this.dragStartTimer&&clearTimeout(this.dragStartTimer),this.options.stopPropagation&&t.stopPropagation(),t.preventDefault&&t.preventDefault();var e,o=w(t).touch;M(this.dragEl,this.options.chosenClass,!1),this.nativeDraggable&&(this.dragEl.draggable=!1),o&&(this.dragEl.style["touch-action"]=""),this.dragEl.style["will-change"]="",this.state.sortableDown&&this.state.sortableMove&&(this.differ.to.offset=_(this.dragEl),this.differ.to.rect=x(this.dragEl),e=(o=this.differ).from,o=o.to,e=e.offset.top!==o.offset.top||e.offset.left!==o.offset.left,(o=this.options.onDrop)&&"function"==typeof o&&o(e,t)),c&&P(document.body,"user-select",""),this.ghost.destroy(this.differ.to.rect),this.state=new k},_clearState:function(){this.state=new k,this.differ.destroy(),this.dragEl=null,this.dropEl=null}}).utils={getRect:x,getOffset:_,debounce:A,throttle:O,getParentAutoScrollElement:S},H});

package.json

 {
   "name": "sortable-dnd",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "description": "JS Library for Drag and Drop, supports Sortable and Draggable",
@@ -5,0 +5,0 @@ "main": "dist/sortable.js",

README.md

@@ -48,2 +48,3 @@ <p>
     // draggable: '#drag' // use id
+    // dragging: (e) => e.target.parentNode // set dragging HTMLElement
     onDrag: (dragEl, event, originalEvent) => {
@@ -80,6 +81,6 @@ // code
 | `draggable`       | `String/Function` | `undefined` | Specifies which items inside the element should be draggable, the function type must return a boolean |
-| `onDrag`          | `Function`        | `undefined` | The callback function when the drag is started: <br />`(dragEl, event, originalEvent) => {}` |
-| `onMove`          | `Function`        | `undefined` | The callback function when the dragged element is moving: <br /> `(from, ghostEl, event, originalEvent) => {}` |
-| `onDrop`          | `Function`        | `undefined` | The callback function when the drag is completed: <br /> `(changed, originalEvent) => {}` |
-| `onChange`        | `Function`        | `undefined` | The callback function when the dragged element changes position: <br /> `(from, to, event, originalEvent) => {}` |
+| `onDrag`          | `Function`        | `undefined` | The callback function when the drag is started |
+| `onMove`          | `Function`        | `undefined` | The callback function when the dragged element is moving |
+| `onDrop`          | `Function`        | `undefined` | The callback function when the drag is completed |
+| `onChange`        | `Function`        | `undefined` | The callback function when the dragged element changes position |
 | `autoScroll`      | `Boolean`         | `true`      | Automatic scrolling when moving to the edge of the container, **for browsers that do not support HTML5 drag events** |
@@ -95,3 +96,3 @@ | `scrollStep`      | `Number`          | `5`         | The distance to scroll each frame when autoscrolling |
 | `disabled`        | `Boolean`         | `false`     | Disables the sortable if set to true |
-| `dragging`        | `Function`        | `undefined` | Specifies the element witch you want to drag: <br /> `(e) => return e.target` |
+| `dragging`        | `Function`        | `undefined` | Specifies the element witch you want to drag |
 | `delay`           | `Number`          | `0`         | time in milliseconds to define when the sorting should start |
@@ -98,0 +99,0 @@ | `delayOnTouchOnly`| `Boolean`         | `false`     | only delay if user is using touch |

src/Events.js

@@ -5,3 +5,3 @@ import { on, off } from './utils.js'
   return {
-    _bindDragEventListener() {
+    _bindEventListener() {
       this._onDrag = this._onDrag.bind(this)
@@ -21,3 +21,3 @@ this._onMove = this._onMove.bind(this)
   
-    _unbindDragEventListener() {
+    _clearEvent() {
       off(this.rootEl, 'pointerdown', this._onDrag)
@@ -24,0 +24,0 @@ off(this.rootEl, 'touchstart', this._onDrag)

src/Sortable.js

@@ -7,2 +7,3 @@ import {
   getRect,
+  getEvent,
   throttle,
@@ -88,4 +89,9 @@ debounce,
 
-  Object.assign(this, Animation(), AutoScroll(), Events())
-  this._bindDragEventListener()
+  Object.assign(
+    this,
+    Events(),
+    Animation(),
+    AutoScroll(),
+  )
+  this._bindEventListener()
 }
@@ -101,3 +107,3 @@
     this._clearState()
-    this._unbindDragEventListener()
+    this._clearEvent()
     // Remove draggable attributes
@@ -127,8 +133,7 @@ Array.prototype.forEach.call(this.rootEl.querySelectorAll('[draggable]'), function (el) {
 
-    const touch = (evt.touches && evt.touches[0]) || (evt.pointerType && evt.pointerType === 'touch' && evt)
-    const e = touch || evt
+    const { touch, e, target } = getEvent(evt)
 
     // Safari ignores further event handling after mousedown
-		if (!this.nativeDraggable && Safari && e.target && e.target.tagName.toUpperCase() === 'SELECT') return
-    if (e.target === this.rootEl) return true
+		if (!this.nativeDraggable && Safari && target && target.tagName.toUpperCase() === 'SELECT') return
+    if (target === this.rootEl) return true
 
@@ -143,3 +148,3 @@ if (this.options.stopPropagation) evt.stopPropagation()
     } else if (typeof draggable === 'string') {
-      if (!matches(e.target, draggable)) return true
+      if (!matches(target, draggable)) return true
 
@@ -155,3 +160,3 @@ } else if (draggable !== undefined) {
     } else {
-      this.dragEl = getElement(this.rootEl, e.target, true)
+      this.dragEl = getElement(this.rootEl, target, true)
     }
@@ -162,2 +167,5 @@
 
+    // solve the problem that the mobile cannot be dragged
+    if (touch) this.dragEl.style['touch-action'] = 'none'
+    
     // get the position of the dragged element in the list
@@ -190,2 +198,3 @@ const { rect, offset } = getElement(this.rootEl, this.dragEl)
     } else {
+      // allow HTML5 drag event
       this.dragEl.draggable = true
@@ -243,6 +252,4 @@
     if (!this.state.sortableDown) return
-    const touch = (evt.touches && evt.touches[0]) || (evt.pointerType && evt.pointerType === 'touch' && evt)
-    const e = touch || evt
+    const { touch, e, target } = getEvent(evt)
     const { clientX, clientY } = e
-    const target = touch ? document.elementFromPoint(clientX, clientY) : e.target
     const distanceX = clientX - this.move.x
@@ -283,2 +290,5 @@ const distanceY = clientY - this.move.y
     if (!this.ghost.$el) {
+      // onDrag callback
+      const { onDrag } = this.options
+      if (onDrag && typeof onDrag === 'function') onDrag(this.dragEl, e, evt)
 
@@ -292,11 +302,4 @@ // Init in the move event to prevent conflict with the click event
       toggleClass(this.dragEl, this.options.chosenClass, true)
-
-      // solve the problem that the mobile cannot be dragged
-      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')
@@ -350,7 +353,8 @@ if (this.nativeDraggable) this._unbindDropEvents()
 
+    const { touch } = getEvent(evt)
     // clear style and class
     toggleClass(this.dragEl, this.options.chosenClass, false)
-    this.dragEl.style['touch-action'] = ''
+    if (this.nativeDraggable) this.dragEl.draggable = false
+    if (touch) this.dragEl.style['touch-action'] = ''
     this.dragEl.style['will-change'] = ''
-    this.dragEl.draggable = false
 
@@ -369,5 +373,5 @@ if (this.state.sortableDown && this.state.sortableMove) {
     }
-    this._clearState()
+    if (Safari) css(document.body, 'user-select', '')
     this.ghost.destroy(this.differ.to.rect)
-    if (Safari) css(document.body, 'user-select', '')
+    this.state = new State
   },
@@ -377,6 +381,6 @@
   _clearState: function() {
+    this.state = new State
+    this.differ.destroy()
     this.dragEl = null
     this.dropEl = null
-    this.state = new State
-    this.differ.destroy()
   }
@@ -383,0 +387,0 @@ }

src/utils.js

@@ -38,2 +38,13 @@ import { IE11OrLess } from './Brower.js'
 /**
+ * get touch event and current event
+ * @param {Event} evt 
+ */
+export function getEvent(evt) {
+  const touch = (evt.touches && evt.touches[0]) || (evt.pointerType && evt.pointerType === 'touch' && evt)
+  const e = touch || evt
+  const target = touch ? document.elementFromPoint(e.clientX, e.clientY) : e.target
+  return { touch, e, target }
+}
+
+/**
  * detect passive event support
@@ -40,0 +51,0 @@ */

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

Improved metrics

Total package byte prevSize

96640

increased by0.48%

Lines of code

2040

increased by1.69%

Number of lines in readme file

104

increased by0.97%

No dependency changes