sortable-dnd - npm Package Compare versions

Comparing version 0.0.9 to 0.0.10

dist/sortable.js

 /*!
- * sortable-dnd v0.0.9
+ * sortable-dnd v0.0.10
  * open source under the MIT license
@@ -13,2 +13,12 @@ * https://github.com/mfuu/sortable-dnd#readme
 
+  function _typeof(obj) {
+    "@babel/helpers - typeof";
+
+    return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+      return typeof obj;
+    } : function (obj) {
+      return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+    }, _typeof(obj);
+  }
+
   function _classCallCheck(instance, Constructor) {
@@ -39,2 +49,6 @@ if (!(instance instanceof Constructor)) {
 
+  function _readOnlyError(name) {
+    throw new TypeError("\"" + name + "\" is read-only");
+  }
+
   function _toConsumableArray(arr) {
@@ -89,9 +103,13 @@ return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
     /**
-     * add specified event listener
-     * @param {HTMLElement} el 
-     * @param {String} event 
-     * @param {Function} fn 
-     */
+    * add specified event listener
+    * @param {HTMLElement} el 
+    * @param {String} event 
+    * @param {Function} fn 
+    */
     on: function on(el, event, fn) {
-      el.addEventListener(event, fn, !IE11OrLess && captureMode);
+      if (window.addEventListener) {
+        el.addEventListener(event, fn, !IE11OrLess && captureMode);
+      } else if (window.attachEvent) {
+        el.addEventListener('on' + event, fn);
+      }
     },
@@ -106,3 +124,7 @@
     off: function off(el, event, fn) {
-      el.removeEventListener(event, fn, !IE11OrLess && captureMode);
+      if (window.removeEventListener) {
+        el.removeEventListener(event, fn, !IE11OrLess && captureMode);
+      } else if (window.detachEvent) {
+        el.detachEvent('on' + event, fn);
+      }
     },
@@ -492,2 +514,3 @@ getWindowScrollingElement: function getWindowScrollingElement() {
 
+      if (!el) throw new Error('container element is required');
       this.$el = el; // 列表容器元素
@@ -515,7 +538,2 @@
       value: function init() {
-        if (!this.$el) {
-          console.error('Sortable-dnd Error: container element is required');
-          return;
-        }
-
         var defaults = {
@@ -527,3 +545,3 @@ animation: 150,
           chosenClass: '',
-          draggable: '',
+          draggable: undefined,
           // String: class, Function: (e) => return true
@@ -547,33 +565,40 @@ dragging: null,
         this._bindEventListener();
-      }
-    }, {
-      key: "destroy",
-      value: function destroy() {
-        this._unbindEventListener();
 
-        this._resetState();
+        this._handleDestroy();
       }
     }, {
-      key: "_bindEventListener",
-      value: function _bindEventListener() {
-        this._onStart = this._onStart.bind(this);
-        this._onMove = this._onMove.bind(this);
-        this._onDrop = this._onDrop.bind(this);
-        var supportPointer = this.options.supportPointer;
+      key: "_handleDestroy",
+      value: function _handleDestroy() {
+        var _this = this;
 
-        if (supportPointer) {
-          utils.on(this.$el, 'pointerdown', this._onStart);
-        } else {
-          utils.on(this.$el, 'mousedown', this._onStart);
-          utils.on(this.$el, 'touchstart', this._onStart);
-        }
+        var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
+        var observer = new MutationObserver(function (mutationList) {
+          if (!_this.$el) {
+            observer.disconnect();
+            _readOnlyError("observer");
+
+            _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");
+
+          _this._unbindEventListener();
+
+          _this._resetState();
+        };
       }
     }, {
-      key: "_unbindEventListener",
-      value: function _unbindEventListener() {
-        utils.off(this.$el, 'pointerdown', this._onStart);
-        utils.off(this.$el, 'touchstart', this._onStart);
-        utils.off(this.$el, 'mousedown', this._onStart);
-      }
-    }, {
       key: "_onStart",
@@ -589,4 +614,6 @@ value: function _onStart(evt) {
           if (!draggable(touch || evt)) return true;
-        } else if (draggable) {
+        } else if (typeof draggable === 'string') {
           if (!utils.matches(target, draggable)) return true;
+        } else if (draggable !== undefined) {
+          throw new Error("draggable expected \"function\" or \"string\" but received \"".concat(_typeof(draggable), "\""));
         }
@@ -614,5 +641,4 @@
           this.dragEl = element;
-        } catch (err) {
-          console.error("Sortable-dnd Error: ".concat(err));
-          return true;
+        } catch (error) {
+          throw new Error(error);
         }
@@ -716,3 +742,7 @@
           // 拖拽完成触发回调函数
-          if (dragEnd && typeof dragEnd === 'function') dragEnd(this.diff.old, this.diff["new"]);
+          if (typeof dragEnd === 'function') {
+            dragEnd(this.diff.old, this.diff["new"]);
+          } else {
+            throw new Error("Sortable-dnd Error: dragEnd expected \"function\" but received \"".concat(_typeof(dragEnd), "\""));
+          }
         }
@@ -758,2 +788,24 @@
     }, {
+      key: "_bindEventListener",
+      value: function _bindEventListener() {
+        this._onStart = this._onStart.bind(this);
+        this._onMove = this._onMove.bind(this);
+        this._onDrop = this._onDrop.bind(this);
+        var supportPointer = this.options.supportPointer;
+
+        if (supportPointer) {
+          utils.on(this.$el, 'pointerdown', this._onStart);
+        } else {
+          utils.on(this.$el, 'mousedown', this._onStart);
+          utils.on(this.$el, 'touchstart', this._onStart);
+        }
+      }
+    }, {
+      key: "_unbindEventListener",
+      value: function _unbindEventListener() {
+        utils.off(this.$el, 'pointerdown', this._onStart);
+        utils.off(this.$el, 'touchstart', this._onStart);
+        utils.off(this.$el, 'mousedown', this._onStart);
+      }
+    }, {
       key: "_onMoveEvents",
@@ -760,0 +812,0 @@ value: function _onMoveEvents(touch) {

dist/sortable.min.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).Sortable=e()}(this,function(){"use strict";function i(t,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 i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}function s(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 l(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 l(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)?l(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 l(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,i=new Array(e);n<e;n++)i[n]=t[n];return i}function t(t){if("undefined"!=typeof window&&window.navigator)return!!navigator.userAgent.match(t)}var a=t(/(?:Trident.*rv[ :]?11\.|msie|iemobile|Windows Phone)/i),h=t(/safari/i)&&!t(/chrome/i)&&!t(/android/i),c={capture:!1,passive:!1},u=/\s+/g,d={on:function(t,e,n){t.addEventListener(e,n,!a&&c)},off:function(t,e,n){t.removeEventListener(e,n,!a&&c)},getWindowScrollingElement:function(){var t=document.scrollingElement;return t||document.documentElement},index:function(t,e){return e&&e.parentNode?r(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:{}},i=r(Array.from(t.children)),t=i.indexOf(e);-1<t&&Object.assign(n,{index:t,el:i[t],rect:this.getRect(i[t])});for(var o=0;o<i.length;o++)this.isChildOf(e,i[o])&&Object.assign(n,{index:o,el:i[o],rect:this.getRect(i[o])});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 i;t&&e&&(t.classList?t.classList[n?"add":"remove"](e):(i=(" "+t.className+" ").replace(u," ").replace(" "+e+" "," "),t.className=(i+(n?" "+e:"")).replace(u," ")))},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 i=t&&t.style;if(i){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];i[e=e in i||-1!==e.indexOf("webkit")?e:"-webkit-"+e]=n+("string"==typeof n?"":"px")}},debounce:function(o,s){return function(){for(var t=this,e=arguments.length,n=new Array(e),i=0;i<e;i++)n[i]=arguments[i];clearTimeout(o.id),o.id=setTimeout(function(){o.call.apply(o,[t].concat(n))},s)}},_nextTick:function(t){return setTimeout(t,0)}};function f(){var i=[];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;i.length=0,t.slice(n,e+1).forEach(function(t){i.push({target:t,rect:d.getRect(t)})})},animateRange:function(){var n=this;i.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,i=d.getRect(t),o=e.left-i.left,e=e.top-i.top;d.css(t,"transition","none"),d.css(t,"transform","translate3d(".concat(o,"px, ").concat(e,"px, 0)")),t.offsetLeft,d.css(t,"transition","all ".concat(n,"ms")),d.css(t,"transform","translate3d(0px, 0px, 0px)"),clearTimeout(t.animated),t.animated=setTimeout(function(){d.css(t,"transition",""),d.css(t,"transform",""),t.animated=null},n)}}}var p=function(){function t(){i(this,t),this.old={node:null,rect:{}},this.new={node:null,rect:{}}}return s(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){i(this,e),this.options=t,this.x=0,this.y=0,this.exist=!1}return s(e,[{key:"init",value:function(t,e){if(t){this.$el=t,this.rect=e;var n,t=this.options,i=t.ghostClass,t=t.ghostStyle,o=void 0===t?{}:t,t=e.width,e=e.height;for(n in this.$el.class=i,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",o)d.css(this.$el,n,o[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){i(this,n),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},d.debounce(this.init(),50)}return s(n,[{key:"init",value:function(){if(this.$el){var t,e={animation:150,ghostClass:"",ghostStyle:{},chosenClass:"",draggable:"",dragging:null,dragEnd:null,supportPointer:"PointerEvent"in window&&!h,ownerDocument:this.$el.ownerDocument};for(t in e)t in this.options||(this.options[t]=e[t]);this.diff=new p,this.ghost=new g(this.options),Object.assign(this,f()),this._bindEventListener()}else console.error("Sortable-dnd Error: container element is required")}},{key:"destroy",value:function(){this._unbindEventListener(),this._resetState()}},{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?d.on(this.$el,"pointerdown",this._onStart):(d.on(this.$el,"mousedown",this._onStart),d.on(this.$el,"touchstart",this._onStart))}},{key:"_unbindEventListener",value:function(){d.off(this.$el,"pointerdown",this._onStart),d.off(this.$el,"touchstart",this._onStart),d.off(this.$el,"mousedown",this._onStart)}},{key:"_onStart",value:function(t){var e=this.options,n=e.dragging,e=e.draggable,i=t.touches&&t.touches[0]||t.pointerType&&"touch"===t.pointerType&&t,o=(i||t).target;if("function"==typeof e){if(!e(i||t))return!0}else if(e&&!d.matches(o,e))return!0;if(!/mousedown|pointerdown/.test(t.type)||0===t.button){if(o===this.$el)return!0;try{document.selection?d._nextTick(function(){document.selection.empty()}):window.getSelection().removeAllRanges();var s=n&&"function"==typeof n?n(i||t):d.getElement(this.$el,o).el;if(!s)return!0;if(s.animated)return;this.dragEl=s}catch(t){return console.error("Sortable-dnd Error: ".concat(t)),!0}window.sortableDndOnDown=!0;e=d.getElement(this.$el,this.dragEl),n=e.index,o=e.el,s=e.rect;if(!o||n<0)return!0;e=this.dragEl.cloneNode(!0);this.ghost.init(e,s),this.ghost.set("x",s.left),this.ghost.set("y",s.top),this.diff.old.rect=s,this.calcXY={x:(i||t).clientX,y:(i||t).clientY},this._onMoveEvents(i),this._onUpEvents(i)}}},{key:"_onMove",value:function(t){t.preventDefault();var e=t.touches&&t.touches[0],t=e||t,n=t.clientX,i=t.clientY,e=e?document.elementFromPoint(n,i):t.target,o=this.options.chosenClass;if(d.toggleClass(this.dragEl,o,!0),this.ghost.move(),window.sortableDndOnDown&&!(n<0||i<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+i-this.calcXY.y),this.calcXY={x:n,y:i},this.ghost.move(),this._checkRange(t);var o=d.getElement(this.$el,e),t=o.index,e=o.el,o=o.rect,s=o.left,r=o.right,l=o.top,o=o.bottom;if(!(!e||t<0||l<0)&&s<n&&n<r&&l<i&&i<o){if(this.dropEl=e,this.dropEl!==this.dragEl){if(this.dropEl.animated)return;this.captureAnimationState(),d.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=d.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;d.toggleClass(this.dragEl,t,!1),window.sortableDndOnDown&&window.sortableDndOnMove&&e&&"function"==typeof e&&e(this.diff.old,this.diff.new),this.diff.destroy(),this.ghost.destroy(),this._removeWindowState()}},{key:"_checkRange",value:function(t){var e=d.getRect(this.$el),n=e.top,i=e.left,o=e.right,e=e.bottom;(t.clientX<i||t.clientX>o||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:"_onMoveEvents",value:function(t){var e=this.options,n=e.supportPointer,e=e.ownerDocument;n?d.on(e,"pointermove",this._onMove):t?d.on(e,"touchmove",this._onMove):d.on(e,"mousemove",this._onMove)}},{key:"_onUpEvents",value:function(){var t=this.options.ownerDocument;d.on(t,"pointerup",this._onDrop),d.on(t,"touchend",this._onDrop),d.on(t,"touchcancel",this._onDrop),d.on(t,"mouseup",this._onDrop)}},{key:"_offMoveEvents",value:function(){var t=this.options.ownerDocument;d.off(t,"pointermove",this._onMove),d.off(t,"touchmove",this._onMove),d.off(t,"mousemove",this._onMove)}},{key:"_offUpEvents",value:function(){var t=this.options.ownerDocument;d.off(t,"mouseup",this._onDrop),d.off(t,"touchend",this._onDrop),d.off(t,"touchcancel",this._onDrop),d.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){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}()});

package.json

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

README.md

@@ -10,6 +10,6 @@ <p>
 
-# sortable-dnd
 
-JS Library for Drag and Drop, supports Sortable and Draggable
 
+A JS Library for Drag and Drop, supports Sortable and Draggable
+
 # Usage
@@ -57,7 +57,4 @@
 
-When the component you created is destroyed, you need to destroy the `new Sortable` like this
+The component you created will clear all state after destroyed
 
-```js
-DND.destroy()
-```
 
@@ -76,6 +73,1 @@ # Options
 
-# methods
-
-| **method** | **Description** |
-|-------------|--------------|
-| `destroy` | Destroy the component and empty its contents |

src/Sortable.js

@@ -89,2 +89,4 @@ import utils from './utils.js'
   constructor(el, options) {
+    if (!el) throw new Error('container element is required')
+
     this.$el = el // 列表容器元素
@@ -101,8 +103,4 @@ this.options = options = Object.assign({}, options)
   }
+
   init() {
-    if (!this.$el) {
-      console.error('Sortable-dnd Error: container element is required')
-      return
-    }
-
     const defaults = {
@@ -114,3 +112,3 @@ animation: 150, // 动画延时
       chosenClass: '',
-      draggable: '', // String: class, Function: (e) => return true
+      draggable: undefined, // String: class, Function: (e) => return true
       dragging: null, // 必须为函数且必须返回一个 HTMLElement (e) => return e.target
@@ -131,29 +129,31 @@ dragEnd: null, // 拖拽完成时的回调函数，返回两个值(olddom, newdom) => {}
     Object.assign(this, Animation())
+
     this._bindEventListener()
+    this._handleDestroy()
   }
-  destroy() {
-    this._unbindEventListener()
-    this._resetState()
-  }
 
-  _bindEventListener() {
-    this._onStart = this._onStart.bind(this)
-    this._onMove = this._onMove.bind(this)
-    this._onDrop = this._onDrop.bind(this)
+  _handleDestroy() {
+    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
+    })
 
-    const { supportPointer } = this.options
-    if (supportPointer) {
-      utils.on(this.$el, 'pointerdown', this._onStart)
-    } else {
-      utils.on(this.$el, 'mousedown', this._onStart)
-      utils.on(this.$el, 'touchstart', this._onStart)
+    window.onbeforeunload = () => {
+      if (observer) observer.disconnect()
+      observer = null
+      this._unbindEventListener()
+      this._resetState()
     }
   }
 
-  _unbindEventListener() {
-    utils.off(this.$el, 'pointerdown', this._onStart)
-    utils.off(this.$el, 'touchstart', this._onStart)
-    utils.off(this.$el, 'mousedown', this._onStart)
-  }
-
   _onStart(evt) {
@@ -166,4 +166,6 @@ const { dragging, draggable } = this.options
       if (!draggable(touch || evt)) return true
-    } else if (draggable) {
+    } else if (typeof draggable === 'string') {
       if (!utils.matches(target, draggable)) return true
+    } else if (draggable !== undefined) {
+      throw new Error(`draggable expected "function" or "string" but received "${typeof draggable}"`)
     }
@@ -193,5 +195,4 @@
 
-		} catch (err) {
-      console.error(`Sortable-dnd Error: ${err}`)
-      return true
+		} catch (error) {
+      throw new Error(error)
 		}
@@ -285,3 +286,7 @@
       // 拖拽完成触发回调函数
-      if (dragEnd && typeof dragEnd === 'function') dragEnd(this.diff.old, this.diff.new)
+      if (typeof dragEnd === 'function') {
+        dragEnd(this.diff.old, this.diff.new)
+      } else {
+        throw new Error(`Sortable-dnd Error: dragEnd expected "function" but received "${typeof dragEnd}"`)
+      }
     }
@@ -317,2 +322,22 @@
   }
+
+  _bindEventListener() {
+    this._onStart = this._onStart.bind(this)
+    this._onMove = this._onMove.bind(this)
+    this._onDrop = this._onDrop.bind(this)
+
+    const { supportPointer } = this.options
+    if (supportPointer) {
+      utils.on(this.$el, 'pointerdown', this._onStart)
+    } else {
+      utils.on(this.$el, 'mousedown', this._onStart)
+      utils.on(this.$el, 'touchstart', this._onStart)
+    }
+  }
+
+  _unbindEventListener() {
+    utils.off(this.$el, 'pointerdown', this._onStart)
+    utils.off(this.$el, 'touchstart', this._onStart)
+    utils.off(this.$el, 'mousedown', this._onStart)
+  }
   
@@ -319,0 +344,0 @@ _onMoveEvents(touch) {

src/utils.js

@@ -13,20 +13,28 @@ import { IE11OrLess } from './Brower.js'
   /**
-   * add specified event listener
-   * @param {HTMLElement} el 
-   * @param {String} event 
-   * @param {Function} fn 
-   */
+  * add specified event listener
+  * @param {HTMLElement} el 
+  * @param {String} event 
+  * @param {Function} fn 
+  */
   on(el, event, fn) {
+  if (window.addEventListener) {
     el.addEventListener(event, fn, !IE11OrLess && captureMode)
-  },
-
-  /**
-   * remove specified event listener
-   * @param {HTMLElement} el 
-   * @param {String} event 
-   * @param {Function} fn 
-   */
+  } else if (window.attachEvent) {
+    el.addEventListener('on' + event, fn)
+  }
+ },
+ 
+ /**
+  * remove specified event listener
+  * @param {HTMLElement} el 
+  * @param {String} event 
+  * @param {Function} fn 
+  */
   off(el, event, fn) {
-    el.removeEventListener(event, fn, !IE11OrLess && captureMode)
-  },
+   if (window.removeEventListener) {
+     el.removeEventListener(event, fn, !IE11OrLess && captureMode)
+   } else if (window.detachEvent) {
+     el.detachEvent('on' + event, fn)
+   }
+ },
 
@@ -33,0 +41,0 @@ getWindowScrollingElement() {

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

60032

increased by6.62%

Lines of code

1324

increased by6%

Worsened metrics

Number of lines in readme file

71

decreased by-10.13%

No dependency changes