Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
sortable-dnd
Advanced tools
sortable-dnd - npm Package Compare versions
Comparing version 0.2.0 to 0.2.1
| /*! | ||
| * sortable-dnd v0.2.0 | ||
| * sortable-dnd v0.2.1 | ||
| * open source under the MIT license | ||
@@ -98,3 +98,35 @@ * https://github.com/mfuu/sortable-dnd#readme | ||
| var R_SPACE = /\s+/g; | ||
| var CSSTRANSITIONS = ['-webkit-transition', '-moz-transition', '-ms-transition', '-o-transition', 'transition']; | ||
| var CSSTRANSFORMS = ['-webkit-transform', '-moz-transform', '-ms-transform', '-o-transform', 'transform']; | ||
| /** | ||
| * set transition style | ||
| * @param {HTMLElement} el | ||
| * @param {String | Function} transition | ||
| */ | ||
| function setTransition(el, transition) { | ||
| if (transition) { | ||
| if (transition === 'none') CSSTRANSITIONS.forEach(function (ts) { | ||
| return css(el, ts, 'none'); | ||
| });else CSSTRANSITIONS.forEach(function (ts) { | ||
| return css(el, ts, "".concat(ts.split('transition')[0], "transform ").concat(transition)); | ||
| }); | ||
| } else CSSTRANSITIONS.forEach(function (ts) { | ||
| return css(el, ts, ''); | ||
| }); | ||
| } | ||
| /** | ||
| * set transform style | ||
| * @param {HTMLElement} el | ||
| * @param {String} transform | ||
| */ | ||
| function setTransform(el, transform) { | ||
| if (transform) CSSTRANSFORMS.forEach(function (tf) { | ||
| return css(el, tf, "".concat(tf.split('transform')[0]).concat(transform)); | ||
| });else CSSTRANSFORMS.forEach(function (tf) { | ||
| return css(el, tf, ''); | ||
| }); | ||
| } | ||
| /** | ||
| * detect passive event support | ||
@@ -371,4 +403,156 @@ */ | ||
| var CSS_TRANSITIONS = ['-webkit-transition', '-moz-transition', '-ms-transition', '-o-transition', 'transition']; | ||
| var CSS_TRANSFORMS = ['-webkit-transform', '-moz-transform', '-ms-transform', '-o-transform', 'transform']; | ||
| /** | ||
| * 拖拽前后差异初始化 | ||
| */ | ||
| var Differ = /*#__PURE__*/function () { | ||
| function Differ() { | ||
| _classCallCheck(this, Differ); | ||
| this.from = { | ||
| node: null, | ||
| rect: {}, | ||
| offset: {} | ||
| }; | ||
| this.to = { | ||
| node: null, | ||
| rect: {}, | ||
| offset: {} | ||
| }; | ||
| } | ||
| _createClass(Differ, [{ | ||
| key: "get", | ||
| value: function get(key) { | ||
| return this[key]; | ||
| } | ||
| }, { | ||
| key: "set", | ||
| value: function set(key, value) { | ||
| this[key] = value; | ||
| } | ||
| }, { | ||
| key: "destroy", | ||
| value: function destroy() { | ||
| this.from = { | ||
| node: null, | ||
| rect: {}, | ||
| offset: {} | ||
| }; | ||
| this.to = { | ||
| node: null, | ||
| rect: {}, | ||
| offset: {} | ||
| }; | ||
| } | ||
| }]); | ||
| return Differ; | ||
| }(); | ||
| /** | ||
| * 拖拽中的元素 | ||
| */ | ||
| var Ghost = /*#__PURE__*/function () { | ||
| function Ghost(options) { | ||
| _classCallCheck(this, Ghost); | ||
| this.options = options; | ||
| this.x = 0; | ||
| this.y = 0; | ||
| this.exist = false; | ||
| } | ||
| _createClass(Ghost, [{ | ||
| key: "init", | ||
| value: function init(el, rect) { | ||
| if (!el) return; | ||
| this.$el = el; | ||
| var _this$options = this.options, | ||
| ghostClass = _this$options.ghostClass, | ||
| _this$options$ghostSt = _this$options.ghostStyle, | ||
| ghostStyle = _this$options$ghostSt === void 0 ? {} : _this$options$ghostSt; | ||
| var width = rect.width, | ||
| height = rect.height; | ||
| this.$el["class"] = ghostClass; | ||
| this.$el.style.width = width + 'px'; | ||
| this.$el.style.height = height + 'px'; | ||
| this.$el.style.position = 'fixed'; | ||
| this.$el.style.left = 0; | ||
| this.$el.style.top = 0; | ||
| this.$el.style.zIndex = 100000; | ||
| this.$el.style.opacity = 0.8; | ||
| this.$el.style.pointerEvents = 'none'; | ||
| this.$el.style.cursor = 'move'; | ||
| setTransition(this.$el, 'none'); | ||
| setTransform(this.$el, 'translate3d(0px, 0px, 0px)'); | ||
| this.setStyle(ghostStyle); | ||
| } | ||
| }, { | ||
| key: "get", | ||
| value: function get(key) { | ||
| return this[key]; | ||
| } | ||
| }, { | ||
| key: "set", | ||
| value: function set(key, value) { | ||
| this[key] = value; | ||
| this[key] = value; | ||
| } | ||
| }, { | ||
| key: "setStyle", | ||
| value: function setStyle(style) { | ||
| for (var key in style) { | ||
| css(this.$el, key, style[key]); | ||
| } | ||
| } | ||
| }, { | ||
| key: "rect", | ||
| value: function rect() { | ||
| return getRect(this.$el); | ||
| } | ||
| }, { | ||
| key: "move", | ||
| value: function move(smooth) { | ||
| var ghostAnimation = this.options.ghostAnimation; | ||
| if (smooth) setTransition(this.$el, "".concat(ghostAnimation, "ms"));else setTransition(this.$el, 'none'); // 将初始化放在 move 事件中，避免与鼠标点击事件冲突 | ||
| if (!this.exist) { | ||
| document.body.appendChild(this.$el); | ||
| this.exist = true; | ||
| } | ||
| setTransform(this.$el, "translate3d(".concat(this.x, "px, ").concat(this.y, "px, 0)")); | ||
| if (this.$el.style.cursor !== 'move') this.$el.style.cursor = 'move'; | ||
| } | ||
| }, { | ||
| key: "destroy", | ||
| value: function destroy(rect) { | ||
| var _this = this; | ||
| if (rect) { | ||
| this.x = rect.left; | ||
| this.y = rect.top; | ||
| this.move(true); | ||
| } | ||
| var ghostAnimation = this.options.ghostAnimation; | ||
| ghostAnimation ? setTimeout(function () { | ||
| return _this.clear(); | ||
| }, ghostAnimation) : this.clear(); | ||
| } | ||
| }, { | ||
| key: "clear", | ||
| value: function clear() { | ||
| if (this.$el) this.$el.remove(); | ||
| this.$el = null; | ||
| this.x = 0; | ||
| this.y = 0; | ||
| this.exist = false; | ||
| } | ||
| }]); | ||
| return Ghost; | ||
| }(); | ||
| function Animation() { | ||
@@ -421,24 +605,12 @@ var animationState = []; | ||
| var top = preRect.top - curRect.top; | ||
| CSS_TRANSITIONS.forEach(function (ts) { | ||
| return css(el, ts, 'none'); | ||
| }); | ||
| CSS_TRANSFORMS.forEach(function (tf) { | ||
| return css(el, tf, "".concat(tf.split('transform')[0], "translate3d(").concat(left, "px, ").concat(top, "px, 0)")); | ||
| }); | ||
| setTransition(el, 'none'); | ||
| setTransform(el, "translate3d(".concat(left, "px, ").concat(top, "px, 0)")); | ||
| el.offsetLeft; // 触发重绘 | ||
| CSS_TRANSITIONS.forEach(function (ts) { | ||
| return css(el, ts, "".concat(ts.split('transition')[0], "transform ").concat(animation, "ms")); | ||
| }); | ||
| CSS_TRANSFORMS.forEach(function (tf) { | ||
| return css(el, tf, "".concat(tf.split('transform')[0], "translate3d(0px, 0px, 0px)")); | ||
| }); | ||
| setTransition(el, "".concat(animation, "ms")); | ||
| setTransform(el, 'translate3d(0px, 0px, 0px)'); | ||
| clearTimeout(el.animated); | ||
| el.animated = setTimeout(function () { | ||
| CSS_TRANSITIONS.forEach(function (ts) { | ||
| return css(el, ts, ''); | ||
| }); | ||
| CSS_TRANSFORMS.forEach(function (tf) { | ||
| return css(el, tf, ''); | ||
| }); | ||
| setTransition(el, ''); | ||
| setTransform(el, ''); | ||
| el.animated = null; | ||
@@ -530,152 +702,2 @@ }, animation); | ||
| /** | ||
| * 拖拽前后差异初始化 | ||
| */ | ||
| var Differ = /*#__PURE__*/function () { | ||
| function Differ() { | ||
| _classCallCheck(this, Differ); | ||
| this.from = { | ||
| node: null, | ||
| rect: {}, | ||
| offset: {} | ||
| }; | ||
| this.to = { | ||
| node: null, | ||
| rect: {}, | ||
| offset: {} | ||
| }; | ||
| } | ||
| _createClass(Differ, [{ | ||
| key: "get", | ||
| value: function get(key) { | ||
| return this[key]; | ||
| } | ||
| }, { | ||
| key: "set", | ||
| value: function set(key, value) { | ||
| this[key] = value; | ||
| } | ||
| }, { | ||
| key: "destroy", | ||
| value: function destroy() { | ||
| this.from = { | ||
| node: null, | ||
| rect: {}, | ||
| offset: {} | ||
| }; | ||
| this.to = { | ||
| node: null, | ||
| rect: {}, | ||
| offset: {} | ||
| }; | ||
| } | ||
| }]); | ||
| return Differ; | ||
| }(); | ||
| /** | ||
| * 拖拽中的元素 | ||
| */ | ||
| var Ghost = /*#__PURE__*/function () { | ||
| function Ghost(options) { | ||
| _classCallCheck(this, Ghost); | ||
| this.options = options; | ||
| this.x = 0; | ||
| this.y = 0; | ||
| this.exist = false; | ||
| } | ||
| _createClass(Ghost, [{ | ||
| key: "init", | ||
| value: function init(el, rect) { | ||
| if (!el) return; | ||
| this.$el = el; | ||
| var _this$options = this.options, | ||
| ghostClass = _this$options.ghostClass, | ||
| _this$options$ghostSt = _this$options.ghostStyle, | ||
| ghostStyle = _this$options$ghostSt === void 0 ? {} : _this$options$ghostSt; | ||
| var width = rect.width, | ||
| height = rect.height; | ||
| this.$el["class"] = ghostClass; | ||
| this.$el.style.width = width + 'px'; | ||
| this.$el.style.height = height + '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 = 100000; | ||
| this.$el.style.opacity = 0.8; | ||
| this.$el.style.pointerEvents = 'none'; | ||
| this.$el.style.cursor = 'move'; | ||
| this.setStyle(ghostStyle); | ||
| } | ||
| }, { | ||
| key: "get", | ||
| value: function get(key) { | ||
| return this[key]; | ||
| } | ||
| }, { | ||
| key: "set", | ||
| value: function set(key, value) { | ||
| this[key] = value; | ||
| this[key] = value; | ||
| } | ||
| }, { | ||
| key: "setStyle", | ||
| value: function setStyle(style) { | ||
| for (var key in style) { | ||
| css(this.$el, key, style[key]); | ||
| } | ||
| } | ||
| }, { | ||
| key: "rect", | ||
| value: function rect() { | ||
| return this.$el.getBoundingClientRect(); | ||
| } | ||
| }, { | ||
| key: "move", | ||
| value: function move(smooth) { | ||
| var ghostAnimation = this.options.ghostAnimation; | ||
| if (smooth) this.$el.style.transition = "all ".concat(ghostAnimation, "ms");else this.$el.style.transition = ''; // 将初始化放在 move 事件中，避免与鼠标点击事件冲突 | ||
| if (!this.exist) { | ||
| document.body.appendChild(this.$el); | ||
| this.exist = true; | ||
| } | ||
| this.$el.style.transform = "translate3d(".concat(this.x, "px, ").concat(this.y, "px, 0)"); | ||
| if (this.$el.style.cursor !== 'move') this.$el.style.cursor = 'move'; | ||
| } | ||
| }, { | ||
| key: "destroy", | ||
| value: function destroy(rect) { | ||
| var _this = this; | ||
| if (rect) { | ||
| this.x = rect.left; | ||
| this.y = rect.top; | ||
| this.move(true); | ||
| } | ||
| setTimeout(function () { | ||
| if (_this.$el) _this.$el.remove(); | ||
| _this.$el = null; | ||
| _this.x = 0; | ||
| _this.y = 0; | ||
| _this.exist = false; | ||
| }, this.options.ghostAnimation); | ||
| } | ||
| }]); | ||
| return Ghost; | ||
| }(); // -------------------------------- Sortable ---------------------------------- | ||
| var documentExists = typeof document !== 'undefined'; | ||
@@ -776,7 +798,7 @@ var supportDraggable = documentExists && !ChromeForAndroid && !IOS && 'draggable' in document.createElement('div'); | ||
| evt) { | ||
| var _this$options2 = this.options, | ||
| delay = _this$options2.delay, | ||
| disabled = _this$options2.disabled, | ||
| stopPropagation = _this$options2.stopPropagation, | ||
| delayOnTouchOnly = _this$options2.delayOnTouchOnly; | ||
| var _this$options = this.options, | ||
| delay = _this$options.delay, | ||
| disabled = _this$options.disabled, | ||
| stopPropagation = _this$options.stopPropagation, | ||
| delayOnTouchOnly = _this$options.delayOnTouchOnly; | ||
| if (/mousedown|pointerdown/.test(evt.type) && evt.button !== 0 || disabled) return; // only left button and enabled | ||
@@ -789,3 +811,2 @@ | ||
| if (e.target === this.$el) return true; | ||
| if (evt.preventDefault !== void 0) evt.preventDefault(); | ||
| if (stopPropagation) evt.stopPropagation(); | ||
@@ -802,5 +823,5 @@ | ||
| e, touch) { | ||
| var _this$options3 = this.options, | ||
| draggable = _this$options3.draggable, | ||
| dragging = _this$options3.dragging; | ||
| var _this$options2 = this.options, | ||
| draggable = _this$options2.draggable, | ||
| dragging = _this$options2.dragging; | ||
@@ -864,7 +885,7 @@ if (typeof draggable === 'function') { | ||
| var _this$options4 = this.options, | ||
| chosenClass = _this$options4.chosenClass, | ||
| stopPropagation = _this$options4.stopPropagation, | ||
| onMove = _this$options4.onMove, | ||
| onDrag = _this$options4.onDrag; | ||
| var _this$options3 = this.options, | ||
| chosenClass = _this$options3.chosenClass, | ||
| stopPropagation = _this$options3.stopPropagation, | ||
| onMove = _this$options3.onMove, | ||
| onDrag = _this$options3.onDrag; | ||
| if (stopPropagation) evt.stopPropagation(); | ||
@@ -980,6 +1001,6 @@ var touch = evt.touches && evt.touches[0]; | ||
| clearTimeout(this.dragStartTimer); | ||
| var _this$options5 = this.options, | ||
| onDrop = _this$options5.onDrop, | ||
| chosenClass = _this$options5.chosenClass, | ||
| stopPropagation = _this$options5.stopPropagation; | ||
| var _this$options4 = this.options, | ||
| onDrop = _this$options4.onDrop, | ||
| chosenClass = _this$options4.chosenClass, | ||
| stopPropagation = _this$options4.stopPropagation; | ||
| if (stopPropagation) evt.stopPropagation(); // 阻止事件冒泡 | ||
@@ -1033,3 +1054,3 @@ | ||
| _handleDestroy: function _handleDestroy() { | ||
| var _this2 = this; | ||
| var _this = this; | ||
@@ -1043,9 +1064,9 @@ var observer = null; | ||
| observer = new MutationObserver(function () { | ||
| if (!ownerDocument.body.contains(_this2.$el)) { | ||
| if (!ownerDocument.body.contains(_this.$el)) { | ||
| observer.disconnect(); | ||
| observer = null; | ||
| _this2._unbindEventListener(); | ||
| _this._unbindEventListener(); | ||
| _this2._resetState(); | ||
| _this._resetState(); | ||
| } | ||
@@ -1067,5 +1088,5 @@ }); | ||
| _this2._unbindEventListener(); | ||
| _this._unbindEventListener(); | ||
| _this2._resetState(); | ||
| _this._resetState(); | ||
| }; | ||
@@ -1072,0 +1093,0 @@ } |
@@ -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 p(t){return(p="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function n(t,e){for(var o=0;o<e.length;o++){var n=e[o];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}function i(t,e,o){e&&n(t.prototype,e),o&&n(t,o),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 o=Object.prototype.toString.call(t).slice(8,-1);return"Map"===(o="Object"===o&&t.constructor?t.constructor.name:o)||"Set"===o?Array.from(t):"Arguments"===o||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(o)?s(t,e):void 0}}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function s(t,e){(null==e||e>t.length)&&(e=t.length);for(var o=0,n=new Array(e);o<e;o++)n[o]=t[o];return n}function t(t){if("undefined"!=typeof window&&window.navigator)return!!navigator.userAgent.match(t)}var a=t(/(?:Trident.*rv[ :]?11\.|msie|iemobile|Windows Phone)/i),l=t(/Edge/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,o,n){window.addEventListener?t.addEventListener(e,o,!(!n&&a)&&c):window.attachEvent&&t.attachEvent("on"+e,o)}function v(t,e,o,n){window.removeEventListener?t.removeEventListener(e,o,!(!n&&a)&&c):window.detachEvent&&t.detachEvent("on"+e,o)}function g(t){for(var e={top:0,left:0,height:0,width:0},o=(e.height=t.offsetHeight,e.width=t.offsetWidth,e.top=t.offsetTop,e.left=t.offsetLeft,t.offsetParent);null!==o;)e.top+=o.offsetTop,e.left+=o.offsetLeft,o=o.offsetParent;return e}function m(){var t=document.scrollingElement;return!t||t.contains(document.body)?document:t}function w(t){var e;if(t.getBoundingClientRect||t===window)return e={top:0,left:0,bottom:0,right:0,height:0,width:0},t!==window&&t.parentNode&&t!==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,o){var n=r(Array.from(t.children)),t=n.indexOf(e);if(-1<t)return o?n[t]:{index:t,el:n[t],rect:w(n[t]),offset:g(n[t])};for(var i=0;i<n.length;i++)if(function(t,e){var o;if(t&&e)for(o=t.parentNode;o;){if(e===o)return 1;o=o.parentNode}return}(e,n[i]))return o?n[i]:{index:i,el:n[i],rect:w(n[i]),offset:g(n[i])};return o?null:{index:-1,el:null,rect:{},offset:{}}}function b(t,e,o){var n;t&&e&&(t.classList?t.classList[o?"add":"remove"](e):(n=(" "+t.className+" ").replace(u," ").replace(" "+e+" "," "),t.className=(n+(o?" "+e:"")).replace(u," ")))}function E(t,e,o){var n=t&&t.style;if(n){if(void 0===o)return document.defaultView&&document.defaultView.getComputedStyle?o=document.defaultView.getComputedStyle(t,""):t.currentStyle&&(o=t.currentStyle),void 0===e?o:o[e];n[e=e in n||-1!==e.indexOf("webkit")?e:"-webkit-"+e]=o+("string"==typeof o?"":"px")}}var S=["-webkit-transition","-moz-transition","-ms-transition","-o-transition","transition"],D=["-webkit-transform","-moz-transform","-ms-transform","-o-transform","transform"];function _(){var i=[];return{captureAnimationState:function(){var t=r(Array.from(this.$el.children)),e=(o=t,n=this.dragEl,e=this.dropEl,n=o.indexOf(n),o=o.indexOf(e),n<o?{start:n,end:o}:{start:o,end:n}),o=e.start,n=e.end;i.length=0,t.slice(o,n+1).forEach(function(t){i.push({target:t,rect:w(t)})})},animateRange:function(){var o=this;i.forEach(function(t){var e=t.target,t=t.rect;o.animate(e,t,o.animation)})},animate:function(e,t){var o=2<arguments.length&&void 0!==arguments[2]?arguments[2]:150,n=w(e),i=t.left-n.left,r=t.top-n.top;S.forEach(function(t){return E(e,t,"none")}),D.forEach(function(t){return E(e,t,"".concat(t.split("transform")[0],"translate3d(").concat(i,"px, ").concat(r,"px, 0)"))}),e.offsetLeft,S.forEach(function(t){return E(e,t,"".concat(t.split("transition")[0],"transform ").concat(o,"ms"))}),D.forEach(function(t){return E(e,t,"".concat(t.split("transform")[0],"translate3d(0px, 0px, 0px)"))}),clearTimeout(e.animated),e.animated=setTimeout(function(){S.forEach(function(t){return E(e,t,"")}),D.forEach(function(t){return E(e,t,"")}),e.animated=null},o)}}}var $=function(){function t(){o(this,t),this.from={node:null,rect:{},offset:{}},this.to={node:null,rect:{},offset:{}}}return i(t,[{key:"get",value:function(t){return this[t]}},{key:"set",value:function(t,e){this[t]=e}},{key:"destroy",value:function(){this.from={node:null,rect:{},offset:{}},this.to={node:null,rect:{},offset:{}}}}]),t}(),x=function(){function e(t){o(this,e),this.options=t,this.x=0,this.y=0,this.exist=!1}return i(e,[{key:"init",value:function(t,e){var o,n;t&&(this.$el=t,o=(t=this.options).ghostClass,t=void 0===(t=t.ghostStyle)?{}:t,n=e.width,e=e.height,this.$el.class=o,this.$el.style.width=n+"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)E(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}(),M="undefined"!=typeof document&&!f&&!e&&"draggable"in document.createElement("div");function O(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 o=t,n=!1;do{if(o.clientWidth<o.scrollWidth||o.clientHeight<o.scrollHeight){var i=E(o);if(o.clientWidth<o.scrollWidth&&("auto"==i.overflowX||"scroll"==i.overflowX)||o.clientHeight<o.scrollHeight&&("auto"==i.overflowY||"scroll"==i.overflowY)){if(!o.getBoundingClientRect||o===document.body)return m();if(n||e)return o;n=!0}}}while(o=o.parentNode);return m()}(this.$el,!0),this.dragEl=null,this.dropEl=null,this.differ=null,this.ghost=null;var o,n,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,onDrag:void 0,onMove:void 0,onDrop:void 0,onChange:void 0,forceFallback:!1,stopPropagation:!1,supportPassive:(o=!1,document.addEventListener("checkIfSupportPassive",null,{get passive(){return o=!0}}),o),supportPointer:"PointerEvent"in window&&!h,supportTouch:"ontouchstart"in window,ownerDocument:this.$el.ownerDocument};for(n in i)n in this.options||(this.options[n]=i[n]);this.nativeDraggable=!this.options.forceFallback&&M,this.differ=new $,this.ghost=new x(this.options),Object.assign(this,_(),{_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,o=t.supportTouch,t=t.supportPassive;d(this.$el,e?"pointerdown":o?"touchstart":"mousedown",this._onStart,t),this.nativeDraggable&&(d(this.$el,"dragover",this),d(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,o=e.supportPointer,n=e.ownerDocument,e=e.supportPassive;d(n,o?"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;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 O.prototype={constructor:O,destroy:function(){this._unbindEventListener(),this._resetState()},_onStart:function(t){var e=this.options,o=e.delay,n=e.disabled,i=e.stopPropagation,e=e.delayOnTouchOnly;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;void 0!==t.preventDefault&&t.preventDefault(),i&&t.stopPropagation(),!o||e&&!n||this.nativeDraggable&&(l||a)?this._onDrag(r,n):this.dragStartTimer=setTimeout(this._onDrag(r,n),o)}}},_onDrag:function(t,e){var o=this.options,n=o.draggable,o=o.dragging;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(p(n),'"'));try{document.selection?setTimeout(function(){document.selection.empty()},0):window.getSelection().removeAllRanges()}catch(t){throw new Error(t)}if(o){if("function"!=typeof o)throw new Error('dragging expected "function" or "string" but received "'.concat(p(o),'"'));this.dragEl=o(t)}else this.dragEl=y(this.$el,t.target,!0);if(!this.dragEl||this.dragEl.animated)return!0;n=y(this.$el,this.dragEl),o=n.rect,n=n.offset;window.sortableDndOnDownState=!0,this.ghost.set("x",o.left),this.ghost.set("y",o.top),this.differ.from={node:this.dragEl,rect:o,offset:n},this.calcXY={x:t.clientX,y:t.clientY},this._onMoveEvents(e),this._onUpEvents(e)},_onMove:function(t){void 0!==t.preventDefault&&t.preventDefault();var e=this.options,o=e.chosenClass,n=e.stopPropagation,i=e.onMove,e=e.onDrag,n=(n&&t.stopPropagation(),t.touches&&t.touches[0]),r=n||t,s=r.clientX,a=r.clientY,n=n?document.elementFromPoint(s,a):r.target;if(!this.ghost.$el&&(this.ghost.init(this.dragEl.cloneNode(!0),this.differ.from.rect),void 0!==e)){if("function"!=typeof e)throw new Error('onDrag expected "function" but received "'.concat(p(e),'"'));e(this.dragEl,r,t)}if(void 0!==i){if("function"!=typeof i)throw new Error('onMove expected "function" but received "'.concat(p(i),'"'));i(this.differ.from,this.ghost.$el,r,t)}if(b(this.dragEl,o,!0),this.ghost.move(),window.sortableDndOnDownState&&!(s<0||a<0)){window.sortableDndOnMoveState=!0,this.ghost.set("x",this.ghost.x+s-this.calcXY.x),this.ghost.set("y",this.ghost.y+a-this.calcXY.y),this.calcXY={x:s,y:a},this.ghost.move();e=w(this.$el);if(s<e.left||s>e.right||a<e.top||a>e.bottom)this.ghost.setStyle({cursor:"not-allowed"});else{var i=y(this.$el,n),o=i.index,n=i.el,l=i.rect,i=i.offset,h=l.left,f=l.right,c=l.top,u=l.bottom;if(!(!n||o<0||c<0)){var o=this.scrollEl,d=o.scrollTop,o=o.scrollLeft,o=e.left+o,d=e.top+d;if(this.scrollEl!==this.$el&&(e.left<0||e.top<0)){if(e.top<0&&c<d||e.left<0&&h<o)return}else if(c<e.top||h<e.left)return;if(this.dropEl=n,h<s&&s<f&&c<a&&a<u&&n!==this.dragEl&&(this.differ.to={node:this.dropEl,rect:l,offset:i},!n.animated)){this.captureAnimationState();d=this.options.onChange,o=g(this.dragEl);if(void 0!==d){if("function"!=typeof d)throw new Error('onChange expected "function" but received "'.concat(p(d),'"'));d(this.differ.from,this.differ.to,r,t)}o.top<i.top||o.left<i.left?this.$el.insertBefore(this.dragEl,n.nextElementSibling):this.$el.insertBefore(this.dragEl,n),this.animateRange()}}}}},_onDrop:function(t){this._offMoveEvents(),this._offUpEvents(),clearTimeout(this.dragStartTimer);var e=this.options,o=e.onDrop,n=e.chosenClass;if(e.stopPropagation&&t.stopPropagation(),b(this.dragEl,n,!1),window.sortableDndOnDownState&&window.sortableDndOnMoveState){this.differ.to.offset=g(this.dragEl),this.differ.to.rect=w(this.dragEl);e=this.differ,n=e.from,e=e.to,n=n.offset.top!==e.offset.top||n.offset.left!==e.offset.left;if(void 0!==o){if("function"!=typeof o)throw new Error('onDrop expected "function" but received "'.concat(p(o),'"'));o(n,t)}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.sortableDndOnDownState=null,window.sortableDndOnMoveState=null,window.sortableDndAnimationEnd=null,delete window.sortableDndOnDownState,delete window.sortableDndOnMoveState,delete window.sortableDndAnimationEnd},_handleDestroy:function(){var t=this,e=null,o=window.MutationObserver||window.WebKitMutationObserver||window.MozMutationObserver;if(o){var n=this.options.ownerDocument;if(!n)return;(e=new o(function(){n.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()}}},O}); | ||
| !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 p(t){return(p="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function n(t,e){for(var o=0;o<e.length;o++){var n=e[o];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}function i(t,e,o){e&&n(t.prototype,e),o&&n(t,o),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 o=Object.prototype.toString.call(t).slice(8,-1);return"Map"===(o="Object"===o&&t.constructor?t.constructor.name:o)||"Set"===o?Array.from(t):"Arguments"===o||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(o)?s(t,e):void 0}}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function s(t,e){(null==e||e>t.length)&&(e=t.length);for(var o=0,n=new Array(e);o<e;o++)n[o]=t[o];return n}function t(t){if("undefined"!=typeof window&&window.navigator)return!!navigator.userAgent.match(t)}var a=t(/(?:Trident.*rv[ :]?11\.|msie|iemobile|Windows Phone)/i),l=t(/Edge/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,d=["-webkit-transition","-moz-transition","-ms-transition","-o-transition","transition"],v=["-webkit-transform","-moz-transform","-ms-transform","-o-transform","transform"];function g(e,o){o?"none"===o?d.forEach(function(t){return x(e,t,"none")}):d.forEach(function(t){return x(e,t,"".concat(t.split("transition")[0],"transform ").concat(o))}):d.forEach(function(t){return x(e,t,"")})}function m(e,o){o?v.forEach(function(t){return x(e,t,"".concat(t.split("transform")[0]).concat(o))}):v.forEach(function(t){return x(e,t,"")})}function w(t,e,o,n){window.addEventListener?t.addEventListener(e,o,!(!n&&a)&&c):window.attachEvent&&t.attachEvent("on"+e,o)}function y(t,e,o,n){window.removeEventListener?t.removeEventListener(e,o,!(!n&&a)&&c):window.detachEvent&&t.detachEvent("on"+e,o)}function b(t){for(var e={top:0,left:0,height:0,width:0},o=(e.height=t.offsetHeight,e.width=t.offsetWidth,e.top=t.offsetTop,e.left=t.offsetLeft,t.offsetParent);null!==o;)e.top+=o.offsetTop,e.left+=o.offsetLeft,o=o.offsetParent;return e}function E(){var t=document.scrollingElement;return!t||t.contains(document.body)?document:t}function S(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!==E()?(t=t.getBoundingClientRect(),e.top=t.top,e.left=t.left,e.bottom=t.bottom,e.right=t.right,e.height=t.height,e.width=t.width):(e.top=0,e.left=0,e.bottom=window.innerHeight,e.right=window.innerWidth,e.height=window.innerHeight,e.width=window.innerWidth),e}function D(t,e,o){var n=r(Array.from(t.children)),t=n.indexOf(e);if(-1<t)return o?n[t]:{index:t,el:n[t],rect:S(n[t]),offset:b(n[t])};for(var i=0;i<n.length;i++)if(function(t,e){var o;if(t&&e)for(o=t.parentNode;o;){if(e===o)return 1;o=o.parentNode}return}(e,n[i]))return o?n[i]:{index:i,el:n[i],rect:S(n[i]),offset:b(n[i])};return o?null:{index:-1,el:null,rect:{},offset:{}}}function _(t,e,o){var n;t&&e&&(t.classList?t.classList[o?"add":"remove"](e):(n=(" "+t.className+" ").replace(u," ").replace(" "+e+" "," "),t.className=(n+(o?" "+e:"")).replace(u," ")))}function x(t,e,o){var n=t&&t.style;if(n){if(void 0===o)return document.defaultView&&document.defaultView.getComputedStyle?o=document.defaultView.getComputedStyle(t,""):t.currentStyle&&(o=t.currentStyle),void 0===e?o:o[e];n[e=e in n||-1!==e.indexOf("webkit")?e:"-webkit-"+e]=o+("string"==typeof o?"":"px")}}var $=function(){function t(){o(this,t),this.from={node:null,rect:{},offset:{}},this.to={node:null,rect:{},offset:{}}}return i(t,[{key:"get",value:function(t){return this[t]}},{key:"set",value:function(t,e){this[t]=e}},{key:"destroy",value:function(){this.from={node:null,rect:{},offset:{}},this.to={node:null,rect:{},offset:{}}}}]),t}(),M=function(){function e(t){o(this,e),this.options=t,this.x=0,this.y=0,this.exist=!1}return i(e,[{key:"init",value:function(t,e){var o,n;t&&(this.$el=t,o=(t=this.options).ghostClass,t=void 0===(t=t.ghostStyle)?{}:t,n=e.width,e=e.height,this.$el.class=o,this.$el.style.width=n+"px",this.$el.style.height=e+"px",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",g(this.$el,"none"),m(this.$el,"translate3d(0px, 0px, 0px)"),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)x(this.$el,e,t[e])}},{key:"rect",value:function(){return S(this.$el)}},{key:"move",value:function(t){var e=this.options.ghostAnimation;g(this.$el,t?"".concat(e,"ms"):"none"),this.exist||(document.body.appendChild(this.$el),this.exist=!0),m(this.$el,"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=(t&&(this.x=t.left,this.y=t.top,this.move(!0)),this.options.ghostAnimation);t?setTimeout(function(){return e.clear()},t):this.clear()}},{key:"clear",value:function(){this.$el&&this.$el.remove(),this.$el=null,this.x=0,this.y=0,this.exist=!1}}]),e}();function O(){var i=[];return{captureAnimationState:function(){var t=r(Array.from(this.$el.children)),e=(o=t,n=this.dragEl,e=this.dropEl,n=o.indexOf(n),o=o.indexOf(e),n<o?{start:n,end:o}:{start:o,end:n}),o=e.start,n=e.end;i.length=0,t.slice(o,n+1).forEach(function(t){i.push({target:t,rect:S(t)})})},animateRange:function(){var o=this;i.forEach(function(t){var e=t.target,t=t.rect;o.animate(e,t,o.animation)})},animate:function(t,e){var o=2<arguments.length&&void 0!==arguments[2]?arguments[2]:150,n=S(t),i=e.left-n.left,e=e.top-n.top;g(t,"none"),m(t,"translate3d(".concat(i,"px, ").concat(e,"px, 0)")),t.offsetLeft,g(t,"".concat(o,"ms")),m(t,"translate3d(0px, 0px, 0px)"),clearTimeout(t.animated),t.animated=setTimeout(function(){g(t,""),m(t,""),t.animated=null},o)}}}var P="undefined"!=typeof document&&!f&&!e&&"draggable"in document.createElement("div");function T(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 E();var o=t,n=!1;do{if(o.clientWidth<o.scrollWidth||o.clientHeight<o.scrollHeight){var i=x(o);if(o.clientWidth<o.scrollWidth&&("auto"==i.overflowX||"scroll"==i.overflowX)||o.clientHeight<o.scrollHeight&&("auto"==i.overflowY||"scroll"==i.overflowY)){if(!o.getBoundingClientRect||o===document.body)return E();if(n||e)return o;n=!0}}}while(o=o.parentNode);return E()}(this.$el,!0),this.dragEl=null,this.dropEl=null,this.differ=null,this.ghost=null;var o,n,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,onDrag:void 0,onMove:void 0,onDrop:void 0,onChange:void 0,forceFallback:!1,stopPropagation:!1,supportPassive:(o=!1,document.addEventListener("checkIfSupportPassive",null,{get passive(){return o=!0}}),o),supportPointer:"PointerEvent"in window&&!h,supportTouch:"ontouchstart"in window,ownerDocument:this.$el.ownerDocument};for(n in i)n in this.options||(this.options[n]=i[n]);this.nativeDraggable=!this.options.forceFallback&&P,this.differ=new $,this.ghost=new M(this.options),Object.assign(this,O(),{_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,o=t.supportTouch,t=t.supportPassive;w(this.$el,e?"pointerdown":o?"touchstart":"mousedown",this._onStart,t),this.nativeDraggable&&(w(this.$el,"dragover",this),w(this.$el,"dragenter",this))},_unbindEventListener:function(){var t=this.options.supportPassive;y(this.$el,"pointerdown",this._onStart,t),y(this.$el,"touchstart",this._onStart,t),y(this.$el,"mousedown",this._onStart,t),this.nativeDraggable&&(y(this.$el,"dragover",this),y(this.$el,"dragenter",this))},_onMoveEvents:function(t){var e=this.options,o=e.supportPointer,n=e.ownerDocument,e=e.supportPassive;w(n,o?"pointermove":t?"touchmove":"mousemove",this._onMove,e)},_onUpEvents:function(){var t=this.options,e=t.ownerDocument,t=t.supportPassive;w(e,"pointerup",this._onDrop,t),w(e,"pointercancel",this._onDrop,t),w(e,"touchend",this._onDrop,t),w(e,"touchcancel",this._onDrop,t),w(e,"mouseup",this._onDrop,t)},_offMoveEvents:function(){var t=this.options,e=t.ownerDocument,t=t.supportPassive;y(e,"pointermove",this._onMove,t),y(e,"touchmove",this._onMove,t),y(e,"mousemove",this._onMove,t)},_offUpEvents:function(){var t=this.options,e=t.ownerDocument,t=t.supportPassive;y(e,"pointerup",this._onDrop,t),y(e,"pointercancel",this._onDrop,t),y(e,"touchend",this._onDrop,t),y(e,"touchcancel",this._onDrop,t),y(e,"mouseup",this._onDrop,t)}}),this._bindEventListener(),this._handleDestroy()}return T.prototype={constructor:T,destroy:function(){this._unbindEventListener(),this._resetState()},_onStart:function(t){var e=this.options,o=e.delay,n=e.disabled,i=e.stopPropagation,e=e.delayOnTouchOnly;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;i&&t.stopPropagation(),!o||e&&!n||this.nativeDraggable&&(l||a)?this._onDrag(r,n):this.dragStartTimer=setTimeout(this._onDrag(r,n),o)}}},_onDrag:function(t,e){var o=this.options,n=o.draggable,o=o.dragging;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(p(n),'"'));try{document.selection?setTimeout(function(){document.selection.empty()},0):window.getSelection().removeAllRanges()}catch(t){throw new Error(t)}if(o){if("function"!=typeof o)throw new Error('dragging expected "function" or "string" but received "'.concat(p(o),'"'));this.dragEl=o(t)}else this.dragEl=D(this.$el,t.target,!0);if(!this.dragEl||this.dragEl.animated)return!0;n=D(this.$el,this.dragEl),o=n.rect,n=n.offset;window.sortableDndOnDownState=!0,this.ghost.set("x",o.left),this.ghost.set("y",o.top),this.differ.from={node:this.dragEl,rect:o,offset:n},this.calcXY={x:t.clientX,y:t.clientY},this._onMoveEvents(e),this._onUpEvents(e)},_onMove:function(t){void 0!==t.preventDefault&&t.preventDefault();var e=this.options,o=e.chosenClass,n=e.stopPropagation,i=e.onMove,e=e.onDrag,n=(n&&t.stopPropagation(),t.touches&&t.touches[0]),r=n||t,s=r.clientX,a=r.clientY,n=n?document.elementFromPoint(s,a):r.target;if(!this.ghost.$el&&(this.ghost.init(this.dragEl.cloneNode(!0),this.differ.from.rect),void 0!==e)){if("function"!=typeof e)throw new Error('onDrag expected "function" but received "'.concat(p(e),'"'));e(this.dragEl,r,t)}if(void 0!==i){if("function"!=typeof i)throw new Error('onMove expected "function" but received "'.concat(p(i),'"'));i(this.differ.from,this.ghost.$el,r,t)}if(_(this.dragEl,o,!0),this.ghost.move(),window.sortableDndOnDownState&&!(s<0||a<0)){window.sortableDndOnMoveState=!0,this.ghost.set("x",this.ghost.x+s-this.calcXY.x),this.ghost.set("y",this.ghost.y+a-this.calcXY.y),this.calcXY={x:s,y:a},this.ghost.move();e=S(this.$el);if(s<e.left||s>e.right||a<e.top||a>e.bottom)this.ghost.setStyle({cursor:"not-allowed"});else{var i=D(this.$el,n),o=i.index,n=i.el,l=i.rect,i=i.offset,h=l.left,f=l.right,c=l.top,u=l.bottom;if(!(!n||o<0||c<0)){var o=this.scrollEl,d=o.scrollTop,o=o.scrollLeft,o=e.left+o,d=e.top+d;if(this.scrollEl!==this.$el&&(e.left<0||e.top<0)){if(e.top<0&&c<d||e.left<0&&h<o)return}else if(c<e.top||h<e.left)return;if(this.dropEl=n,h<s&&s<f&&c<a&&a<u&&n!==this.dragEl&&(this.differ.to={node:this.dropEl,rect:l,offset:i},!n.animated)){this.captureAnimationState();d=this.options.onChange,o=b(this.dragEl);if(void 0!==d){if("function"!=typeof d)throw new Error('onChange expected "function" but received "'.concat(p(d),'"'));d(this.differ.from,this.differ.to,r,t)}o.top<i.top||o.left<i.left?this.$el.insertBefore(this.dragEl,n.nextElementSibling):this.$el.insertBefore(this.dragEl,n),this.animateRange()}}}}},_onDrop:function(t){this._offMoveEvents(),this._offUpEvents(),clearTimeout(this.dragStartTimer);var e=this.options,o=e.onDrop,n=e.chosenClass;if(e.stopPropagation&&t.stopPropagation(),_(this.dragEl,n,!1),window.sortableDndOnDownState&&window.sortableDndOnMoveState){this.differ.to.offset=b(this.dragEl),this.differ.to.rect=S(this.dragEl);e=this.differ,n=e.from,e=e.to,n=n.offset.top!==e.offset.top||n.offset.left!==e.offset.left;if(void 0!==o){if("function"!=typeof o)throw new Error('onDrop expected "function" but received "'.concat(p(o),'"'));o(n,t)}this.ghost.destroy(S(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.sortableDndOnDownState=null,window.sortableDndOnMoveState=null,window.sortableDndAnimationEnd=null,delete window.sortableDndOnDownState,delete window.sortableDndOnMoveState,delete window.sortableDndAnimationEnd},_handleDestroy:function(){var t=this,e=null,o=window.MutationObserver||window.WebKitMutationObserver||window.MozMutationObserver;if(o){var n=this.options.ownerDocument;if(!n)return;(e=new o(function(){n.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()}}},T}); |
| { | ||
| "name": "sortable-dnd", | ||
| "version": "0.2.0", | ||
| "version": "0.2.1", | ||
| "description": "JS Library for Drag and Drop, supports Sortable and Draggable", | ||
@@ -5,0 +5,0 @@ "main": "dist/sortable.js", |
@@ -46,5 +46,2 @@ <p> | ||
| // draggable: '#drag' // use id | ||
| dragging: (e) => { | ||
| return e.target.parentNode | ||
| }, | ||
| onDrag: (dragEl, event, originalEvent) => { | ||
@@ -94,2 +91,2 @@ // code | ||
| |--------------|--------------| | ||
| | `destroy()` | Manually clear all the state of the component, using this method the component will not be draggable | | ||
| | `destroy()` | Manually clear all the state of the component, using this method the component will not be draggable | |
@@ -1,6 +0,3 @@ | ||
| import { getRect, css } from './utils.js' | ||
| import { getRect, setTransition, setTransform } from './utils.js' | ||
| const CSS_TRANSITIONS = ['-webkit-transition', '-moz-transition', '-ms-transition', '-o-transition', 'transition'] | ||
| const CSS_TRANSFORMS = ['-webkit-transform', '-moz-transform', '-ms-transform', '-o-transform', 'transform'] | ||
| export default function Animation() { | ||
@@ -44,14 +41,14 @@ | ||
| CSS_TRANSITIONS.forEach(ts => css(el, ts, 'none')) | ||
| CSS_TRANSFORMS.forEach(tf => css(el, tf, `${tf.split('transform')[0]}translate3d(${left}px, ${top}px, 0)`)) | ||
| setTransition(el, 'none') | ||
| setTransform(el, `translate3d(${left}px, ${top}px, 0)`) | ||
| el.offsetLeft // 触发重绘 | ||
| CSS_TRANSITIONS.forEach(ts => css(el, ts, `${ts.split('transition')[0]}transform ${animation}ms`)) | ||
| CSS_TRANSFORMS.forEach(tf => css(el, tf, `${tf.split('transform')[0]}translate3d(0px, 0px, 0px)`)) | ||
| setTransition(el, `${animation}ms`) | ||
| setTransform(el, 'translate3d(0px, 0px, 0px)') | ||
| clearTimeout(el.animated) | ||
| el.animated = setTimeout(() => { | ||
| CSS_TRANSITIONS.forEach(ts => css(el, ts, '')) | ||
| CSS_TRANSFORMS.forEach(tf => css(el, tf, '')) | ||
| setTransition(el, '') | ||
| setTransform(el, '') | ||
| el.animated = null | ||
@@ -58,0 +55,0 @@ }, animation) |
| import { | ||
| css, | ||
| matches, | ||
@@ -13,111 +12,8 @@ getRect, | ||
| import { IOS, Edge, Safari, IE11OrLess, ChromeForAndroid } from './Brower.js' | ||
| import { Ghost, Differ } from './Plugins.js' | ||
| import Animation from './Animation.js' | ||
| import Events from './events.js' | ||
| /** | ||
| * 拖拽前后差异初始化 | ||
| */ | ||
| class Differ { | ||
| constructor() { | ||
| this.from = { node: null, rect: {}, offset: {} } | ||
| this.to = { node: null, rect: {}, offset: {} } | ||
| } | ||
| get(key) { | ||
| return this[key] | ||
| } | ||
| set(key, value) { | ||
| this[key] = value | ||
| } | ||
| destroy() { | ||
| this.from = { node: null, rect: {}, offset: {} } | ||
| this.to = { node: null, rect: {}, offset: {} } | ||
| } | ||
| } | ||
| /** | ||
| * 拖拽中的元素 | ||
| */ | ||
| class Ghost { | ||
| constructor(options) { | ||
| this.options = options | ||
| this.x = 0 | ||
| this.y = 0 | ||
| this.exist = false | ||
| } | ||
| init(el, rect) { | ||
| if (!el) return | ||
| this.$el = el | ||
| const { ghostClass, ghostStyle = {} } = this.options | ||
| const { width, height } = rect | ||
| this.$el.class = ghostClass | ||
| this.$el.style.width = width + 'px' | ||
| this.$el.style.height = height + '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 = 100000 | ||
| this.$el.style.opacity = 0.8 | ||
| this.$el.style.pointerEvents = 'none' | ||
| this.$el.style.cursor = 'move' | ||
| this.setStyle(ghostStyle) | ||
| } | ||
| get (key) { | ||
| return this[key] | ||
| } | ||
| set (key, value) { | ||
| this[key] = value | ||
| this[key] = value | ||
| } | ||
| setStyle(style) { | ||
| for (const key in style) { | ||
| css(this.$el, key, style[key]) | ||
| } | ||
| } | ||
| rect() { | ||
| return this.$el.getBoundingClientRect() | ||
| } | ||
| move(smooth) { | ||
| const { ghostAnimation } = this.options | ||
| if (smooth) this.$el.style.transition = `all ${ghostAnimation}ms` | ||
| else this.$el.style.transition = '' | ||
| // 将初始化放在 move 事件中，避免与鼠标点击事件冲突 | ||
| if (!this.exist) { | ||
| document.body.appendChild(this.$el) | ||
| this.exist = true | ||
| } | ||
| this.$el.style.transform = `translate3d(${this.x}px, ${this.y}px, 0)` | ||
| if (this.$el.style.cursor !== 'move') this.$el.style.cursor = 'move' | ||
| } | ||
| destroy(rect) { | ||
| if (rect) { | ||
| this.x = rect.left | ||
| this.y = rect.top | ||
| this.move(true) | ||
| } | ||
| setTimeout(() => { | ||
| if (this.$el) this.$el.remove() | ||
| this.$el = null | ||
| this.x = 0 | ||
| this.y = 0 | ||
| this.exist = false | ||
| }, this.options.ghostAnimation) | ||
| } | ||
| } | ||
| // -------------------------------- Sortable ---------------------------------- | ||
| const documentExists = typeof document !== 'undefined' | ||
@@ -210,3 +106,2 @@ const supportDraggable = documentExists && !ChromeForAndroid && !IOS && ('draggable' in document.createElement('div')) | ||
| if (evt.preventDefault !== void 0) evt.preventDefault() | ||
| if (stopPropagation) evt.stopPropagation() | ||
@@ -213,0 +108,0 @@ |
@@ -10,3 +10,29 @@ import { IE11OrLess } from './Brower.js' | ||
| export const CSSTRANSITIONS = ['-webkit-transition', '-moz-transition', '-ms-transition', '-o-transition', 'transition'] | ||
| export const CSSTRANSFORMS = ['-webkit-transform', '-moz-transform', '-ms-transform', '-o-transform', 'transform'] | ||
| /** | ||
| * set transition style | ||
| * @param {HTMLElement} el | ||
| * @param {String | Function} transition | ||
| */ | ||
| export function setTransition(el, transition) { | ||
| if (transition) { | ||
| if (transition === 'none') CSSTRANSITIONS.forEach(ts => css(el, ts, 'none')) | ||
| else CSSTRANSITIONS.forEach(ts => css(el, ts, `${ts.split('transition')[0]}transform ${transition}`)) | ||
| } | ||
| else CSSTRANSITIONS.forEach(ts => css(el, ts, '')) | ||
| } | ||
| /** | ||
| * set transform style | ||
| * @param {HTMLElement} el | ||
| * @param {String} transform | ||
| */ | ||
| export function setTransform(el, transform) { | ||
| if (transform) CSSTRANSFORMS.forEach(tf => css(el, tf, `${tf.split('transform')[0]}${transform}`)) | ||
| else CSSTRANSFORMS.forEach(tf => css(el, tf, '')) | ||
| } | ||
| /** | ||
| * detect passive event support | ||
@@ -316,2 +342,4 @@ */ | ||
| toggleClass, | ||
| setTransform, | ||
| setTransition, | ||
| supportPassive, | ||
@@ -318,0 +346,0 @@ getWindowScrollingElement, |
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by1.31%
84365
- Number of package files
- increased by9.09%
12
- Lines of code
- increased by2.59%
1784
Worsened metrics
- Number of lines in readme file
- decreased by-2.15%
91
No dependency changes