sortable-dnd - npm Package Compare versions

Comparing version 0.1.2 to 0.1.3

dist/sortable.js

 /*!
- * sortable-dnd v0.1.2
+ * sortable-dnd v0.1.3
  * open source under the MIT license
@@ -88,2 +88,3 @@ * https://github.com/mfuu/sortable-dnd#readme
   var IE11OrLess = userAgent(/(?:Trident.*rv[ :]?11\.|msie|iemobile|Windows Phone)/i);
+  var Edge = userAgent(/Edge/i);
   var Safari = userAgent(/safari/i) && !userAgent(/chrome/i) && !userAgent(/android/i);
@@ -466,2 +467,7 @@ var IOS = userAgent(/iP(ad|od|hone)/i);
         }
+
+        if (this.nativeDraggable) {
+          on(this.$el, 'dragover', this);
+          on(this.$el, 'dragenter', this);
+        }
       },
@@ -662,2 +668,5 @@ _unbindEventListener: function _unbindEventListener() {
           if (_this.$el) _this.$el.remove();
+          _this.$el = null;
+          _this.x = 0;
+          _this.y = 0;
           _this.exist = false;
@@ -704,6 +713,10 @@ }, this.options.ghostAnimation);
     var defaults = {
+      delay: 0,
+      // 定义鼠标选中列表单元可以开始拖动的延迟时间
+      delayOnTouchOnly: false,
+      // only delay if user is using touch
       disabled: false,
-      // 
+      // 定义是否此sortable对象是否可用，为true时sortable对象不能拖放排序等功能，为false时为可以进行排序，相当于一个开关
       animation: 150,
-      // 动画延时
+      // 定义排序动画的时间
       ghostAnimation: 0,
@@ -737,2 +750,3 @@ // 拖拽元素销毁时动画效果
 
+    this.nativeDraggable = this.options.forceFallback ? false : supportDraggable;
     this.differ = new Differ();
@@ -744,9 +758,2 @@ this.ghost = new Ghost(this.options);
 
-    this.nativeDraggable = this.options.forceFallback ? false : supportDraggable;
-
-    if (this.nativeDraggable) {
-      on(this.$el, 'dragover', this);
-      on(this.$el, 'dragenter', this);
-    }
-
     this._handleDestroy();
@@ -769,6 +776,6 @@ }
       var _this$options2 = this.options,
+          delay = _this$options2.delay,
           disabled = _this$options2.disabled,
-          dragging = _this$options2.dragging,
-          draggable = _this$options2.draggable,
-          stopPropagation = _this$options2.stopPropagation;
+          stopPropagation = _this$options2.stopPropagation,
+          delayOnTouchOnly = _this$options2.delayOnTouchOnly;
       if (/mousedown|pointerdown/.test(evt.type) && evt.button !== 0 || disabled) return; // only left button and enabled
@@ -781,3 +788,18 @@
       if (e.target === this.$el) return true;
+      if (evt.preventDefault !== void 0) evt.preventDefault();
+      if (stopPropagation) evt.stopPropagation();
 
+      if (delay && (!delayOnTouchOnly || touch) && (!this.nativeDraggable || !(Edge || IE11OrLess))) {
+        this.dragStartTimer = setTimeout(this._onDrag(e, touch), delay);
+      } else {
+        this._onDrag(e, touch);
+      }
+    },
+    _onDrag: function _onDrag(
+    /** Event|TouchEvent */
+    e, touch) {
+      var _this$options3 = this.options,
+          dragging = _this$options3.dragging,
+          draggable = _this$options3.draggable;
+
       if (typeof draggable === 'function') {
@@ -791,5 +813,2 @@ if (!draggable(e)) return true;
 
-      if (evt.preventDefault !== void 0) evt.preventDefault();
-      if (stopPropagation) evt.stopPropagation();
-
       try {
@@ -823,6 +842,3 @@ if (document.selection) {
 
-      if (!el || index < 0) return true; // 将拖拽元素克隆一份作为蒙版
-
-      var ghostEl = this.dragEl.cloneNode(true);
-      this.ghost.init(ghostEl, rect);
+      if (!el || index < 0) return true;
       this.ghost.set('x', rect.left);
@@ -846,3 +862,10 @@ this.ghost.set('y', rect.top);
       if (evt.preventDefault !== void 0) evt.preventDefault(); // prevent scrolling
+      // 将初始化放到move事件中，防止与click事件冲突
 
+      if (!this.ghost.$el) {
+        // 将拖拽元素克隆一份作为蒙版
+        var ghostEl = this.dragEl.cloneNode(true);
+        this.ghost.init(ghostEl, this.differ._old_.rect);
+      }
+
       var touch = evt.touches && evt.touches[0];
@@ -853,5 +876,5 @@ var e = touch || evt;
       var target = touch ? document.elementFromPoint(clientX, clientY) : e.target;
-      var _this$options3 = this.options,
-          chosenClass = _this$options3.chosenClass,
-          stopPropagation = _this$options3.stopPropagation;
+      var _this$options4 = this.options,
+          chosenClass = _this$options4.chosenClass,
+          stopPropagation = _this$options4.stopPropagation;
       if (stopPropagation) evt.stopPropagation();
@@ -932,6 +955,7 @@ toggleClass(this.dragEl, chosenClass, true);
 
-      var _this$options4 = this.options,
-          dragEnd = _this$options4.dragEnd,
-          chosenClass = _this$options4.chosenClass,
-          stopPropagation = _this$options4.stopPropagation;
+      clearTimeout(this.dragStartTimer);
+      var _this$options5 = this.options,
+          dragEnd = _this$options5.dragEnd,
+          chosenClass = _this$options5.chosenClass,
+          stopPropagation = _this$options5.stopPropagation;
       if (stopPropagation) evt.stopPropagation(); // 阻止事件冒泡
@@ -961,5 +985,6 @@
         }
+
+        this.ghost.destroy(getRect(this.dragEl));
       }
 
-      this.ghost.destroy(getRect(this.dragEl));
       this.differ.destroy();
@@ -966,0 +991,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 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 n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function o(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}function i(t,e,n){e&&o(t.prototype,e),n&&o(t,n),Object.defineProperty(t,"prototype",{writable:!1})}function r(t){return function(t){if(Array.isArray(t))return 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 n=Object.prototype.toString.call(t).slice(8,-1);return"Map"===(n="Object"===n&&t.constructor?t.constructor.name:n)||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?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 n=0,o=new Array(e);n<e;n++)o[n]=t[n];return o}function t(t){if("undefined"!=typeof window&&window.navigator)return!!navigator.userAgent.match(t)}var l=t(/(?:Trident.*rv[ :]?11\.|msie|iemobile|Windows Phone)/i),h=t(/safari/i)&&!t(/chrome/i)&&!t(/android/i),e=t(/iP(ad|od|hone)/i),f=t(/chrome/i)&&t(/android/i),c={capture:!1,passive:!1},u=/\s+/g;function d(t,e,n,o){window.addEventListener?t.addEventListener(e,n,!(!o&&l)&&c):window.attachEvent&&t.attachEvent("on"+e,n)}function p(t,e,n,o){window.removeEventListener?t.removeEventListener(e,n,!(!o&&l)&&c):window.detachEvent&&t.detachEvent("on"+e,n)}function v(t){for(var e={top:0,left:0,height:0,width:0},n=(e.height=t.offsetHeight,e.width=t.offsetWidth,e.top=t.offsetTop,e.left=t.offsetLeft,t.offsetParent);null!==n;)e.top+=n.offsetTop,e.left+=n.offsetLeft,n=n.offsetParent;return e}function g(){var t=document.scrollingElement;return t||document.documentElement}function m(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!==g()?(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 w(t,e){var n={index:-1,el:null,rect:{},offset:{}},o=r(Array.from(t.children)),t=o.indexOf(e);-1<t&&Object.assign(n,{index:t,el:o[t],rect:m(o[t]),offset:v(o[t])});for(var i=0;i<o.length;i++)if(function(t,e){var n;if(t&&e)for(n=t.parentNode;n;){if(e===n)return 1;n=n.parentNode}return}(e,o[i])){Object.assign(n,{index:i,el:o[i],rect:m(o[i]),offset:v(o[i])});break}return n}function y(t,e,n){var o;t&&e&&(t.classList?t.classList[n?"add":"remove"](e):(o=(" "+t.className+" ").replace(u," ").replace(" "+e+" "," "),t.className=(o+(n?" "+e:"")).replace(u," ")))}function b(t,e,n){var o=t&&t.style;if(o){if(void 0===n)return document.defaultView&&document.defaultView.getComputedStyle?n=document.defaultView.getComputedStyle(t,""):t.currentStyle&&(n=t.currentStyle),void 0===e?n:n[e];o[e=e in o||-1!==e.indexOf("webkit")?e:"-webkit-"+e]=n+("string"==typeof n?"":"px")}}var _=["-webkit-transition","-moz-transition","-ms-transition","-o-transition","transition"],E=["-webkit-transform","-moz-transform","-ms-transform","-o-transform","transform"];function S(){var o=[];return{captureAnimationState:function(){var t=r(Array.from(this.$el.children)),e=function(t,e,n){e=t.indexOf(e),t=t.indexOf(n);return e<t?{start:e,end:t}:{start:t,end:e}}(t,this.dragEl,this.dropEl),n=e.start,e=e.end;o.length=0,t.slice(n,e+1).forEach(function(t){o.push({target:t,rect:m(t)})})},animateRange:function(){var n=this;o.forEach(function(t){var e=t.target,t=t.rect;n.animate(e,t,n.animation)})},animate:function(e,t){var n=2<arguments.length&&void 0!==arguments[2]?arguments[2]:150,o=m(e),i=t.left-o.left,r=t.top-o.top;_.forEach(function(t){return b(e,t,"none")}),E.forEach(function(t){return b(e,t,"".concat(t.split("transform")[0],"translate3d(").concat(i,"px, ").concat(r,"px, 0)"))}),e.offsetLeft,_.forEach(function(t){return b(e,t,"".concat(t.split("transition")[0],"transform ").concat(n,"ms"))}),E.forEach(function(t){return b(e,t,"".concat(t.split("transform")[0],"translate3d(0px, 0px, 0px)"))}),clearTimeout(e.animated),e.animated=setTimeout(function(){_.forEach(function(t){return b(e,t,"")}),E.forEach(function(t){return b(e,t,"")}),e.animated=null},n)}}}var $=function(){function t(){n(this,t),this._old_={node:null,rect:{},offset:{}},this._new_={node:null,rect:{},offset:{}}}return i(t,[{key:"get",value:function(t){return this[t]}},{key:"set",value:function(t,e){this[t]=e}},{key:"destroy",value:function(){this._old_={node:null,rect:{},offset:{}},this._new_={node:null,rect:{},offset:{}}}}]),t}(),D=function(){function e(t){n(this,e),this.options=t,this.x=0,this.y=0,this.exist=!1}return i(e,[{key:"init",value:function(t,e){var n,o;t&&(this.$el=t,n=(t=this.options).ghostClass,t=void 0===(t=t.ghostStyle)?{}:t,o=e.width,e=e.height,this.$el.class=n,this.$el.style.width=o+"px",this.$el.style.height=e+"px",this.$el.style.transform="",this.$el.style.transition="",this.$el.style.position="fixed",this.$el.style.left=0,this.$el.style.top=0,this.$el.style.zIndex=1e5,this.$el.style.opacity=.8,this.$el.style.pointerEvents="none",this.$el.style.cursor="move",this.setStyle(t))}},{key:"get",value:function(t){return this[t]}},{key:"set",value:function(t,e){this[t]=e,this[t]=e}},{key:"setStyle",value:function(t){for(var e in t)b(this.$el,e,t[e])}},{key:"rect",value:function(){return this.$el.getBoundingClientRect()}},{key:"move",value:function(t){var e=this.options.ghostAnimation;this.$el.style.transition=t?"all ".concat(e,"ms"):"",this.exist||(document.body.appendChild(this.$el),this.exist=!0),this.$el.style.transform="translate3d(".concat(this.x,"px, ").concat(this.y,"px, 0)"),"move"!==this.$el.style.cursor&&(this.$el.style.cursor="move")}},{key:"destroy",value:function(t){var e=this;t&&(this.x=t.left,this.y=t.top,this.move(!0)),setTimeout(function(){e.$el&&e.$el.remove(),e.exist=!1},this.options.ghostAnimation)}}]),e}(),x="undefined"!=typeof document&&!f&&!e&&"draggable"in document.createElement("div");function P(t,e){if(!t||!t.nodeType||1!==t.nodeType)throw"Sortable: `el` must be an HTMLElement, not ".concat({}.toString.call(t));this.$el=t,this.options=e=Object.assign({},e),this.scrollEl=function(t,e){if(!t||!t.getBoundingClientRect)return g();var n=t,o=!1;do{if(n.clientWidth<n.scrollWidth||n.clientHeight<n.scrollHeight){var i=b(n);if(n.clientWidth<n.scrollWidth&&("auto"==i.overflowX||"scroll"==i.overflowX)||n.clientHeight<n.scrollHeight&&("auto"==i.overflowY||"scroll"==i.overflowY)){if(!n.getBoundingClientRect||n===document.body)return g();if(o||e)return n;o=!0}}}while(n=n.parentNode);return g()}(this.$el,!0),this.dragEl=null,this.dropEl=null,this.differ=null,this.ghost=null;var n,o,i={disabled:!(this.calcXY={x:0,y:0}),animation:150,ghostAnimation:0,ghostClass:"",ghostStyle:{},chosenClass:"",draggable:void 0,dragging:void 0,dragEnd:void 0,forceFallback:!1,stopPropagation:!1,supportPassive:(n=!1,document.addEventListener("checkIfSupportPassive",null,{get passive(){return n=!0}}),n),supportPointer:"PointerEvent"in window&&!h,supportTouch:"ontouchstart"in window,ownerDocument:this.$el.ownerDocument};for(o in i)o in this.options||(this.options[o]=i[o]);this.differ=new $,this.ghost=new D(this.options),Object.assign(this,S(),{_bindEventListener:function(){this._onStart=this._onStart.bind(this),this._onMove=this._onMove.bind(this),this._onDrop=this._onDrop.bind(this);var t=this.options,e=t.supportPointer,n=t.supportTouch,t=t.supportPassive;d(this.$el,e?"pointerdown":n?"touchstart":"mousedown",this._onStart,t)},_unbindEventListener:function(){var t=this.options.supportPassive;p(this.$el,"pointerdown",this._onStart,t),p(this.$el,"touchstart",this._onStart,t),p(this.$el,"mousedown",this._onStart,t),this.nativeDraggable&&(p(this.$el,"dragover",this),p(this.$el,"dragenter",this))},_onMoveEvents:function(t){var e=this.options,n=e.supportPointer,o=e.ownerDocument,e=e.supportPassive;d(o,n?"pointermove":t?"touchmove":"mousemove",this._onMove,e)},_onUpEvents:function(){var t=this.options,e=t.ownerDocument,t=t.supportPassive;d(e,"pointerup",this._onDrop,t),d(e,"pointercancel",this._onDrop,t),d(e,"touchend",this._onDrop,t),d(e,"touchcancel",this._onDrop,t),d(e,"mouseup",this._onDrop,t)},_offMoveEvents:function(){var t=this.options,e=t.ownerDocument,t=t.supportPassive;p(e,"pointermove",this._onMove,t),p(e,"touchmove",this._onMove,t),p(e,"mousemove",this._onMove,t)},_offUpEvents:function(){var t=this.options,e=t.ownerDocument,t=t.supportPassive;p(e,"pointerup",this._onDrop,t),p(e,"pointercancel",this._onDrop,t),p(e,"touchend",this._onDrop,t),p(e,"touchcancel",this._onDrop,t),p(e,"mouseup",this._onDrop,t)}}),this._bindEventListener(),this.nativeDraggable=!this.options.forceFallback&&x,this.nativeDraggable&&(d(this.$el,"dragover",this),d(this.$el,"dragenter",this)),this._handleDestroy()}return P.prototype={constructor:P,destroy:function(){this._unbindEventListener(),this._resetState()},_onStart:function(t){var e=this.options,n=e.disabled,o=e.dragging,i=e.draggable,e=e.stopPropagation;if(!(/mousedown|pointerdown/.test(t.type)&&0!==t.button||n)){var n=t.touches&&t.touches[0]||t.pointerType&&"touch"===t.pointerType&&t,r=n||t;if(this.nativeDraggable||!h||!r.target||"SELECT"!==r.target.tagName.toUpperCase()){if(r.target===this.$el)return!0;if("function"==typeof i){if(!i(r))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}}(r.target,i))return!0}else if(void 0!==i)throw new Error('draggable expected "function" or "string" but received "'.concat(a(i),'"'));void 0!==t.preventDefault&&t.preventDefault(),e&&t.stopPropagation();try{document.selection?setTimeout(function(){document.selection.empty()},0):window.getSelection().removeAllRanges();var s="function"==typeof o?o(r):w(this.$el,r.target).el;if(!s)return!0;if(s.animated)return;this.dragEl=s}catch(t){throw new Error(t)}window.sortableDndOnDown=!0;i=w(this.$el,this.dragEl),e=i.index,t=i.el,o=i.rect,s=i.offset;if(!t||e<0)return!0;i=this.dragEl.cloneNode(!0);this.ghost.init(i,o),this.ghost.set("x",o.left),this.ghost.set("y",o.top),this.differ._old_.rect=o,this.differ._old_.offset=s,this.differ._old_.node=this.dragEl,this.calcXY={x:r.clientX,y:r.clientY},this._onMoveEvents(n),this._onUpEvents(n)}}},_onMove:function(t){void 0!==t.preventDefault&&t.preventDefault();var e=t.touches&&t.touches[0],n=e||t,o=n.clientX,i=n.clientY,e=e?document.elementFromPoint(o,i):n.target,n=this.options,r=n.chosenClass,n=n.stopPropagation;if(n&&t.stopPropagation(),y(this.dragEl,r,!0),this.ghost.move(),window.sortableDndOnDown&&!(o<0||i<0)){window.sortableDndOnMove=!0,this.ghost.set("x",this.ghost.x+o-this.calcXY.x),this.ghost.set("y",this.ghost.y+i-this.calcXY.y),this.calcXY={x:o,y:i},this.ghost.move();n=m(this.$el);if(o<n.left||o>n.right||i<n.top||i>n.bottom)this.ghost.setStyle({cursor:"not-allowed"});else{var t=w(this.$el,e),r=t.index,e=t.el,s=t.rect,t=t.offset,a=s.left,l=s.right,h=s.top,s=s.bottom;if(!(!e||r<0||h<0)){var r=this.scrollEl,f=r.scrollTop,r=r.scrollLeft,r=n.left+r,f=n.top+f;if(this.scrollEl!==this.$el&&(n.left<0||n.top<0)){if(n.top<0&&h<f||n.left<0&&a<r)return}else if(h<n.top||a<n.left)return;a<o&&o<l&&h<i&&i<s&&(this.dropEl=e,this.dropEl===this.dragEl||this.dropEl.animated||(this.captureAnimationState(),(f=v(this.dragEl)).top<t.top||f.left<t.left?this.$el.insertBefore(this.dragEl,this.dropEl.nextElementSibling):this.$el.insertBefore(this.dragEl,this.dropEl),this.animateRange(),this.differ._new_.node=this.dropEl,this.differ._new_.rect=m(this.dropEl)))}}}},_onDrop:function(t){this._offMoveEvents(),this._offUpEvents();var e=this.options,n=e.dragEnd,o=e.chosenClass;if(e.stopPropagation&&t.stopPropagation(),y(this.dragEl,o,!1),window.sortableDndOnDown&&window.sortableDndOnMove){this.differ._new_.offset=v(this.dragEl);e=this.differ,t=e._old_,o=e._new_,e=t.offset.top!==o.offset.top||t.offset.left!==o.offset.left;if(e||(this.differ._new_.node=this.differ._old_.node,this.differ._new_.rect=this.differ._old_.rect),"function"!=typeof n)throw new Error('Sortable-dnd Error: dragEnd expected "function" but received "'.concat(a(n),'"'));n(t,o,e)}this.ghost.destroy(m(this.dragEl)),this.differ.destroy(),this._removeWindowState()},_resetState:function(){this.dragEl=null,this.dropEl=null,this.ghost.destroy(),this.differ.destroy(),this.calcXY={x:0,y:0},this._removeWindowState()},_removeWindowState:function(){window.sortableDndOnDown=null,window.sortableDndOnMove=null,delete window.sortableDndOnDown,delete window.sortableDndOnMove},_handleDestroy:function(){var t=this,e=null,n=window.MutationObserver||window.WebKitMutationObserver||window.MozMutationObserver;if(n){var o=this.options.ownerDocument;if(!o)return;(e=new n(function(){o.body.contains(t.$el)||(e.disconnect(),e=null,t._unbindEventListener(),t._resetState())})).observe(this.$el.parentNode,{childList:!0,attributes:!1,subtree:!1})}window.onbeforeunload=function(){e&&e.disconnect(),e=null,t._unbindEventListener(),t._resetState()}}},P});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).Sortable=e()}(this,function(){"use strict";function s(t){return(s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function o(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}function i(t,e,n){e&&o(t.prototype,e),n&&o(t,n),Object.defineProperty(t,"prototype",{writable:!1})}function r(t){return function(t){if(Array.isArray(t))return a(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||function(t,e){if(t){if("string"==typeof t)return a(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);return"Map"===(n="Object"===n&&t.constructor?t.constructor.name:n)||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?a(t,e):void 0}}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function a(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,o=new Array(e);n<e;n++)o[n]=t[n];return o}function t(t){if("undefined"!=typeof window&&window.navigator)return!!navigator.userAgent.match(t)}var l=t(/(?:Trident.*rv[ :]?11\.|msie|iemobile|Windows Phone)/i),h=t(/Edge/i),f=t(/safari/i)&&!t(/chrome/i)&&!t(/android/i),e=t(/iP(ad|od|hone)/i),c=t(/chrome/i)&&t(/android/i),d={capture:!1,passive:!1},u=/\s+/g;function p(t,e,n,o){window.addEventListener?t.addEventListener(e,n,!(!o&&l)&&d):window.attachEvent&&t.attachEvent("on"+e,n)}function v(t,e,n,o){window.removeEventListener?t.removeEventListener(e,n,!(!o&&l)&&d):window.detachEvent&&t.detachEvent("on"+e,n)}function g(t){for(var e={top:0,left:0,height:0,width:0},n=(e.height=t.offsetHeight,e.width=t.offsetWidth,e.top=t.offsetTop,e.left=t.offsetLeft,t.offsetParent);null!==n;)e.top+=n.offsetTop,e.left+=n.offsetLeft,n=n.offsetParent;return e}function m(){var t=document.scrollingElement;return t||document.documentElement}function w(t){var e;if(t.getBoundingClientRect||t===window)return e={top:0,left:0,bottom:0,right:0,height:0,width:0},t!==window&&t.parentNode&&t!==m()?(t=t.getBoundingClientRect(),e.top=t.top,e.left=t.left,e.bottom=t.bottom,e.right=t.right,e.height=t.height,e.width=t.width):(e.top=0,e.left=0,e.bottom=window.innerHeight,e.right=window.innerWidth,e.height=window.innerHeight,e.width=window.innerWidth),e}function y(t,e){var n={index:-1,el:null,rect:{},offset:{}},o=r(Array.from(t.children)),t=o.indexOf(e);-1<t&&Object.assign(n,{index:t,el:o[t],rect:w(o[t]),offset:g(o[t])});for(var i=0;i<o.length;i++)if(function(t,e){var n;if(t&&e)for(n=t.parentNode;n;){if(e===n)return 1;n=n.parentNode}return}(e,o[i])){Object.assign(n,{index:i,el:o[i],rect:w(o[i]),offset:g(o[i])});break}return n}function b(t,e,n){var o;t&&e&&(t.classList?t.classList[n?"add":"remove"](e):(o=(" "+t.className+" ").replace(u," ").replace(" "+e+" "," "),t.className=(o+(n?" "+e:"")).replace(u," ")))}function _(t,e,n){var o=t&&t.style;if(o){if(void 0===n)return document.defaultView&&document.defaultView.getComputedStyle?n=document.defaultView.getComputedStyle(t,""):t.currentStyle&&(n=t.currentStyle),void 0===e?n:n[e];o[e=e in o||-1!==e.indexOf("webkit")?e:"-webkit-"+e]=n+("string"==typeof n?"":"px")}}var E=["-webkit-transition","-moz-transition","-ms-transition","-o-transition","transition"],S=["-webkit-transform","-moz-transform","-ms-transform","-o-transform","transform"];function D(){var o=[];return{captureAnimationState:function(){var t=r(Array.from(this.$el.children)),e=function(t,e,n){e=t.indexOf(e),t=t.indexOf(n);return e<t?{start:e,end:t}:{start:t,end:e}}(t,this.dragEl,this.dropEl),n=e.start,e=e.end;o.length=0,t.slice(n,e+1).forEach(function(t){o.push({target:t,rect:w(t)})})},animateRange:function(){var n=this;o.forEach(function(t){var e=t.target,t=t.rect;n.animate(e,t,n.animation)})},animate:function(e,t){var n=2<arguments.length&&void 0!==arguments[2]?arguments[2]:150,o=w(e),i=t.left-o.left,r=t.top-o.top;E.forEach(function(t){return _(e,t,"none")}),S.forEach(function(t){return _(e,t,"".concat(t.split("transform")[0],"translate3d(").concat(i,"px, ").concat(r,"px, 0)"))}),e.offsetLeft,E.forEach(function(t){return _(e,t,"".concat(t.split("transition")[0],"transform ").concat(n,"ms"))}),S.forEach(function(t){return _(e,t,"".concat(t.split("transform")[0],"translate3d(0px, 0px, 0px)"))}),clearTimeout(e.animated),e.animated=setTimeout(function(){E.forEach(function(t){return _(e,t,"")}),S.forEach(function(t){return _(e,t,"")}),e.animated=null},n)}}}var $=function(){function t(){n(this,t),this._old_={node:null,rect:{},offset:{}},this._new_={node:null,rect:{},offset:{}}}return i(t,[{key:"get",value:function(t){return this[t]}},{key:"set",value:function(t,e){this[t]=e}},{key:"destroy",value:function(){this._old_={node:null,rect:{},offset:{}},this._new_={node:null,rect:{},offset:{}}}}]),t}(),x=function(){function e(t){n(this,e),this.options=t,this.x=0,this.y=0,this.exist=!1}return i(e,[{key:"init",value:function(t,e){var n,o;t&&(this.$el=t,n=(t=this.options).ghostClass,t=void 0===(t=t.ghostStyle)?{}:t,o=e.width,e=e.height,this.$el.class=n,this.$el.style.width=o+"px",this.$el.style.height=e+"px",this.$el.style.transform="",this.$el.style.transition="",this.$el.style.position="fixed",this.$el.style.left=0,this.$el.style.top=0,this.$el.style.zIndex=1e5,this.$el.style.opacity=.8,this.$el.style.pointerEvents="none",this.$el.style.cursor="move",this.setStyle(t))}},{key:"get",value:function(t){return this[t]}},{key:"set",value:function(t,e){this[t]=e,this[t]=e}},{key:"setStyle",value:function(t){for(var e in t)_(this.$el,e,t[e])}},{key:"rect",value:function(){return this.$el.getBoundingClientRect()}},{key:"move",value:function(t){var e=this.options.ghostAnimation;this.$el.style.transition=t?"all ".concat(e,"ms"):"",this.exist||(document.body.appendChild(this.$el),this.exist=!0),this.$el.style.transform="translate3d(".concat(this.x,"px, ").concat(this.y,"px, 0)"),"move"!==this.$el.style.cursor&&(this.$el.style.cursor="move")}},{key:"destroy",value:function(t){var e=this;t&&(this.x=t.left,this.y=t.top,this.move(!0)),setTimeout(function(){e.$el&&e.$el.remove(),e.$el=null,e.x=0,e.y=0,e.exist=!1},this.options.ghostAnimation)}}]),e}(),O="undefined"!=typeof document&&!c&&!e&&"draggable"in document.createElement("div");function P(t,e){if(!t||!t.nodeType||1!==t.nodeType)throw"Sortable: `el` must be an HTMLElement, not ".concat({}.toString.call(t));this.$el=t,this.options=e=Object.assign({},e),this.scrollEl=function(t,e){if(!t||!t.getBoundingClientRect)return m();var n=t,o=!1;do{if(n.clientWidth<n.scrollWidth||n.clientHeight<n.scrollHeight){var i=_(n);if(n.clientWidth<n.scrollWidth&&("auto"==i.overflowX||"scroll"==i.overflowX)||n.clientHeight<n.scrollHeight&&("auto"==i.overflowY||"scroll"==i.overflowY)){if(!n.getBoundingClientRect||n===document.body)return m();if(o||e)return n;o=!0}}}while(n=n.parentNode);return m()}(this.$el,!0),this.dragEl=null,this.dropEl=null,this.differ=null,this.ghost=null;var n,o,i={delay:0,delayOnTouchOnly:!(this.calcXY={x:0,y:0}),disabled:!1,animation:150,ghostAnimation:0,ghostClass:"",ghostStyle:{},chosenClass:"",draggable:void 0,dragging:void 0,dragEnd:void 0,forceFallback:!1,stopPropagation:!1,supportPassive:(n=!1,document.addEventListener("checkIfSupportPassive",null,{get passive(){return n=!0}}),n),supportPointer:"PointerEvent"in window&&!f,supportTouch:"ontouchstart"in window,ownerDocument:this.$el.ownerDocument};for(o in i)o in this.options||(this.options[o]=i[o]);this.nativeDraggable=!this.options.forceFallback&&O,this.differ=new $,this.ghost=new x(this.options),Object.assign(this,D(),{_bindEventListener:function(){this._onStart=this._onStart.bind(this),this._onMove=this._onMove.bind(this),this._onDrop=this._onDrop.bind(this);var t=this.options,e=t.supportPointer,n=t.supportTouch,t=t.supportPassive;p(this.$el,e?"pointerdown":n?"touchstart":"mousedown",this._onStart,t),this.nativeDraggable&&(p(this.$el,"dragover",this),p(this.$el,"dragenter",this))},_unbindEventListener:function(){var t=this.options.supportPassive;v(this.$el,"pointerdown",this._onStart,t),v(this.$el,"touchstart",this._onStart,t),v(this.$el,"mousedown",this._onStart,t),this.nativeDraggable&&(v(this.$el,"dragover",this),v(this.$el,"dragenter",this))},_onMoveEvents:function(t){var e=this.options,n=e.supportPointer,o=e.ownerDocument,e=e.supportPassive;p(o,n?"pointermove":t?"touchmove":"mousemove",this._onMove,e)},_onUpEvents:function(){var t=this.options,e=t.ownerDocument,t=t.supportPassive;p(e,"pointerup",this._onDrop,t),p(e,"pointercancel",this._onDrop,t),p(e,"touchend",this._onDrop,t),p(e,"touchcancel",this._onDrop,t),p(e,"mouseup",this._onDrop,t)},_offMoveEvents:function(){var t=this.options,e=t.ownerDocument,t=t.supportPassive;v(e,"pointermove",this._onMove,t),v(e,"touchmove",this._onMove,t),v(e,"mousemove",this._onMove,t)},_offUpEvents:function(){var t=this.options,e=t.ownerDocument,t=t.supportPassive;v(e,"pointerup",this._onDrop,t),v(e,"pointercancel",this._onDrop,t),v(e,"touchend",this._onDrop,t),v(e,"touchcancel",this._onDrop,t),v(e,"mouseup",this._onDrop,t)}}),this._bindEventListener(),this._handleDestroy()}return P.prototype={constructor:P,destroy:function(){this._unbindEventListener(),this._resetState()},_onStart:function(t){var e=this.options,n=e.delay,o=e.disabled,i=e.stopPropagation,e=e.delayOnTouchOnly;if(!(/mousedown|pointerdown/.test(t.type)&&0!==t.button||o)){var o=t.touches&&t.touches[0]||t.pointerType&&"touch"===t.pointerType&&t,r=o||t;if(this.nativeDraggable||!f||!r.target||"SELECT"!==r.target.tagName.toUpperCase()){if(r.target===this.$el)return!0;void 0!==t.preventDefault&&t.preventDefault(),i&&t.stopPropagation(),!n||e&&!o||this.nativeDraggable&&(h||l)?this._onDrag(r,o):this.dragStartTimer=setTimeout(this._onDrag(r,o),n)}}},_onDrag:function(t,e){var n=this.options,o=n.dragging,n=n.draggable;if("function"==typeof n){if(!n(t))return!0}else if("string"==typeof n){if(!function(t,e){if(e&&(">"===e[0]&&(e=e.substring(1)),t))try{if(t.matches)return t.matches(e);if(t.msMatchesSelector)return t.msMatchesSelector(e);if(t.webkitMatchesSelector)return t.webkitMatchesSelector(e)}catch(t){return}}(t.target,n))return!0}else if(void 0!==n)throw new Error('draggable expected "function" or "string" but received "'.concat(s(n),'"'));try{document.selection?setTimeout(function(){document.selection.empty()},0):window.getSelection().removeAllRanges();var i="function"==typeof o?o(t):y(this.$el,t.target).el;if(!i)return!0;if(i.animated)return;this.dragEl=i}catch(t){throw new Error(t)}window.sortableDndOnDown=!0;var n=y(this.$el,this.dragEl),o=n.index,i=n.el,r=n.rect,n=n.offset;if(!i||o<0)return!0;this.ghost.set("x",r.left),this.ghost.set("y",r.top),this.differ._old_.rect=r,this.differ._old_.offset=n,this.differ._old_.node=this.dragEl,this.calcXY={x:t.clientX,y:t.clientY},this._onMoveEvents(e),this._onUpEvents(e)},_onMove:function(t){void 0!==t.preventDefault&&t.preventDefault(),this.ghost.$el||(e=this.dragEl.cloneNode(!0),this.ghost.init(e,this.differ._old_.rect));var e=t.touches&&t.touches[0],n=e||t,o=n.clientX,i=n.clientY,e=e?document.elementFromPoint(o,i):n.target,n=this.options,r=n.chosenClass,n=n.stopPropagation;if(n&&t.stopPropagation(),b(this.dragEl,r,!0),this.ghost.move(),window.sortableDndOnDown&&!(o<0||i<0)){window.sortableDndOnMove=!0,this.ghost.set("x",this.ghost.x+o-this.calcXY.x),this.ghost.set("y",this.ghost.y+i-this.calcXY.y),this.calcXY={x:o,y:i},this.ghost.move();n=w(this.$el);if(o<n.left||o>n.right||i<n.top||i>n.bottom)this.ghost.setStyle({cursor:"not-allowed"});else{var t=y(this.$el,e),r=t.index,e=t.el,s=t.rect,t=t.offset,a=s.left,l=s.right,h=s.top,s=s.bottom;if(!(!e||r<0||h<0)){var r=this.scrollEl,f=r.scrollTop,r=r.scrollLeft,r=n.left+r,f=n.top+f;if(this.scrollEl!==this.$el&&(n.left<0||n.top<0)){if(n.top<0&&h<f||n.left<0&&a<r)return}else if(h<n.top||a<n.left)return;a<o&&o<l&&h<i&&i<s&&(this.dropEl=e,this.dropEl===this.dragEl||this.dropEl.animated||(this.captureAnimationState(),(f=g(this.dragEl)).top<t.top||f.left<t.left?this.$el.insertBefore(this.dragEl,this.dropEl.nextElementSibling):this.$el.insertBefore(this.dragEl,this.dropEl),this.animateRange(),this.differ._new_.node=this.dropEl,this.differ._new_.rect=w(this.dropEl)))}}}},_onDrop:function(t){this._offMoveEvents(),this._offUpEvents(),clearTimeout(this.dragStartTimer);var e=this.options,n=e.dragEnd,o=e.chosenClass;if(e.stopPropagation&&t.stopPropagation(),b(this.dragEl,o,!1),window.sortableDndOnDown&&window.sortableDndOnMove){this.differ._new_.offset=g(this.dragEl);e=this.differ,t=e._old_,o=e._new_,e=t.offset.top!==o.offset.top||t.offset.left!==o.offset.left;if(e||(this.differ._new_.node=this.differ._old_.node,this.differ._new_.rect=this.differ._old_.rect),"function"!=typeof n)throw new Error('Sortable-dnd Error: dragEnd expected "function" but received "'.concat(s(n),'"'));n(t,o,e),this.ghost.destroy(w(this.dragEl))}this.differ.destroy(),this._removeWindowState()},_resetState:function(){this.dragEl=null,this.dropEl=null,this.ghost.destroy(),this.differ.destroy(),this.calcXY={x:0,y:0},this._removeWindowState()},_removeWindowState:function(){window.sortableDndOnDown=null,window.sortableDndOnMove=null,delete window.sortableDndOnDown,delete window.sortableDndOnMove},_handleDestroy:function(){var t=this,e=null,n=window.MutationObserver||window.WebKitMutationObserver||window.MozMutationObserver;if(n){var o=this.options.ownerDocument;if(!o)return;(e=new n(function(){o.body.contains(t.$el)||(e.disconnect(),e=null,t._unbindEventListener(),t._resetState())})).observe(this.$el.parentNode,{childList:!0,attributes:!1,subtree:!1})}window.onbeforeunload=function(){e&&e.disconnect(),e=null,t._unbindEventListener(),t._resetState()}}},P});

package.json

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

README.md

@@ -61,15 +61,17 @@ <p>
 
-| **option** | **type** | **default** | **Description** |
-|-------------|--------------|--------------|--------------|
-| `disabled`  | `Boolean` | `false` | Disables the sortable if set to true |
-| `draggable` | `String/Function` | `undefined` | Specifies which items inside the element should be draggable, the function type must return a boolean |
-| `dragging` | `Function` | `undefined` | Specifies the drag element, which must return an HTMLElement, such as `(e) => e.target` |
-| `dragEnd` | `Function` | `undefined` | The callback function when the drag is completed, such as `(old, new, changed) => {}` |
-| `ghostStyle` | `Object` | `{}` | The style of the mask element when dragging |
-| `ghostClass` | `String` | `''` | The class of the mask element when dragging |
-| `chosenClass` | `String` | `{}` | The class of the selected element when dragging |
-| `animation` | `Number` | `150` | Animation delay |
-| `ghostAnimation` | `Number` | `0` | Ghost element animation delay before destroyed |
-| `forceFallback` | `Boolean` | `false` | true: ignore the HTML5 DnD behaviour and force the fallback to kick in |
-| `stopPropagation` | `Boolean` | `false` | The `stopPropagation()` method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases |
+|     **option**    |      **type**     | **default** | **Description** |
+|-------------------|-------------------|-------------|--------------|
+| `disabled`        | `Boolean`         | `false`     | Disables the sortable if set to true |
+| `draggable`       | `String/Function` | `undefined` | Specifies which items inside the element should be draggable, the function type must return a boolean |
+| `dragging`        | `Function`        | `undefined` | Specifies the drag element, which must return an HTMLElement, such as `(e) => e.target` |
+| `dragEnd`         | `Function`        | `undefined` | The callback function when the drag is completed, such as `(old, new, changed) => {}` |
+| `ghostStyle`      | `Object`          | `{}`        | The style of the mask element when dragging |
+| `ghostClass`      | `String`          | `''`        | The class of the mask element when dragging |
+| `chosenClass`     | `String`          | `{}`        | The class of the selected element when dragging |
+| `delay`           | `Number`          | `0`         | time in milliseconds to define when the sorting should start |
+| `delayOnTouchOnly`| `Boolean`         | `false`     | only delay if user is using touch |
+| `animation`       | `Number`          | `150`       | Animation speed moving items when sorting |
+| `ghostAnimation`  | `Number`          | `0`         | Ghost element animation delay before destroyed |
+| `forceFallback`   | `Boolean`         | `false`     | true: ignore the HTML5 DnD behaviour and force the fallback to kick in |
+| `stopPropagation` | `Boolean`         | `false`     | The `stopPropagation()` method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases |
 
@@ -76,0 +78,0 @@ # Methods

src/Events.js

@@ -18,2 +18,7 @@ import { on, off } from './utils.js'
       }
+
+      if (this.nativeDraggable) {
+        on(this.$el, 'dragover', this)
+        on(this.$el, 'dragenter', this)
+      }
     },
@@ -20,0 +25,0 @@

src/Sortable.js

 import {
-  on,
   css,
@@ -13,3 +12,3 @@ matches,
 } from './utils.js'
-import { IOS, Safari, ChromeForAndroid } from './Brower.js'
+import { IOS, Edge, Safari, IE11OrLess, ChromeForAndroid } from './Brower.js'
 import Animation from './Animation.js'
@@ -114,2 +113,5 @@ import Events from './events.js'
       if (this.$el) this.$el.remove()
+      this.$el = null
+      this.x = 0
+      this.y = 0
       this.exist = false
@@ -146,4 +148,6 @@ }, this.options.ghostAnimation)
   const defaults = {
-    disabled: false, // 
-    animation: 150, // 动画延时
+    delay: 0, // 定义鼠标选中列表单元可以开始拖动的延迟时间
+    delayOnTouchOnly: false, // only delay if user is using touch
+    disabled: false, // 定义是否此sortable对象是否可用，为true时sortable对象不能拖放排序等功能，为false时为可以进行排序，相当于一个开关
+    animation: 150, // 定义排序动画的时间
 
@@ -173,2 +177,4 @@ ghostAnimation: 0, // 拖拽元素销毁时动画效果
 
+  this.nativeDraggable = this.options.forceFallback ? false : supportDraggable
+
   this.differ = new Differ()
@@ -181,9 +187,2 @@ this.ghost = new Ghost(this.options)
 
-  this.nativeDraggable = this.options.forceFallback ? false : supportDraggable
-
-  if (this.nativeDraggable) {
-    on(this.$el, 'dragover', this)
-    on(this.$el, 'dragenter', this)
-  }
-
   this._handleDestroy()
@@ -202,4 +201,3 @@ }
   _onStart: function(/** Event|TouchEvent */evt) {
-    const { disabled, dragging, draggable, stopPropagation } = this.options
-
+    const { delay, disabled, stopPropagation, delayOnTouchOnly } = this.options
     if (/mousedown|pointerdown/.test(evt.type) && evt.button !== 0 || disabled) return // only left button and enabled
@@ -212,5 +210,16 @@
 		if (!this.nativeDraggable && Safari && e.target && e.target.tagName.toUpperCase() === 'SELECT') return
-
     if (e.target === this.$el) return true
 
+    if (evt.preventDefault !== void 0) evt.preventDefault()
+    if (stopPropagation) evt.stopPropagation()
+
+    if (delay && (!delayOnTouchOnly || touch) && (!this.nativeDraggable || !(Edge || IE11OrLess))) {
+      this.dragStartTimer = setTimeout(this._onDrag(e, touch), delay)
+    } else {
+      this._onDrag(e, touch)
+    }
+  },
+  _onDrag: function(/** Event|TouchEvent */e, touch) {
+    const { dragging, draggable } = this.options
+
     if (typeof draggable === 'function') {
@@ -226,5 +235,2 @@ if (!draggable(e)) return true
 
-    if (evt.preventDefault !== void 0) evt.preventDefault()
-    if (stopPropagation) evt.stopPropagation()
-
     try {
@@ -258,5 +264,2 @@ if (document.selection) {
 
-    // 将拖拽元素克隆一份作为蒙版
-    const ghostEl = this.dragEl.cloneNode(true)
-    this.ghost.init(ghostEl, rect)
     this.ghost.set('x', rect.left)
@@ -277,2 +280,9 @@ this.ghost.set('y', rect.top)
 
+    // 将初始化放到move事件中，防止与click事件冲突
+    if (!this.ghost.$el) {
+      // 将拖拽元素克隆一份作为蒙版
+      const ghostEl = this.dragEl.cloneNode(true)
+      this.ghost.init(ghostEl, this.differ._old_.rect)
+    }
+
     const touch = evt.touches && evt.touches[0]
@@ -351,2 +361,3 @@ const e = touch || evt
     this._offUpEvents()
+    clearTimeout(this.dragStartTimer)
 
@@ -381,5 +392,5 @@ const { dragEnd, chosenClass, stopPropagation } = this.options
       }
+
+      this.ghost.destroy(getRect(this.dragEl))
     }
-
-    this.ghost.destroy(getRect(this.dragEl))
     this.differ.destroy()
@@ -386,0 +397,0 @@ this._removeWindowState()

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

79713

increased by3.6%

Lines of code

1703

increased by2.53%

Number of lines in readme file

81

increased by2.53%

No dependency changes