sortable-dnd - npm Package Compare versions

Comparing version 0.0.10 to 0.0.11

dist/sortable.js

 /*!
- * sortable-dnd v0.0.10
+ * sortable-dnd v0.0.11
  * open source under the MIT license
@@ -48,6 +48,2 @@ * https://github.com/mfuu/sortable-dnd#readme
 
-  function _readOnlyError(name) {
-    throw new TypeError("\"" + name + "\" is read-only");
-  }
-
   function _toConsumableArray(arr) {
@@ -532,2 +528,9 @@ return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
     _createClass(Sortable, [{
+      key: "destroy",
+      value: function destroy() {
+        this._unbindEventListener();
+
+        this._resetState();
+      }
+    }, {
       key: "init",
@@ -568,25 +571,29 @@ value: function init() {
 
+        var observer = null;
         var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
-        var observer = new MutationObserver(function (mutationList) {
-          if (!_this.$el) {
-            observer.disconnect();
-            _readOnlyError("observer");
 
-            _this._unbindEventListener();
+        if (MutationObserver) {
+          observer = new MutationObserver(function () {
+            if (!_this.$el) {
+              observer.disconnect();
+              observer = null;
 
-            _this._resetState();
-          }
-        });
-        observer.observe(this.$el.parentNode, {
-          childList: true,
-          // 观察目标子节点的变化，是否有添加或者删除
-          attributes: false,
-          // 观察属性变动
-          subtree: false // 观察后代节点，默认为 false
+              _this._unbindEventListener();
 
-        });
+              _this._resetState();
+            }
+          });
+          observer.observe(this.$el.parentNode, {
+            childList: true,
+            // 观察目标子节点的变化，是否有添加或者删除
+            attributes: false,
+            // 观察属性变动
+            subtree: false // 观察后代节点，默认为 false
 
+          });
+        }
+
         window.onbeforeunload = function () {
           if (observer) observer.disconnect();
-          _readOnlyError("observer");
+          observer = null;
 
@@ -768,2 +775,6 @@ _this._unbindEventListener();
         this.diff.destroy();
+        this.calcXY = {
+          x: 0,
+          y: 0
+        };
 
@@ -770,0 +781,0 @@ this._removeWindowState();

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 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 i(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 r(t,e,n){e&&i(t.prototype,e),n&&i(t,n),Object.defineProperty(t,"prototype",{writable:!1})}function l(t){throw new TypeError('"'+t+'" is read-only')}function a(t){return function(t){if(Array.isArray(t))return h(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 h(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)?h(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 h(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 c=t(/(?:Trident.*rv[ :]?11\.|msie|iemobile|Windows Phone)/i),u=t(/safari/i)&&!t(/chrome/i)&&!t(/android/i),d={capture:!1,passive:!1},f=/\s+/g,p={on:function(t,e,n){window.addEventListener?t.addEventListener(e,n,!c&&d):window.attachEvent&&t.addEventListener("on"+e,n)},off:function(t,e,n){window.removeEventListener?t.removeEventListener(e,n,!c&&d):window.detachEvent&&t.detachEvent("on"+e,n)},getWindowScrollingElement:function(){var t=document.scrollingElement;return t||document.documentElement},index:function(t,e){return e&&e.parentNode?a(Array.from(t.children)).indexOf(e):-1},getRect:function(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!==this.getWindowScrollingElement()?(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},getElement:function(t,e){var n={index:-1,el:null,rect:{}},o=a(Array.from(t.children)),t=o.indexOf(e);-1<t&&Object.assign(n,{index:t,el:o[t],rect:this.getRect(o[t])});for(var i=0;i<o.length;i++)this.isChildOf(e,o[i])&&Object.assign(n,{index:i,el:o[i],rect:this.getRect(o[i])});return n},isChildOf:function(t,e){var n;if(t&&e)for(n=t.parentNode;n;){if(e===n)return!0;n=n.parentNode}return!1},toggleClass:function(t,e,n){var o;t&&e&&(t.classList?t.classList[n?"add":"remove"](e):(o=(" "+t.className+" ").replace(f," ").replace(" "+e+" "," "),t.className=(o+(n?" "+e:"")).replace(f," ")))},matches:function(t,e){if(e){if(">"===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!1}return!1}},css: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")}},debounce:function(i,r){return function(){for(var t=this,e=arguments.length,n=new Array(e),o=0;o<e;o++)n[o]=arguments[o];clearTimeout(i.id),i.id=setTimeout(function(){i.call.apply(i,[t].concat(n))},r)}},_nextTick:function(t){return setTimeout(t,0)}};function v(){var o=[];return{captureAnimationState:function(){var t=a(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:p.getRect(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(t,e){var n=2<arguments.length&&void 0!==arguments[2]?arguments[2]:150,o=p.getRect(t),i=e.left-o.left,e=e.top-o.top;p.css(t,"transition","none"),p.css(t,"transform","translate3d(".concat(i,"px, ").concat(e,"px, 0)")),t.offsetLeft,p.css(t,"transition","all ".concat(n,"ms")),p.css(t,"transform","translate3d(0px, 0px, 0px)"),clearTimeout(t.animated),t.animated=setTimeout(function(){p.css(t,"transition",""),p.css(t,"transform",""),t.animated=null},n)}}}var g=function(){function t(){o(this,t),this.old={node:null,rect:{}},this.new={node:null,rect:{}}}return r(t,[{key:"get",value:function(t){return this[t]}},{key:"set",value:function(t,e){this[t]=e}},{key:"destroy",value:function(){this.old={node:null,rect:{}},this.new={node:null,rect:{}}}}]),t}(),m=function(){function e(t){o(this,e),this.options=t,this.x=0,this.y=0,this.exist=!1}return r(e,[{key:"init",value:function(t,e){if(t){this.$el=t,this.rect=e;var n,t=this.options,o=t.ghostClass,t=t.ghostStyle,i=void 0===t?{}:t,t=e.width,e=e.height;for(n in this.$el.class=o,this.$el.style.width=t+"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",i)p.css(this.$el,n,i[n])}}},{key:"get",value:function(t){return this[t]}},{key:"set",value:function(t,e){this[t]=e,this[t]=e}},{key:"move",value:function(){this.exist||(document.body.appendChild(this.$el),this.exist=!0),this.$el.style.transform="translate3d(".concat(this.x,"px, ").concat(this.y,"px, 0)")}},{key:"destroy",value:function(){this.$el&&this.$el.remove(),this.exist=!1}}]),e}();return function(){function n(t,e){if(o(this,n),!t)throw new Error("container element is required");this.$el=t,this.options=e=Object.assign({},e),this.dragEl=null,this.dropEl=null,this.diff=null,this.ghost=null,this.calcXY={x:0,y:0},p.debounce(this.init(),50)}return r(n,[{key:"init",value:function(){var t,e={animation:150,ghostClass:"",ghostStyle:{},chosenClass:"",draggable:void 0,dragging:null,dragEnd:null,supportPointer:"PointerEvent"in window&&!u,ownerDocument:this.$el.ownerDocument};for(t in e)t in this.options||(this.options[t]=e[t]);this.diff=new g,this.ghost=new m(this.options),Object.assign(this,v()),this._bindEventListener(),this._handleDestroy()}},{key:"_handleDestroy",value:function(){var e=this,n=new(window.MutationObserver||window.WebKitMutationObserver)(function(t){e.$el||(n.disconnect(),l("observer"),e._unbindEventListener(),e._resetState())});n.observe(this.$el.parentNode,{childList:!0,attributes:!1,subtree:!1}),window.onbeforeunload=function(){n&&n.disconnect(),l("observer"),e._unbindEventListener(),e._resetState()}}},{key:"_onStart",value:function(t){var e=this.options,n=e.dragging,e=e.draggable,o=t.touches&&t.touches[0]||t.pointerType&&"touch"===t.pointerType&&t,i=(o||t).target;if("function"==typeof e){if(!e(o||t))return!0}else if("string"==typeof e){if(!p.matches(i,e))return!0}else if(void 0!==e)throw new Error('draggable expected "function" or "string" but received "'.concat(s(e),'"'));if(!/mousedown|pointerdown/.test(t.type)||0===t.button){if(i===this.$el)return!0;try{document.selection?p._nextTick(function(){document.selection.empty()}):window.getSelection().removeAllRanges();var r=n&&"function"==typeof n?n(o||t):p.getElement(this.$el,i).el;if(!r)return!0;if(r.animated)return;this.dragEl=r}catch(t){throw new Error(t)}window.sortableDndOnDown=!0;e=p.getElement(this.$el,this.dragEl),n=e.index,i=e.el,r=e.rect;if(!i||n<0)return!0;e=this.dragEl.cloneNode(!0);this.ghost.init(e,r),this.ghost.set("x",r.left),this.ghost.set("y",r.top),this.diff.old.rect=r,this.calcXY={x:(o||t).clientX,y:(o||t).clientY},this._onMoveEvents(o),this._onUpEvents(o)}}},{key:"_onMove",value:function(t){t.preventDefault();var e=t.touches&&t.touches[0],t=e||t,n=t.clientX,o=t.clientY,e=e?document.elementFromPoint(n,o):t.target,i=this.options.chosenClass;if(p.toggleClass(this.dragEl,i,!0),this.ghost.move(),window.sortableDndOnDown&&!(n<0||o<0)){document.body.style.cursor="grabbing",window.sortableDndOnMove=!0,this.ghost.set("x",this.ghost.x+n-this.calcXY.x),this.ghost.set("y",this.ghost.y+o-this.calcXY.y),this.calcXY={x:n,y:o},this.ghost.move(),this._checkRange(t);var i=p.getElement(this.$el,e),t=i.index,e=i.el,i=i.rect,r=i.left,s=i.right,l=i.top,i=i.bottom;if(!(!e||t<0||l<0)&&r<n&&n<s&&l<o&&o<i){if(this.dropEl=e,this.dropEl!==this.dragEl){if(this.dropEl.animated)return;this.captureAnimationState(),p.index(this.$el,this.dragEl)<t?this.$el.insertBefore(this.dragEl,this.dropEl.nextElementSibling):this.$el.insertBefore(this.dragEl,this.dropEl),this.animateRange(),this.diff.old.node=this.dragEl,this.diff.new.node=this.dropEl}this.diff.new.rect=p.getRect(this.dropEl)}}}},{key:"_onDrop",value:function(){this._offMoveEvents(),this._offUpEvents(),document.body.style.cursor="";var t=this.options,e=t.dragEnd,t=t.chosenClass;if(p.toggleClass(this.dragEl,t,!1),window.sortableDndOnDown&&window.sortableDndOnMove){if("function"!=typeof e)throw new Error('Sortable-dnd Error: dragEnd expected "function" but received "'.concat(s(e),'"'));e(this.diff.old,this.diff.new)}this.diff.destroy(),this.ghost.destroy(),this._removeWindowState()}},{key:"_checkRange",value:function(t){var e=p.getRect(this.$el),n=e.top,o=e.left,i=e.right,e=e.bottom;(t.clientX<o||t.clientX>i||t.clientY<n||t.clientY>e)&&(document.body.style.cursor="not-allowed")}},{key:"_resetState",value:function(){this.dragEl=null,this.dropEl=null,this.ghost.destroy(),this.diff.destroy(),this._removeWindowState()}},{key:"_removeWindowState",value:function(){window.sortableDndOnDown=null,window.sortableDndOnMove=null,delete window.sortableDndOnDown,delete window.sortableDndOnMove}},{key:"_bindEventListener",value:function(){this._onStart=this._onStart.bind(this),this._onMove=this._onMove.bind(this),this._onDrop=this._onDrop.bind(this),this.options.supportPointer?p.on(this.$el,"pointerdown",this._onStart):(p.on(this.$el,"mousedown",this._onStart),p.on(this.$el,"touchstart",this._onStart))}},{key:"_unbindEventListener",value:function(){p.off(this.$el,"pointerdown",this._onStart),p.off(this.$el,"touchstart",this._onStart),p.off(this.$el,"mousedown",this._onStart)}},{key:"_onMoveEvents",value:function(t){var e=this.options,n=e.supportPointer,e=e.ownerDocument;n?p.on(e,"pointermove",this._onMove):t?p.on(e,"touchmove",this._onMove):p.on(e,"mousemove",this._onMove)}},{key:"_onUpEvents",value:function(){var t=this.options.ownerDocument;p.on(t,"pointerup",this._onDrop),p.on(t,"touchend",this._onDrop),p.on(t,"touchcancel",this._onDrop),p.on(t,"mouseup",this._onDrop)}},{key:"_offMoveEvents",value:function(){var t=this.options.ownerDocument;p.off(t,"pointermove",this._onMove),p.off(t,"touchmove",this._onMove),p.off(t,"mousemove",this._onMove)}},{key:"_offUpEvents",value:function(){var t=this.options.ownerDocument;p.off(t,"mouseup",this._onDrop),p.off(t,"touchend",this._onDrop),p.off(t,"touchcancel",this._onDrop),p.off(t,"pointerup",this._onDrop)}}]),n}()});
+!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 i(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 r(t,e,n){e&&i(t.prototype,e),n&&i(t,n),Object.defineProperty(t,"prototype",{writable:!1})}function l(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 h=t(/(?:Trident.*rv[ :]?11\.|msie|iemobile|Windows Phone)/i),c=t(/safari/i)&&!t(/chrome/i)&&!t(/android/i),u={capture:!1,passive:!1},d=/\s+/g,f={on:function(t,e,n){window.addEventListener?t.addEventListener(e,n,!h&&u):window.attachEvent&&t.addEventListener("on"+e,n)},off:function(t,e,n){window.removeEventListener?t.removeEventListener(e,n,!h&&u):window.detachEvent&&t.detachEvent("on"+e,n)},getWindowScrollingElement:function(){var t=document.scrollingElement;return t||document.documentElement},index:function(t,e){return e&&e.parentNode?l(Array.from(t.children)).indexOf(e):-1},getRect:function(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!==this.getWindowScrollingElement()?(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},getElement:function(t,e){var n={index:-1,el:null,rect:{}},o=l(Array.from(t.children)),t=o.indexOf(e);-1<t&&Object.assign(n,{index:t,el:o[t],rect:this.getRect(o[t])});for(var i=0;i<o.length;i++)this.isChildOf(e,o[i])&&Object.assign(n,{index:i,el:o[i],rect:this.getRect(o[i])});return n},isChildOf:function(t,e){var n;if(t&&e)for(n=t.parentNode;n;){if(e===n)return!0;n=n.parentNode}return!1},toggleClass:function(t,e,n){var o;t&&e&&(t.classList?t.classList[n?"add":"remove"](e):(o=(" "+t.className+" ").replace(d," ").replace(" "+e+" "," "),t.className=(o+(n?" "+e:"")).replace(d," ")))},matches:function(t,e){if(e){if(">"===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!1}return!1}},css: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")}},debounce:function(i,r){return function(){for(var t=this,e=arguments.length,n=new Array(e),o=0;o<e;o++)n[o]=arguments[o];clearTimeout(i.id),i.id=setTimeout(function(){i.call.apply(i,[t].concat(n))},r)}},_nextTick:function(t){return setTimeout(t,0)}};function p(){var o=[];return{captureAnimationState:function(){var t=l(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:f.getRect(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(t,e){var n=2<arguments.length&&void 0!==arguments[2]?arguments[2]:150,o=f.getRect(t),i=e.left-o.left,e=e.top-o.top;f.css(t,"transition","none"),f.css(t,"transform","translate3d(".concat(i,"px, ").concat(e,"px, 0)")),t.offsetLeft,f.css(t,"transition","all ".concat(n,"ms")),f.css(t,"transform","translate3d(0px, 0px, 0px)"),clearTimeout(t.animated),t.animated=setTimeout(function(){f.css(t,"transition",""),f.css(t,"transform",""),t.animated=null},n)}}}var v=function(){function t(){o(this,t),this.old={node:null,rect:{}},this.new={node:null,rect:{}}}return r(t,[{key:"get",value:function(t){return this[t]}},{key:"set",value:function(t,e){this[t]=e}},{key:"destroy",value:function(){this.old={node:null,rect:{}},this.new={node:null,rect:{}}}}]),t}(),g=function(){function e(t){o(this,e),this.options=t,this.x=0,this.y=0,this.exist=!1}return r(e,[{key:"init",value:function(t,e){if(t){this.$el=t,this.rect=e;var n,t=this.options,o=t.ghostClass,t=t.ghostStyle,i=void 0===t?{}:t,t=e.width,e=e.height;for(n in this.$el.class=o,this.$el.style.width=t+"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",i)f.css(this.$el,n,i[n])}}},{key:"get",value:function(t){return this[t]}},{key:"set",value:function(t,e){this[t]=e,this[t]=e}},{key:"move",value:function(){this.exist||(document.body.appendChild(this.$el),this.exist=!0),this.$el.style.transform="translate3d(".concat(this.x,"px, ").concat(this.y,"px, 0)")}},{key:"destroy",value:function(){this.$el&&this.$el.remove(),this.exist=!1}}]),e}();return function(){function n(t,e){if(o(this,n),!t)throw new Error("container element is required");this.$el=t,this.options=e=Object.assign({},e),this.dragEl=null,this.dropEl=null,this.diff=null,this.ghost=null,this.calcXY={x:0,y:0},f.debounce(this.init(),50)}return r(n,[{key:"destroy",value:function(){this._unbindEventListener(),this._resetState()}},{key:"init",value:function(){var t,e={animation:150,ghostClass:"",ghostStyle:{},chosenClass:"",draggable:void 0,dragging:null,dragEnd:null,supportPointer:"PointerEvent"in window&&!c,ownerDocument:this.$el.ownerDocument};for(t in e)t in this.options||(this.options[t]=e[t]);this.diff=new v,this.ghost=new g(this.options),Object.assign(this,p()),this._bindEventListener(),this._handleDestroy()}},{key:"_handleDestroy",value:function(){var t=this,e=null,n=window.MutationObserver||window.WebKitMutationObserver;n&&(e=new n(function(){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()}}},{key:"_onStart",value:function(t){var e=this.options,n=e.dragging,e=e.draggable,o=t.touches&&t.touches[0]||t.pointerType&&"touch"===t.pointerType&&t,i=(o||t).target;if("function"==typeof e){if(!e(o||t))return!0}else if("string"==typeof e){if(!f.matches(i,e))return!0}else if(void 0!==e)throw new Error('draggable expected "function" or "string" but received "'.concat(s(e),'"'));if(!/mousedown|pointerdown/.test(t.type)||0===t.button){if(i===this.$el)return!0;try{document.selection?f._nextTick(function(){document.selection.empty()}):window.getSelection().removeAllRanges();var r=n&&"function"==typeof n?n(o||t):f.getElement(this.$el,i).el;if(!r)return!0;if(r.animated)return;this.dragEl=r}catch(t){throw new Error(t)}window.sortableDndOnDown=!0;e=f.getElement(this.$el,this.dragEl),n=e.index,i=e.el,r=e.rect;if(!i||n<0)return!0;e=this.dragEl.cloneNode(!0);this.ghost.init(e,r),this.ghost.set("x",r.left),this.ghost.set("y",r.top),this.diff.old.rect=r,this.calcXY={x:(o||t).clientX,y:(o||t).clientY},this._onMoveEvents(o),this._onUpEvents(o)}}},{key:"_onMove",value:function(t){t.preventDefault();var e=t.touches&&t.touches[0],t=e||t,n=t.clientX,o=t.clientY,e=e?document.elementFromPoint(n,o):t.target,i=this.options.chosenClass;if(f.toggleClass(this.dragEl,i,!0),this.ghost.move(),window.sortableDndOnDown&&!(n<0||o<0)){document.body.style.cursor="grabbing",window.sortableDndOnMove=!0,this.ghost.set("x",this.ghost.x+n-this.calcXY.x),this.ghost.set("y",this.ghost.y+o-this.calcXY.y),this.calcXY={x:n,y:o},this.ghost.move(),this._checkRange(t);var i=f.getElement(this.$el,e),t=i.index,e=i.el,i=i.rect,r=i.left,s=i.right,l=i.top,i=i.bottom;if(!(!e||t<0||l<0)&&r<n&&n<s&&l<o&&o<i){if(this.dropEl=e,this.dropEl!==this.dragEl){if(this.dropEl.animated)return;this.captureAnimationState(),f.index(this.$el,this.dragEl)<t?this.$el.insertBefore(this.dragEl,this.dropEl.nextElementSibling):this.$el.insertBefore(this.dragEl,this.dropEl),this.animateRange(),this.diff.old.node=this.dragEl,this.diff.new.node=this.dropEl}this.diff.new.rect=f.getRect(this.dropEl)}}}},{key:"_onDrop",value:function(){this._offMoveEvents(),this._offUpEvents(),document.body.style.cursor="";var t=this.options,e=t.dragEnd,t=t.chosenClass;if(f.toggleClass(this.dragEl,t,!1),window.sortableDndOnDown&&window.sortableDndOnMove){if("function"!=typeof e)throw new Error('Sortable-dnd Error: dragEnd expected "function" but received "'.concat(s(e),'"'));e(this.diff.old,this.diff.new)}this.diff.destroy(),this.ghost.destroy(),this._removeWindowState()}},{key:"_checkRange",value:function(t){var e=f.getRect(this.$el),n=e.top,o=e.left,i=e.right,e=e.bottom;(t.clientX<o||t.clientX>i||t.clientY<n||t.clientY>e)&&(document.body.style.cursor="not-allowed")}},{key:"_resetState",value:function(){this.dragEl=null,this.dropEl=null,this.ghost.destroy(),this.diff.destroy(),this.calcXY={x:0,y:0},this._removeWindowState()}},{key:"_removeWindowState",value:function(){window.sortableDndOnDown=null,window.sortableDndOnMove=null,delete window.sortableDndOnDown,delete window.sortableDndOnMove}},{key:"_bindEventListener",value:function(){this._onStart=this._onStart.bind(this),this._onMove=this._onMove.bind(this),this._onDrop=this._onDrop.bind(this),this.options.supportPointer?f.on(this.$el,"pointerdown",this._onStart):(f.on(this.$el,"mousedown",this._onStart),f.on(this.$el,"touchstart",this._onStart))}},{key:"_unbindEventListener",value:function(){f.off(this.$el,"pointerdown",this._onStart),f.off(this.$el,"touchstart",this._onStart),f.off(this.$el,"mousedown",this._onStart)}},{key:"_onMoveEvents",value:function(t){var e=this.options,n=e.supportPointer,e=e.ownerDocument;n?f.on(e,"pointermove",this._onMove):t?f.on(e,"touchmove",this._onMove):f.on(e,"mousemove",this._onMove)}},{key:"_onUpEvents",value:function(){var t=this.options.ownerDocument;f.on(t,"pointerup",this._onDrop),f.on(t,"touchend",this._onDrop),f.on(t,"touchcancel",this._onDrop),f.on(t,"mouseup",this._onDrop)}},{key:"_offMoveEvents",value:function(){var t=this.options.ownerDocument;f.off(t,"pointermove",this._onMove),f.off(t,"touchmove",this._onMove),f.off(t,"mousemove",this._onMove)}},{key:"_offUpEvents",value:function(){var t=this.options.ownerDocument;f.off(t,"mouseup",this._onDrop),f.off(t,"touchend",this._onDrop),f.off(t,"touchcancel",this._onDrop),f.off(t,"pointerup",this._onDrop)}}]),n}()});

package.json

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

README.md

@@ -71,1 +71,6 @@ <p>
 
+# Methods
+
+| **method** | **Description** |
+|--------------|--------------|
+| `destroy()` | Manually clear all the state of the component, using this method the component will not be draggable |

src/Sortable.js

@@ -103,2 +103,7 @@ import utils from './utils.js'
 
+  destroy() {
+    this._unbindEventListener()
+    this._resetState()
+  }
+
   init() {
@@ -133,16 +138,19 @@ const defaults = {
   _handleDestroy() {
+    let observer = null
     const MutationObserver = window.MutationObserver || window.WebKitMutationObserver
-    const observer = new MutationObserver((mutationList) => {
-      if (!this.$el) {
-        observer.disconnect()
-        observer = null
-        this._unbindEventListener()
-        this._resetState()
-      }
-    })
-    observer.observe(this.$el.parentNode, {
-      childList: true,  // 观察目标子节点的变化，是否有添加或者删除
-      attributes: false, // 观察属性变动
-      subtree: false     // 观察后代节点，默认为 false
-    })
+    if (MutationObserver) {
+      observer = new MutationObserver(() => {
+        if (!this.$el) {
+          observer.disconnect()
+          observer = null
+          this._unbindEventListener()
+          this._resetState()
+        }
+      })
+      observer.observe(this.$el.parentNode, {
+        childList: true,  // 观察目标子节点的变化，是否有添加或者删除
+        attributes: false, // 观察属性变动
+        subtree: false     // 观察后代节点，默认为 false
+      })
+    }
 
@@ -308,2 +316,3 @@ window.onbeforeunload = () => {
     this.diff.destroy()
+    this.calcXY = { x: 0, y: 0 }
     this._removeWindowState()
@@ -310,0 +319,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

60627

increased by0.99%

Lines of code

1342

increased by1.36%

Number of lines in readme file

75

increased by5.63%

No dependency changes