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.5.6 to 0.6.0
| /*! | ||
| * sortable-dnd v0.5.6 | ||
| * sortable-dnd v0.6.0 | ||
| * open source under the MIT license | ||
@@ -13,23 +13,2 @@ * https://github.com/mfuu/sortable-dnd#readme | ||
| function ownKeys(object, enumerableOnly) { | ||
| var keys = Object.keys(object); | ||
| if (Object.getOwnPropertySymbols) { | ||
| var symbols = Object.getOwnPropertySymbols(object); | ||
| enumerableOnly && (symbols = symbols.filter(function (sym) { | ||
| return Object.getOwnPropertyDescriptor(object, sym).enumerable; | ||
| })), keys.push.apply(keys, symbols); | ||
| } | ||
| return keys; | ||
| } | ||
| function _objectSpread2(target) { | ||
| for (var i = 1; i < arguments.length; i++) { | ||
| var source = null != arguments[i] ? arguments[i] : {}; | ||
| i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { | ||
| _defineProperty(target, key, source[key]); | ||
| }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { | ||
| Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); | ||
| }); | ||
| } | ||
| return target; | ||
| } | ||
| function _typeof(obj) { | ||
@@ -44,30 +23,2 @@ "@babel/helpers - typeof"; | ||
| } | ||
| function _defineProperty(obj, key, value) { | ||
| key = _toPropertyKey(key); | ||
| if (key in obj) { | ||
| Object.defineProperty(obj, key, { | ||
| value: value, | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true | ||
| }); | ||
| } else { | ||
| obj[key] = value; | ||
| } | ||
| return obj; | ||
| } | ||
| function _toPrimitive(input, hint) { | ||
| if (typeof input !== "object" || input === null) return input; | ||
| var prim = input[Symbol.toPrimitive]; | ||
| if (prim !== undefined) { | ||
| var res = prim.call(input, hint || "default"); | ||
| if (typeof res !== "object") return res; | ||
| throw new TypeError("@@toPrimitive must return a primitive value."); | ||
| } | ||
| return (hint === "string" ? String : Number)(input); | ||
| } | ||
| function _toPropertyKey(arg) { | ||
| var key = _toPrimitive(arg, "string"); | ||
| return typeof key === "symbol" ? key : String(key); | ||
| } | ||
@@ -79,7 +30,2 @@ var captureMode = { | ||
| var R_SPACE = /\s+/g; | ||
| var events = { | ||
| start: ['touchstart', 'mousedown'], | ||
| move: ['touchmove', 'mousemove'], | ||
| end: ['touchend', 'touchcancel', 'mouseup'] | ||
| }; | ||
| function userAgent(pattern) { | ||
@@ -164,3 +110,3 @@ if (typeof window !== 'undefined' && window.navigator) { | ||
| * get touch event and current event | ||
| * @param {Event|TouchEvent} evt | ||
| * @param {MouseEvent|TouchEvent} evt | ||
| */ | ||
@@ -187,19 +133,2 @@ function getEvent(evt) { | ||
| /** | ||
| * get element's offetTop in given parent element | ||
| */ | ||
| function getOffset(el, parentEl) { | ||
| var offset = { | ||
| top: 0, | ||
| left: 0, | ||
| height: el.offsetHeight, | ||
| width: el.offsetWidth | ||
| }; | ||
| do { | ||
| offset.top += el.offsetTop; | ||
| offset.left += el.offsetLeft; | ||
| } while ((el = el.parentNode) && el !== parentEl); | ||
| return offset; | ||
| } | ||
| /** | ||
| * get scroll element | ||
@@ -233,15 +162,8 @@ * @param {Boolean} includeSelf whether to include the passed element | ||
| * Returns the "bounding client rect" of given element | ||
| * @param {HTMLElement} el The element whose boundingClientRect is wanted | ||
| * @param {Object} check | ||
| * @example - { | ||
| * - parent: true | false, 'check if parentNode.height < el.height' | ||
| * - block: true | false, 'Whether the rect should be relative to the containing block of (including) the container' | ||
| * - relative: true | false, 'Whether the rect should be relative to the relative parent of (including) the contaienr' | ||
| * - } | ||
| * @param {HTMLElement} container The parent the element will be placed in | ||
| * @return {Object} The boundingClientRect of el, with specified adjustments | ||
| * @param {HTMLElement} el The element whose boundingClientRect is wanted | ||
| * @param {Boolean} relativeToContainingBlock Whether the rect should be relative to the containing block of (including) the container | ||
| * @param {HTMLElement} container The parent the element will be placed in | ||
| * @return {Object} The boundingClientRect of el, with specified adjustments | ||
| */ | ||
| function getRect(el) { | ||
| var check = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; | ||
| var container = arguments.length > 2 ? arguments[2] : undefined; | ||
| function getRect(el, relativeToContainingBlock, container) { | ||
| if (!el.getBoundingClientRect && el !== window) return; | ||
@@ -257,26 +179,2 @@ var elRect, top, left, bottom, right, height, width; | ||
| width = elRect.width; | ||
| if (check.parent && el.parentNode !== el.ownerDocument.body) { | ||
| var parentRect, | ||
| parentNode = el.parentNode; | ||
| while (parentNode && parentNode.getBoundingClientRect && parentNode !== el.ownerDocument.body) { | ||
| parentRect = parentNode.getBoundingClientRect(); | ||
| if (parentRect.height < height) { | ||
| top = parentRect.top; | ||
| left = parentRect.left; | ||
| bottom = parentRect.bottom; | ||
| right = parentRect.right; | ||
| height = parentRect.height; | ||
| width = parentRect.width; | ||
| return { | ||
| top: top, | ||
| left: left, | ||
| bottom: bottom, | ||
| right: right, | ||
| width: width, | ||
| height: height | ||
| }; | ||
| } | ||
| parentNode = parentNode.parentNode; | ||
| } | ||
| } | ||
| } else { | ||
@@ -290,22 +188,17 @@ top = 0; | ||
| } | ||
| if ((check.block || check.relative) && el !== window) { | ||
| // Adjust for translate() | ||
| if (relativeToContainingBlock && el !== window) { | ||
| container = container || el.parentNode; | ||
| do { | ||
| if (container && container.getBoundingClientRect) { | ||
| var containerRect = container.getBoundingClientRect(); | ||
| // Not needed on <= IE11 | ||
| if (!IE11OrLess) { | ||
| do { | ||
| if (container && container.getBoundingClientRect && (css(container, 'transform') !== 'none' || check.relative && css(container, 'position') !== 'static')) { | ||
| var containerRect = container.getBoundingClientRect(); | ||
| // Set relative to edges of padding box of container | ||
| top -= containerRect.top + parseInt(css(container, 'border-top-width')); | ||
| left -= containerRect.left + parseInt(css(container, 'border-left-width')); | ||
| bottom = top + elRect.height; | ||
| right = left + elRect.width; | ||
| break; | ||
| } | ||
| /* jshint boss:true */ | ||
| } while (container = container.parentNode); | ||
| } | ||
| // Set relative to edges of padding box of container | ||
| top -= containerRect.top + parseInt(css(container, 'border-top-width')); | ||
| left -= containerRect.left + parseInt(css(container, 'border-left-width')); | ||
| bottom = top + elRect.height; | ||
| right = left + elRect.width; | ||
| break; | ||
| } | ||
| /* jshint boss:true */ | ||
| } while (container = container.parentNode); | ||
| } | ||
@@ -380,3 +273,3 @@ return { | ||
| while (el = el.previousElementSibling) { | ||
| if (el.nodeName.toUpperCase() !== 'TEMPLATE' && (!selector || matches(el, selector)) && css(el, 'display') !== 'none') { | ||
| if (el.nodeName.toUpperCase() !== 'TEMPLATE' && (!selector || matches(el, selector)) && css(el, 'display') !== 'none' && el !== Sortable.dragged) { | ||
| index++; | ||
@@ -503,17 +396,2 @@ } | ||
| } | ||
| /** | ||
| * Check whether the front and rear positions are consistent, ignore front and rear height width changes | ||
| */ | ||
| function offsetChanged(before, after) { | ||
| function inRange(from, to, diff) { | ||
| if (from === to) return true; | ||
| return from >= to - diff && from <= to + diff; | ||
| } | ||
| var diffW = Math.abs(before.width - after.width); | ||
| var diffH = Math.abs(before.height - after.height); | ||
| var xChanged = !inRange(before.left, after.left, diffW); | ||
| var yChanged = !inRange(before.top, after.top, diffH); | ||
| return xChanged || yChanged; | ||
| } | ||
| function sort(before, after) { | ||
@@ -526,2 +404,11 @@ var compareValue = comparePosition(before, after); | ||
| } | ||
| function dispatchEvent(_ref) { | ||
| var sortable = _ref.sortable, | ||
| name = _ref.name, | ||
| params = _ref.params; | ||
| var callback = sortable.options[name]; | ||
| if (typeof callback === 'function') { | ||
| callback(Object.assign({}, params)); | ||
| } | ||
| } | ||
@@ -543,3 +430,3 @@ if (!window.requestAnimationFrame) { | ||
| AutoScroll.prototype = { | ||
| clear: function clear() { | ||
| destroy: function destroy() { | ||
| if (this.autoScrollAnimationFrame == null) { | ||
@@ -623,3 +510,3 @@ return; | ||
| end = _this$_getRange.end; | ||
| this.animations.length = 0; | ||
| var animations = []; | ||
| for (var i = start; i <= end; i++) { | ||
@@ -629,3 +516,3 @@ var node = children[i]; | ||
| if (node === except || node === Sortable.ghost) continue; | ||
| this.animations.push({ | ||
| animations.push({ | ||
| node: node, | ||
@@ -635,8 +522,10 @@ rect: getRect(node) | ||
| } | ||
| this.animations.push(animations); | ||
| }, | ||
| animate: function animate() { | ||
| for (var i = 0, len = this.animations.length; i < len; i++) { | ||
| var _this$animations$i = this.animations[i], | ||
| node = _this$animations$i.node, | ||
| rect = _this$animations$i.rect; | ||
| var animations = this.animations.pop(); | ||
| for (var i = 0, len = animations.length; i < len; i++) { | ||
| var _animations$i = animations[i], | ||
| node = _animations$i.node, | ||
| rect = _animations$i.rect; | ||
| this._excute(node, rect); | ||
@@ -686,3 +575,3 @@ } | ||
| var multiTo, multiFrom, dragElements; | ||
| var toSortable, fromSortable, dragElements, cloneElements; | ||
| function Multiple(options) { | ||
@@ -694,6 +583,6 @@ this.options = options || {}; | ||
| destroy: function destroy() { | ||
| multiTo = multiFrom = dragElements = null; | ||
| toSortable = fromSortable = dragElements = cloneElements = null; | ||
| }, | ||
| active: function active() { | ||
| return !!multiFrom; | ||
| return !!fromSortable; | ||
| }, | ||
@@ -728,15 +617,13 @@ select: function select(element) { | ||
| }, | ||
| getEmits: function getEmits() { | ||
| var emit = { | ||
| from: {}, | ||
| to: {} | ||
| }; | ||
| if (multiFrom && multiTo) { | ||
| emit.from = _objectSpread2({}, multiFrom); | ||
| emit.to = _objectSpread2({}, multiTo); | ||
| getParams: function getParams() { | ||
| if (!fromSortable) return {}; | ||
| var params = {}; | ||
| params.nodes = dragElements; | ||
| if (cloneElements) { | ||
| params.clones = cloneElements; | ||
| } | ||
| return emit; | ||
| return params; | ||
| }, | ||
| getHelper: function getHelper() { | ||
| if (!multiFrom) return null; | ||
| getGhostElement: function getGhostElement() { | ||
| if (!fromSortable) return null; | ||
| var container = document.createElement('div'); | ||
@@ -746,3 +633,3 @@ this.selectedElements.forEach(function (node, index) { | ||
| var opacity = index === 0 ? 1 : 0.5; | ||
| clone.style = "\n opacity: ".concat(opacity, ";\n position: absolute;\n z-index: ").concat(index, ";\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n "); | ||
| clone.style = "position: absolute;left: 0;top: 0;bottom: 0;right: 0;opacity: ".concat(opacity, ";z-index: ").concat(index, ";"); | ||
| container.appendChild(clone); | ||
@@ -752,122 +639,87 @@ }); | ||
| }, | ||
| getOnEndParams: function getOnEndParams() { | ||
| if (!multiFrom) return {}; | ||
| return { | ||
| changed: multiFrom.sortable.el !== multiTo.sortable.el || this._offsetChanged(multiFrom.nodes, multiTo.nodes) | ||
| }; | ||
| toggleVisible: function toggleVisible(bool) { | ||
| if (!fromSortable) return; | ||
| if (bool) { | ||
| var dragIndex = dragElements.indexOf(Sortable.dragged); | ||
| this._viewElements(dragElements, dragIndex, Sortable.dragged); | ||
| } else { | ||
| this._hideElements(dragElements); | ||
| } | ||
| }, | ||
| onDrag: function onDrag(rootEl, sortable) { | ||
| if (!this._isMultiple()) return; | ||
| // sort all selected elements by offset before drag | ||
| onDrag: function onDrag(sortable) { | ||
| var dragEl = Sortable.dragged; | ||
| if (!this.options.multiple || !this.selectedElements.length || this.selectedElements.indexOf(dragEl) < 0) { | ||
| return; | ||
| } | ||
| this.selectedElements.sort(function (a, b) { | ||
| return sort(a, b); | ||
| }); | ||
| var nodes = this.selectedElements.map(function (node) { | ||
| return { | ||
| node: node, | ||
| rect: getRect(node), | ||
| offset: getOffset(node, rootEl) | ||
| }; | ||
| }); | ||
| multiFrom = { | ||
| sortable: sortable, | ||
| nodes: nodes | ||
| }; | ||
| multiTo = { | ||
| sortable: sortable, | ||
| nodes: nodes | ||
| }; | ||
| dragElements = this.selectedElements; | ||
| }, | ||
| onStarted: function onStarted(sortable) { | ||
| if (!multiFrom) return; | ||
| var dragEl = Sortable.dragged; | ||
| fromSortable = sortable; | ||
| toSortable = sortable; | ||
| sortable.animator.collect(dragEl, null, dragEl.parentNode); | ||
| dragElements.forEach(function (node) { | ||
| if (node == dragEl) return; | ||
| css(node, 'display', 'none'); | ||
| }); | ||
| this._hideElements(dragElements); | ||
| sortable.animator.animate(); | ||
| }, | ||
| toggleElementsVisible: function toggleElementsVisible(bool) { | ||
| if (!multiFrom) return; | ||
| if (bool) { | ||
| var index = dragElements.indexOf(Sortable.dragged); | ||
| this._displayElements(dragElements, index, Sortable.dragged); | ||
| } else { | ||
| dragElements.forEach(function (node) { | ||
| if (node == Sortable.dragged) return; | ||
| css(node, 'display', 'none'); | ||
| }); | ||
| } | ||
| onChange: function onChange(sortable) { | ||
| if (!fromSortable) return; | ||
| toSortable = sortable; | ||
| }, | ||
| onChange: function onChange(dragEl, sortable) { | ||
| if (!multiFrom) return; | ||
| var rect = getRect(dragEl); | ||
| var offset = getOffset(dragEl, sortable.el); | ||
| multiTo = { | ||
| sortable: sortable, | ||
| nodes: dragElements.map(function (node) { | ||
| return { | ||
| node: node, | ||
| rect: rect, | ||
| offset: offset | ||
| }; | ||
| }) | ||
| }; | ||
| }, | ||
| onDrop: function onDrop(dragEvent, rootEl, sortableChanged) { | ||
| if (!multiFrom || !multiTo) return; | ||
| multiFrom.sortable = dragEvent.sortable; | ||
| onDrop: function onDrop(sortable, listChanged, pullMode) { | ||
| if (!fromSortable || !toSortable) return; | ||
| fromSortable = sortable; | ||
| var dragEl = Sortable.dragged; | ||
| var cloneEl = Sortable.clone; | ||
| multiTo.sortable.animator.collect(dragEl, null, dragEl.parentNode); | ||
| var index = dragElements.indexOf(dragEl); | ||
| var cloneElements = null; | ||
| if (sortableChanged && cloneEl) { | ||
| var dragIndex = dragElements.indexOf(dragEl); | ||
| toSortable.animator.collect(dragEl, null, dragEl.parentNode); | ||
| if (listChanged && pullMode === 'clone') { | ||
| css(cloneEl, 'display', 'none'); | ||
| // clone elements to another list | ||
| cloneElements = dragElements.map(function (node) { | ||
| return node.cloneNode(true); | ||
| }); | ||
| this._displayElements(cloneElements, index, cloneEl); | ||
| this._viewElements(cloneElements, dragIndex, cloneEl); | ||
| } else { | ||
| cloneElements = null; | ||
| } | ||
| this._displayElements(dragElements, index, dragEl); | ||
| multiTo.nodes = (cloneElements || dragElements).map(function (node) { | ||
| return { | ||
| node: node, | ||
| rect: getRect(node), | ||
| offset: getOffset(node, rootEl) | ||
| }; | ||
| }); | ||
| multiTo.sortable.animator.animate(); | ||
| this._viewElements(dragElements, dragIndex, dragEl); | ||
| toSortable.animator.animate(); | ||
| // Recalculate selected elements | ||
| if (sortableChanged) { | ||
| multiTo.sortable.multiplayer.addSelected(cloneElements || dragElements); | ||
| if (!cloneEl) { | ||
| multiFrom.sortable.multiplayer.removeSelected(dragElements); | ||
| if (listChanged) { | ||
| toSortable.multiplayer.addSelected(cloneElements || dragElements); | ||
| if (pullMode !== 'clone') { | ||
| fromSortable.multiplayer.removeSelected(dragElements); | ||
| } | ||
| } | ||
| }, | ||
| onSelect: function onSelect(dragEvent, dropEvent, from) { | ||
| if (!Sortable.dragged || !this._isMouseClick(dragEvent, dropEvent)) return; | ||
| var dragEl = Sortable.dragged; | ||
| var selectHandle = this.options.selectHandle; | ||
| onSelect: function onSelect(dragEvent, dropEvent, dragEl, sortable) { | ||
| var _getEvent = getEvent(dropEvent), | ||
| event = _getEvent.event, | ||
| target = _getEvent.target; | ||
| if (typeof selectHandle === 'function' && !selectHandle(dropEvent)) return; | ||
| if (Sortable.dragged || !this._isClick(dragEvent, event)) return; | ||
| var selectHandle = this.options.selectHandle; | ||
| if (typeof selectHandle === 'function' && !selectHandle(event)) return; | ||
| if (typeof selectHandle === 'string' && !matches(target, selectHandle)) return; | ||
| var index = this.selectedElements.indexOf(dragEl); | ||
| toggleClass(dragEl, this.options.selectedClass, index < 0); | ||
| var params = _objectSpread2(_objectSpread2({}, from), {}, { | ||
| event: dropEvent | ||
| }); | ||
| if (index < 0) { | ||
| var dragIndex = this.selectedElements.indexOf(dragEl); | ||
| toggleClass(dragEl, this.options.selectedClass, dragIndex < 0); | ||
| var params = { | ||
| from: sortable.el, | ||
| event: event, | ||
| node: dragEl, | ||
| index: index(dragEl) | ||
| }; | ||
| if (dragIndex < 0) { | ||
| this.selectedElements.push(dragEl); | ||
| from.sortable._dispatchEvent('onSelect', params); | ||
| dispatchEvent({ | ||
| sortable: sortable, | ||
| name: 'onSelect', | ||
| params: params | ||
| }); | ||
| } else { | ||
| this.selectedElements.splice(index, 1); | ||
| from.sortable._dispatchEvent('onDeselect', params); | ||
| this.selectedElements.splice(dragIndex, 1); | ||
| dispatchEvent({ | ||
| sortable: sortable, | ||
| name: 'onDeselect', | ||
| params: params | ||
| }); | ||
| } | ||
@@ -878,3 +730,3 @@ this.selectedElements.sort(function (a, b) { | ||
| }, | ||
| _displayElements: function _displayElements(elements, index, target) { | ||
| _viewElements: function _viewElements(elements, index, target) { | ||
| for (var i = 0; i < elements.length; i++) { | ||
@@ -890,72 +742,13 @@ css(elements[i], 'display', ''); | ||
| }, | ||
| _isMultiple: function _isMultiple() { | ||
| return this.options.multiple && this.selectedElements.length && this.selectedElements.indexOf(Sortable.dragged) > -1; | ||
| }, | ||
| _isMouseClick: function _isMouseClick(dragEvent, dropEvent) { | ||
| var difX = dropEvent.clientX - dragEvent.clientX; | ||
| var difY = dropEvent.clientY - dragEvent.clientY; | ||
| var difD = Math.sqrt(difX * difX + difY * difY); | ||
| return difD >= 0 && difD <= 1; | ||
| }, | ||
| _offsetChanged: function _offsetChanged(froms, tos) { | ||
| return !!froms.find(function (from) { | ||
| var to = tos.find(function (t) { | ||
| return t.node === from.node; | ||
| }); | ||
| return offsetChanged(from.offset, to.offset); | ||
| }); | ||
| } | ||
| }; | ||
| function Helper(distance) { | ||
| this.helper = null; | ||
| this.distance = distance; | ||
| } | ||
| Helper.prototype = { | ||
| get node() { | ||
| return this.helper; | ||
| }, | ||
| destroy: function destroy() { | ||
| if (this.helper && this.helper.parentNode) { | ||
| this.helper.parentNode.removeChild(this.helper); | ||
| _hideElements: function _hideElements(elements) { | ||
| for (var i = 0; i < elements.length; i++) { | ||
| if (elements[i] == Sortable.dragged) continue; | ||
| css(elements[i], 'display', 'none'); | ||
| } | ||
| this.helper = this.distance = null; | ||
| }, | ||
| move: function move(x, y) { | ||
| if (!this.helper) return; | ||
| setTransform(this.helper, "translate3d(".concat(x, "px, ").concat(y, "px, 0)")); | ||
| }, | ||
| init: function init(rect, element, container, options) { | ||
| if (this.helper) return; | ||
| var fallbackOnBody = options.fallbackOnBody, | ||
| ghostClass = options.ghostClass, | ||
| ghostStyle = options.ghostStyle; | ||
| var helperContainer = fallbackOnBody ? document.body : container; | ||
| this.helper = element.cloneNode(true); | ||
| toggleClass(this.helper, ghostClass, true); | ||
| var helperStyle = _objectSpread2({ | ||
| position: 'fixed', | ||
| top: rect.top, | ||
| left: rect.left, | ||
| width: rect.width, | ||
| height: rect.height, | ||
| minWidth: rect.width, | ||
| minHeight: rect.height, | ||
| opacity: '0.8', | ||
| overflow: 'hidden', | ||
| 'z-index': '100000', | ||
| 'box-sizing': 'border-box', | ||
| 'pointer-events': 'none' | ||
| }, ghostStyle); | ||
| for (var key in helperStyle) { | ||
| css(this.helper, key, helperStyle[key]); | ||
| } | ||
| setTransition(this.helper, 'none'); | ||
| setTransform(this.helper, 'translate3d(0px, 0px, 0px)'); | ||
| helperContainer.appendChild(this.helper); | ||
| var ox = this.distance.x / parseInt(this.helper.style.width) * 100; | ||
| var oy = this.distance.y / parseInt(this.helper.style.height) * 100; | ||
| css(this.helper, 'transform-origin', "".concat(ox, "% ").concat(oy, "%")); | ||
| css(this.helper, 'transform', 'translateZ(0)'); | ||
| css(this.helper, 'will-change', 'transform'); | ||
| _isClick: function _isClick(dragEvent, dropEvent) { | ||
| var dx = dropEvent.clientX - dragEvent.clientX; | ||
| var dy = dropEvent.clientY - dragEvent.clientY; | ||
| var dd = Math.sqrt(dx * dx + dy * dy); | ||
| return dd >= 0 && dd <= 1; | ||
| } | ||
@@ -965,10 +758,7 @@ }; | ||
| var expando = 'Sortable' + Date.now(); | ||
| var to, | ||
| from, | ||
| helper, | ||
| rootEl, | ||
| dragEl, | ||
| var dragEl, | ||
| dropEl, | ||
| nextEl, | ||
| cloneEl, | ||
| ghostEl, | ||
| parentEl, | ||
@@ -978,3 +768,2 @@ dragEvent, | ||
| lastDropEl, | ||
| isCloneMode, | ||
| listenerNode, | ||
@@ -984,2 +773,3 @@ lastHoverArea, | ||
| sortables = []; | ||
| var to, from, pullMode, oldIndex, newIndex, dragIndex, targetNode; | ||
| var _prepareGroup = function _prepareGroup(options) { | ||
@@ -993,3 +783,3 @@ var group = {}; | ||
| put: true, | ||
| revertClone: true | ||
| revertDrag: true | ||
| }; | ||
@@ -1000,3 +790,3 @@ } | ||
| group.put = originalGroup.put; | ||
| group.revertClone = originalGroup.revertClone; | ||
| group.revertDrag = originalGroup.revertDrag; | ||
| options.group = group; | ||
@@ -1013,6 +803,4 @@ }; | ||
| var threshold = sortable[expando].options.emptyInsertThreshold; | ||
| if (!threshold) return; | ||
| var rect = getRect(sortable, { | ||
| parent: true | ||
| }), | ||
| if (threshold == void 0) return; | ||
| var rect = getRect(sortable), | ||
| insideHorizontally = x >= rect.left - threshold && x <= rect.right + threshold, | ||
@@ -1051,2 +839,3 @@ insideVertically = y >= rect.top - threshold && y <= rect.bottom + threshold; | ||
| var defaults = { | ||
| store: null, | ||
| disabled: false, | ||
@@ -1079,3 +868,3 @@ group: '', | ||
| supportTouch: 'ontouchstart' in window, | ||
| emptyInsertThreshold: 5 | ||
| emptyInsertThreshold: -5 | ||
| }; | ||
@@ -1108,42 +897,7 @@ | ||
| constructor: Sortable, | ||
| // ========================================= Public Methods ========================================= | ||
| destroy: function destroy() { | ||
| _onDrag: function _onDrag( /** TouchEvent|MouseEvent */evt) { | ||
| var _this = this; | ||
| this._dispatchEvent('onDestroy', { | ||
| sortable: this | ||
| }); | ||
| events.start.forEach(function (event) { | ||
| return off(_this.el, event, _this._onDrag); | ||
| }); | ||
| sortables.splice(sortables.indexOf(this.el), 1); | ||
| this._clearState(); | ||
| this.el[expando] = this.animator = this.multiplayer = this.autoScroller = null; | ||
| }, | ||
| option: function option(key, value) { | ||
| if (value === void 0) { | ||
| return this.options[key]; | ||
| } | ||
| // Don't trigger start event when an element is been dragged | ||
| if (dragEl || this.options.disabled || !this.options.group.pull) return; | ||
| // set option | ||
| this.options[key] = value; | ||
| this.animator.options[key] = value; | ||
| this.multiplayer.options[key] = value; | ||
| this.autoScroller.options[key] = value; | ||
| if (key === 'group') { | ||
| _prepareGroup(this.options); | ||
| } | ||
| }, | ||
| select: function select(element) { | ||
| this.multiplayer.select(element); | ||
| }, | ||
| deselect: function deselect(element) { | ||
| this.multiplayer.deselect(element); | ||
| }, | ||
| getSelectedElements: function getSelectedElements() { | ||
| return this.multiplayer.getSelectedElements(); | ||
| }, | ||
| // ========================================= Properties ========================================= | ||
| _onDrag: function _onDrag( /** Event|TouchEvent */evt) { | ||
| if (this.options.disabled || !this.options.group.pull) return; | ||
| // only left button and enabled | ||
@@ -1155,61 +909,33 @@ if (/mousedown|pointerdown/.test(evt.type) && evt.button !== 0) return; | ||
| target = _getEvent.target; | ||
| if (target === this.el) return; | ||
| // Safari ignores further event handling after mousedown | ||
| if (Safari && target && target.tagName.toUpperCase() === 'SELECT') return; | ||
| dragEl = closest(target, this.options.draggable, this.el); | ||
| var _this$options = this.options, | ||
| handle = _this$options.handle, | ||
| draggable = _this$options.draggable; | ||
| dragEl = closest(target, draggable, this.el); | ||
| // No dragging is allowed when there is no dragging element | ||
| if (!dragEl || dragEl.animated) return; | ||
| listenerNode = touch ? dragEl : document; | ||
| cloneEl = dragEl.cloneNode(true); | ||
| parentEl = dragEl.parentNode; | ||
| Sortable.dragged = dragEl; | ||
| dragEvent = event; | ||
| dragEvent.sortable = this; | ||
| this.multiplayer.onDrag(this.el, this); | ||
| // get the position of the dragEl | ||
| var rect = getRect(dragEl); | ||
| var offset = getOffset(dragEl, this.el); | ||
| from = { | ||
| sortable: this, | ||
| node: dragEl, | ||
| rect: rect, | ||
| offset: offset | ||
| }; | ||
| to = { | ||
| sortable: this, | ||
| node: dragEl, | ||
| rect: rect, | ||
| offset: offset | ||
| }; | ||
| helper = new Helper({ | ||
| x: event.clientX - rect.left, | ||
| y: event.clientY - rect.top | ||
| }); | ||
| listenerNode = touch ? dragEl : document; | ||
| on(listenerNode, 'mouseup', this._onDrop); | ||
| on(listenerNode, 'touchend', this._onDrop); | ||
| on(listenerNode, 'touchcancel', this._onDrop); | ||
| on(listenerNode, 'mouseup', this._onDrop); | ||
| var handle = this.options.handle; | ||
| if (typeof handle === 'function' && !handle(event)) return; | ||
| if (typeof handle === 'string' && !matches(target, handle)) return; | ||
| this._prepareStart(touch); | ||
| }, | ||
| _prepareStart: function _prepareStart(touch) { | ||
| var _this2 = this; | ||
| var _this$options = this.options, | ||
| delay = _this$options.delay, | ||
| delayOnTouchOnly = _this$options.delayOnTouchOnly; | ||
| var _this$options2 = this.options, | ||
| delay = _this$options2.delay, | ||
| delayOnTouchOnly = _this$options2.delayOnTouchOnly; | ||
| // Delay is impossible for native DnD in Edge or IE | ||
| if (delay && (!delayOnTouchOnly || touch) && !(Edge || IE11OrLess)) { | ||
| events.move.forEach(function (event) { | ||
| return on(_this2.el.ownerDocument, event, _this2._delayMoveHandler); | ||
| }); | ||
| events.end.forEach(function (event) { | ||
| return on(_this2.el.ownerDocument, event, _this2._cancelStart); | ||
| }); | ||
| on(this.el.ownerDocument, 'touchmove', this._delayMoveHandler); | ||
| on(this.el.ownerDocument, 'mousemove', this._delayMoveHandler); | ||
| on(this.el.ownerDocument, 'mouseup', this._cancelStart); | ||
| on(this.el.ownerDocument, 'touchend', this._cancelStart); | ||
| on(this.el.ownerDocument, 'touchcancel', this._cancelStart); | ||
| dragStartTimer = setTimeout(function () { | ||
| return _this2._onStart(touch); | ||
| return _this._onStart(touch); | ||
| }, delay); | ||
@@ -1227,17 +953,10 @@ } else { | ||
| _cancelStart: function _cancelStart() { | ||
| var _this3 = this; | ||
| clearTimeout(dragStartTimer); | ||
| events.move.forEach(function (event) { | ||
| return off(_this3.el.ownerDocument, event, _this3._delayMoveHandler); | ||
| }); | ||
| events.end.forEach(function (event) { | ||
| return off(_this3.el.ownerDocument, event, _this3._cancelStart); | ||
| }); | ||
| off(this.el.ownerDocument, 'touchmove', this._delayMoveHandler); | ||
| off(this.el.ownerDocument, 'mousemove', this._delayMoveHandler); | ||
| off(this.el.ownerDocument, 'mouseup', this._cancelStart); | ||
| off(this.el.ownerDocument, 'touchend', this._cancelStart); | ||
| off(this.el.ownerDocument, 'touchcancel', this._cancelStart); | ||
| }, | ||
| _onStart: function _onStart( /** TouchEvent */touch) { | ||
| rootEl = this.el; | ||
| if (this.options.group.pull === 'clone') { | ||
| isCloneMode = true; | ||
| Sortable.clone = cloneEl; | ||
| } | ||
| _onStart: function _onStart(touch) { | ||
| if (touch) { | ||
@@ -1262,15 +981,25 @@ on(listenerNode, 'touchmove', this._nearestSortable); | ||
| _onStarted: function _onStarted() { | ||
| var i = index(dragEl); | ||
| to = this.el; | ||
| from = this.el; | ||
| oldIndex = i; | ||
| newIndex = i; | ||
| dragIndex = i; | ||
| targetNode = dragEl; | ||
| parentEl = dragEl.parentNode; | ||
| pullMode = this.options.group.pull; | ||
| cloneEl = dragEl.cloneNode(true); | ||
| toggleClass(cloneEl, this.options.chosenClass, true); | ||
| Sortable.clone = cloneEl; | ||
| Sortable.active = this; | ||
| this._dispatchEvent('onDrag', _objectSpread2(_objectSpread2({}, this._getFromTo()), {}, { | ||
| event: dragEvent | ||
| })); | ||
| this.multiplayer.onStarted(this); | ||
| var element = this._getGhostElement(); | ||
| helper.init(from.rect, element, this.el, this.options); | ||
| Sortable.ghost = helper.node; | ||
| // Hide the drag element and show the cloned dom element | ||
| Sortable.dragged = dragEl; | ||
| this._appendGhost(); | ||
| this.multiplayer.onDrag(this); | ||
| dispatchEvent({ | ||
| sortable: this, | ||
| name: 'onDrag', | ||
| params: this._getParams(dragEvent) | ||
| }); | ||
| css(dragEl, 'display', 'none'); | ||
| dragEl.parentNode.insertBefore(cloneEl, dragEl); | ||
| toggleClass(cloneEl, this.options.chosenClass, true); | ||
| Safari && css(document.body, 'user-select', 'none'); | ||
@@ -1284,5 +1013,43 @@ }, | ||
| } | ||
| return this.multiplayer.getHelper() || dragEl; | ||
| return this.multiplayer.getGhostElement() || dragEl; | ||
| }, | ||
| _nearestSortable: function _nearestSortable( /** Event|TouchEvent */evt) { | ||
| _appendGhost: function _appendGhost() { | ||
| if (ghostEl) return; | ||
| var _this$options3 = this.options, | ||
| fallbackOnBody = _this$options3.fallbackOnBody, | ||
| ghostClass = _this$options3.ghostClass, | ||
| ghostStyle = _this$options3.ghostStyle; | ||
| var container = fallbackOnBody ? document.body : this.el; | ||
| var element = this._getGhostElement(); | ||
| ghostEl = element.cloneNode(true); | ||
| toggleClass(ghostEl, ghostClass, true); | ||
| var rect = getRect(dragEl); | ||
| var style = Object.assign({ | ||
| position: 'fixed', | ||
| top: rect.top, | ||
| left: rect.left, | ||
| width: rect.width, | ||
| height: rect.height, | ||
| minWidth: rect.width, | ||
| minHeight: rect.height, | ||
| opacity: '0.8', | ||
| overflow: 'hidden', | ||
| 'z-index': '100000', | ||
| 'box-sizing': 'border-box', | ||
| 'pointer-events': 'none' | ||
| }, ghostStyle); | ||
| for (var key in style) { | ||
| css(ghostEl, key, style[key]); | ||
| } | ||
| setTransition(ghostEl, 'none'); | ||
| setTransform(ghostEl, 'translate3d(0px, 0px, 0px)'); | ||
| Sortable.ghost = ghostEl; | ||
| container.appendChild(ghostEl); | ||
| var ox = (dragEvent.clientX - rect.left) / parseInt(ghostEl.style.width) * 100; | ||
| var oy = (dragEvent.clientY - rect.top) / parseInt(ghostEl.style.height) * 100; | ||
| css(ghostEl, 'transform-origin', "".concat(ox, "% ").concat(oy, "%")); | ||
| css(ghostEl, 'transform', 'translateZ(0)'); | ||
| css(ghostEl, 'will-change', 'transform'); | ||
| }, | ||
| _nearestSortable: function _nearestSortable( /** TouchEvent|MouseEvent */evt) { | ||
| preventDefault(evt); | ||
@@ -1297,8 +1064,5 @@ if (!dragEvent || !dragEl || !_positionChanged(evt)) return; | ||
| moveEvent = event; | ||
| helper.move(event.clientX - dragEvent.clientX, event.clientY - dragEvent.clientY); | ||
| this._autoScroll(target); | ||
| var nearest = _detectNearestSortable(event.clientX, event.clientY); | ||
| nearest && nearest[expando]._onMove(event, target); | ||
| }, | ||
| _autoScroll: function _autoScroll(target) { | ||
| var dx = event.clientX - dragEvent.clientX; | ||
| var dy = event.clientY - dragEvent.clientY; | ||
| setTransform(ghostEl, "translate3d(".concat(dx, "px, ").concat(dy, "px, 0)")); | ||
| if (this.options.autoScroll) { | ||
@@ -1308,2 +1072,4 @@ var scrollEl = getParentAutoScrollElement(target, true); | ||
| } | ||
| var nearest = _detectNearestSortable(event.clientX, event.clientY); | ||
| nearest && nearest[expando]._onMove(event, target); | ||
| }, | ||
@@ -1326,6 +1092,2 @@ _allowPut: function _allowPut() { | ||
| nextEl = order < 0 ? dropEl.nextSibling : dropEl; | ||
| if (lastDropEl !== dropEl) { | ||
| lastHoverArea = 0; | ||
| return true; | ||
| } | ||
| var rect = getRect(dropEl), | ||
@@ -1337,2 +1099,6 @@ direction = typeof this.options.direction === 'function' ? this.options.direction.call(moveEvent, dragEl, this) : this.options.direction, | ||
| hoverArea = mouseOnAxis >= (vertical ? rect.top : rect.left) && mouseOnAxis < (vertical ? rect.bottom : rect.right) - dropElSize / 2 ? -1 : 1; | ||
| if (lastDropEl !== dropEl) { | ||
| lastHoverArea = hoverArea; | ||
| return true; | ||
| } | ||
| if (lastHoverArea !== hoverArea) { | ||
@@ -1344,20 +1110,24 @@ lastHoverArea = hoverArea; | ||
| }, | ||
| _onMove: function _onMove( /** Event|TouchEvent */event, target) { | ||
| _onMove: function _onMove( /** TouchEvent|MouseEvent */event, target) { | ||
| if (!this._allowPut()) return; | ||
| this._dispatchEvent('onMove', _objectSpread2(_objectSpread2({}, this._getFromTo()), {}, { | ||
| event: event | ||
| })); | ||
| rootEl = this.el; | ||
| dropEl = closest(target, this.options.draggable, rootEl); | ||
| dispatchEvent({ | ||
| sortable: this, | ||
| name: 'onMove', | ||
| params: this._getParams(event) | ||
| }); | ||
| // insert to last | ||
| if (rootEl !== from.sortable.el && (target === rootEl || !lastChild(rootEl))) { | ||
| lastDropEl = null; | ||
| this._onInsert(event, true); | ||
| if (this.el !== from && (target === this.el || !lastChild(this.el))) { | ||
| dropEl = lastDropEl = null; | ||
| this._onInsert(event); | ||
| return; | ||
| } | ||
| dropEl = closest(target, this.options.draggable, this.el); | ||
| if (!dropEl || dropEl.animated || !this._allowSwap()) return; | ||
| if (dropEl === cloneEl || containes(dropEl, cloneEl)) return; | ||
| if (rootEl !== from.sortable.el) { | ||
| this._onInsert(event, false); | ||
| if (dropEl === cloneEl || containes(dropEl, cloneEl)) { | ||
| lastDropEl = dropEl; | ||
| return; | ||
| } | ||
| if (this.el !== from) { | ||
| this._onInsert(event); | ||
| } else if (!(within(event, parentEl) && target === parentEl)) { | ||
@@ -1368,98 +1138,114 @@ this._onChange(event); | ||
| }, | ||
| _onInsert: function _onInsert( /** Event|TouchEvent */event, insertToLast) { | ||
| var target = insertToLast ? cloneEl : dropEl; | ||
| parentEl = insertToLast ? rootEl : dropEl.parentNode; | ||
| from.sortable.animator.collect(cloneEl, null, cloneEl.parentNode, cloneEl); | ||
| _onInsert: function _onInsert(event) { | ||
| var target = dropEl || cloneEl; | ||
| parentEl = dropEl ? dropEl.parentNode : this.el; | ||
| from[expando].animator.collect(cloneEl, null, cloneEl.parentNode, cloneEl); | ||
| this.animator.collect(null, target, parentEl, cloneEl); | ||
| this.multiplayer.onChange(cloneEl, this); | ||
| to = { | ||
| sortable: this, | ||
| node: target, | ||
| rect: getRect(target), | ||
| offset: getOffset(target, rootEl) | ||
| }; | ||
| this.multiplayer.onChange(this); | ||
| to = this.el; | ||
| oldIndex = index(cloneEl); | ||
| newIndex = index(target); | ||
| targetNode = target; | ||
| // show dragEl before clone to another list | ||
| if (isCloneMode && this.el !== dragEvent.sortable.el && from.sortable.el === dragEvent.sortable.el) { | ||
| // no need to trigger 'onRemove' when clone to another list | ||
| if (pullMode === 'clone' && this.el !== dragEvent.sortable.el && from === dragEvent.sortable.el) { | ||
| this.animator.collect(dragEl, cloneEl, dragEl.parentNode); | ||
| css(dragEl, 'display', ''); | ||
| if (!dragEvent.sortable.options.group.revertClone) { | ||
| if (!dragEvent.sortable.options.group.revertDrag) { | ||
| dragEl.parentNode.insertBefore(dragEl, cloneEl); | ||
| } | ||
| dragEvent.sortable.multiplayer.toggleElementsVisible(true); | ||
| dragEvent.sortable.multiplayer.toggleVisible(true); | ||
| this.animator.animate(); | ||
| } else { | ||
| dispatchEvent({ | ||
| sortable: from[expando], | ||
| name: 'onRemove', | ||
| params: this._getParams(event) | ||
| }); | ||
| } | ||
| from.sortable._dispatchEvent('onRemove', _objectSpread2(_objectSpread2({}, this._getFromTo()), {}, { | ||
| event: event | ||
| })); | ||
| if (insertToLast) { | ||
| if (dropEl) { | ||
| parentEl.insertBefore(cloneEl, dropEl); | ||
| } else { | ||
| parentEl.appendChild(cloneEl); | ||
| } else { | ||
| parentEl.insertBefore(cloneEl, dropEl); | ||
| } | ||
| this._dispatchEvent('onAdd', _objectSpread2(_objectSpread2({}, this._getFromTo()), {}, { | ||
| event: event | ||
| })); | ||
| // hide dragEl when returning to the original list | ||
| if (isCloneMode && this.el === dragEvent.sortable.el) { | ||
| // no need to trigger 'onAdd' when clone back to the original list | ||
| if (pullMode === 'clone' && this.el === dragEvent.sortable.el) { | ||
| css(dragEl, 'display', 'none'); | ||
| dragEvent.sortable.multiplayer.toggleElementsVisible(false); | ||
| dragEvent.sortable.multiplayer.toggleVisible(false); | ||
| } else { | ||
| dispatchEvent({ | ||
| sortable: this, | ||
| name: 'onAdd', | ||
| params: this._getParams(event) | ||
| }); | ||
| } | ||
| from.sortable.animator.animate(); | ||
| from[expando].animator.animate(); | ||
| this.animator.animate(); | ||
| from.sortable = this; | ||
| from = this.el; | ||
| }, | ||
| _onChange: function _onChange( /** Event|TouchEvent */event) { | ||
| _onChange: function _onChange(event) { | ||
| if (dropEl === dragEl) return; | ||
| parentEl = dropEl.parentNode; | ||
| this.animator.collect(cloneEl, dropEl, parentEl); | ||
| this.multiplayer.onChange(cloneEl, this); | ||
| to = { | ||
| this.multiplayer.onChange(this); | ||
| oldIndex = index(cloneEl); | ||
| newIndex = index(dropEl); | ||
| targetNode = dropEl; | ||
| parentEl.insertBefore(cloneEl, nextEl); | ||
| dispatchEvent({ | ||
| sortable: this, | ||
| node: dropEl, | ||
| rect: getRect(dropEl), | ||
| offset: getOffset(dropEl, rootEl) | ||
| }; | ||
| this._dispatchEvent('onChange', _objectSpread2(_objectSpread2({}, this._getFromTo()), {}, { | ||
| event: event | ||
| })); | ||
| parentEl.insertBefore(cloneEl, nextEl); | ||
| name: 'onChange', | ||
| params: this._getParams(event) | ||
| }); | ||
| this.animator.animate(); | ||
| from.sortable = this; | ||
| from = this.el; | ||
| }, | ||
| _onDrop: function _onDrop( /** Event|TouchEvent */event) { | ||
| _onDrop: function _onDrop( /** TouchEvent|MouseEvent */event) { | ||
| preventDefault(event); | ||
| this._cancelStart(); | ||
| this._unbindEvents(); | ||
| this.autoScroller.clear(); | ||
| off(listenerNode, 'touchmove', this._nearestSortable); | ||
| off(listenerNode, 'mousemove', this._nearestSortable); | ||
| off(listenerNode, 'mouseup', this._onDrop); | ||
| off(listenerNode, 'touchend', this._onDrop); | ||
| off(listenerNode, 'touchcancel', this._onDrop); | ||
| if (dragEl && dragEvent && moveEvent) { | ||
| this._onEnd(event); | ||
| } else if (this.options.multiple) { | ||
| this.multiplayer.onSelect(dragEvent, event, _objectSpread2({}, from)); | ||
| this.multiplayer.onSelect(dragEvent, event, dragEl, this); | ||
| } | ||
| this._clearState(); | ||
| if (ghostEl && ghostEl.parentNode) { | ||
| ghostEl.parentNode.removeChild(ghostEl); | ||
| } | ||
| this.multiplayer.destroy(); | ||
| this.autoScroller.destroy(); | ||
| _nulling(); | ||
| }, | ||
| _onEnd: function _onEnd( /** Event|TouchEvent */event) { | ||
| from.sortable = dragEvent.sortable; | ||
| var sortableChanged = from.sortable.el !== to.sortable.el; | ||
| _onEnd: function _onEnd(event) { | ||
| from = dragEvent.sortable.el; | ||
| oldIndex = dragIndex; | ||
| var listChanged = from !== to; | ||
| // swap real drag element to the current drop position | ||
| if (this.options.swapOnDrop && (!isCloneMode || !sortableChanged)) { | ||
| if (this.options.swapOnDrop && (pullMode !== 'clone' || !listChanged)) { | ||
| parentEl.insertBefore(dragEl, cloneEl); | ||
| } | ||
| // re-acquire the offset and rect values of the dragged element as the value after the drag is completed | ||
| to.rect = getRect(cloneEl); | ||
| to.offset = getOffset(cloneEl, rootEl); | ||
| if (to.node === cloneEl) to.node = dragEl; | ||
| this.multiplayer.onDrop(dragEvent, rootEl, sortableChanged); | ||
| var multiParams = this.multiplayer.getOnEndParams(); | ||
| var changed = sortableChanged || offsetChanged(from.offset, to.offset); | ||
| var params = _objectSpread2(_objectSpread2({}, this._getFromTo()), {}, { | ||
| changed: changed, | ||
| event: event | ||
| }, multiParams); | ||
| if (sortableChanged) { | ||
| from.sortable._dispatchEvent('onDrop', params); | ||
| if (targetNode === cloneEl) targetNode = dragEl; | ||
| this.multiplayer.onDrop(from[expando], listChanged, pullMode); | ||
| var params = this._getParams(event); | ||
| if (listChanged) { | ||
| dispatchEvent({ | ||
| sortable: from[expando], | ||
| name: 'onDrop', | ||
| params: params | ||
| }); | ||
| } | ||
| to.sortable._dispatchEvent('onDrop', params); | ||
| if (!isCloneMode || !sortableChanged || this.multiplayer.active()) { | ||
| dispatchEvent({ | ||
| sortable: to[expando], | ||
| name: 'onDrop', | ||
| params: params | ||
| }); | ||
| if (pullMode !== 'clone' || !listChanged || this.multiplayer.active()) { | ||
| parentEl.removeChild(cloneEl); | ||
@@ -1472,31 +1258,59 @@ } else { | ||
| }, | ||
| _getFromTo: function _getFromTo() { | ||
| var multiEmit = this.multiplayer.getEmits(); | ||
| return { | ||
| from: _objectSpread2(_objectSpread2({}, multiEmit.from), from), | ||
| to: _objectSpread2(_objectSpread2({}, multiEmit.to), to) | ||
| }; | ||
| _getParams: function _getParams(event) { | ||
| var evt = Object.create(null); | ||
| evt.event = event; | ||
| evt.to = to; | ||
| evt.from = from; | ||
| evt.node = dragEl; | ||
| evt.clone = cloneEl; | ||
| evt.target = targetNode; | ||
| evt.oldIndex = oldIndex; | ||
| evt.newIndex = newIndex; | ||
| evt.pullMode = pullMode; | ||
| evt.relative = targetNode === dragEl ? 0 : sort(targetNode, cloneEl); | ||
| var multiParams = this.multiplayer.getParams(); | ||
| if (multiParams.nodes) { | ||
| evt.nodes = multiParams.nodes; | ||
| } | ||
| if (multiParams.clones) { | ||
| evt.clones = multiParams.clones; | ||
| } | ||
| return evt; | ||
| }, | ||
| _dispatchEvent: function _dispatchEvent(event) { | ||
| var params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; | ||
| var callback = this.options[event]; | ||
| if (typeof callback === 'function') { | ||
| callback(_objectSpread2({}, params)); | ||
| // ========================================= Public Methods ========================================= | ||
| destroy: function destroy() { | ||
| _nulling(); | ||
| this._cancelStart(); | ||
| off(this.el, 'touchstart', this._onDrag); | ||
| off(this.el, 'mousedown', this._onDrag); | ||
| sortables.splice(sortables.indexOf(this.el), 1); | ||
| this.el[expando] = this.animator = this.multiplayer = this.autoScroller = null; | ||
| }, | ||
| option: function option(key, value) { | ||
| if (value === void 0) { | ||
| return this.options[key]; | ||
| } | ||
| // set option | ||
| this.options[key] = value; | ||
| this.animator.options[key] = value; | ||
| this.multiplayer.options[key] = value; | ||
| this.autoScroller.options[key] = value; | ||
| if (key === 'group') { | ||
| _prepareGroup(this.options); | ||
| } | ||
| }, | ||
| _clearState: function _clearState() { | ||
| this.multiplayer.destroy(); | ||
| helper && helper.destroy(); | ||
| to = from = helper = rootEl = dragEl = dropEl = nextEl = cloneEl = parentEl = dragEvent = moveEvent = lastDropEl = isCloneMode = listenerNode = lastHoverArea = dragStartTimer = Sortable.clone = Sortable.ghost = Sortable.active = Sortable.dragged = null; | ||
| select: function select(element) { | ||
| this.multiplayer.select(element); | ||
| }, | ||
| _unbindEvents: function _unbindEvents() { | ||
| var _this4 = this; | ||
| events.move.forEach(function (event) { | ||
| return off(listenerNode, event, _this4._nearestSortable); | ||
| }); | ||
| events.end.forEach(function (event) { | ||
| return off(listenerNode, event, _this4._onDrop); | ||
| }); | ||
| deselect: function deselect(element) { | ||
| this.multiplayer.deselect(element); | ||
| }, | ||
| getSelectedElements: function getSelectedElements() { | ||
| return this.multiplayer.getSelectedElements(); | ||
| } | ||
| }; | ||
| var _nulling = function _nulling() { | ||
| to = from = dragEl = dropEl = nextEl = cloneEl = ghostEl = parentEl = pullMode = oldIndex = newIndex = dragIndex = dragEvent = moveEvent = targetNode = lastDropEl = listenerNode = lastHoverArea = dragStartTimer = Sortable.clone = Sortable.ghost = Sortable.active = Sortable.dragged = null; | ||
| }; | ||
| Sortable.utils = { | ||
@@ -1508,17 +1322,9 @@ on: on, | ||
| closest: closest, | ||
| getOffset: getOffset, | ||
| getRect: getRect, | ||
| toggleClass: toggleClass, | ||
| detectDirection: detectDirection | ||
| }; | ||
| /** | ||
| * Get the Sortable instance of an element | ||
| */ | ||
| Sortable.get = function (element) { | ||
| return element[expando]; | ||
| }; | ||
| /** | ||
| * Create sortable instance | ||
| */ | ||
| Sortable.create = function (el, options) { | ||
@@ -1525,0 +1331,0 @@ return new Sortable(el, options); |
@@ -1,1 +0,1 @@ | ||
| !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).Sortable=e()}(this,function(){"use strict";function A(e,t){var n,o=Object.keys(e);return Object.getOwnPropertySymbols&&(n=Object.getOwnPropertySymbols(e),t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),o.push.apply(o,n)),o}function a(o){for(var t=1;t<arguments.length;t++){var i=null!=arguments[t]?arguments[t]:{};t%2?A(Object(i),!0).forEach(function(t){var e,n;e=o,n=i[t=t],(t=function(t){t=function(t,e){if("object"!=typeof t||null===t)return t;var n=t[Symbol.toPrimitive];if(void 0===n)return("string"===e?String:Number)(t);n=n.call(t,e||"default");if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}(t,"string");return"symbol"==typeof t?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n}):Object.getOwnPropertyDescriptors?Object.defineProperties(o,Object.getOwnPropertyDescriptors(i)):A(Object(i)).forEach(function(t){Object.defineProperty(o,t,Object.getOwnPropertyDescriptor(i,t))})}return o}function j(t){return(j="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)}var R={capture:!1,passive:!1},H=/\s+/g,i={start:["touchstart","mousedown"],move:["touchmove","mousemove"],end:["touchend","touchcancel","mouseup"]};function t(t){if("undefined"!=typeof window&&window.navigator)return!!navigator.userAgent.match(t)}var e,n,s,l,c,m=t(/(?:Trident.*rv[ :]?11\.|msie|iemobile|Windows Phone)/i),L=t(/Edge/i),B=t(/safari/i)&&!t(/chrome/i)&&!t(/android/i),k=(e=!1,document.addEventListener("checkIfSupportPassive",null,{get passive(){return e=!0}}),e),W="undefined"==typeof window||"undefined"==typeof document?{}:(n=window.getComputedStyle(document.documentElement,"")||["-moz-hidden-iframe"],n=(Array.prototype.slice.call(n).join("").match(/-(moz|webkit|ms)-/)||""===n.OLink&&["","o"])[1],{dom:"WebKit|Moz|MS|O".match(new RegExp("("+n+")","i"))[1],lowercase:n,css:"-"+n+"-",js:n[0].toUpperCase()+n.substr(1)});function z(t,e){t.style["".concat(W.css,"transition-duration")]=null==e?"":"".concat(e,"ms")}function h(t,e){t.style["".concat(W.css,"transform")]=e?"".concat(e):""}function u(t,e,n){window.addEventListener?t.addEventListener(e,n,!(!k&&m)&&R):window.attachEvent?t.attachEvent("on"+e,n):t["on"+e]=n}function o(t,e,n){window.removeEventListener?t.removeEventListener(e,n,!(!k&&m)&&R):window.detachEvent?t.detachEvent("on"+e,n):t["on"+e]=null}function V(t){var e=t,n=t.touches&&t.touches[0]||t.changedTouches&&t.changedTouches[0],t=n?document.elementFromPoint(n.clientX,n.clientY):t.target;return!n||"clientX"in e||(e.clientX=n.clientX,e.clientY=n.clientY,e.pageX=n.pageX,e.pageY=n.pageY,e.screenX=n.screenX,e.screenY=n.screenY),{touch:n,event:e,target:t}}function d(t,e){for(var n={top:0,left:0,height:t.offsetHeight,width:t.offsetWidth};n.top+=t.offsetTop,n.left+=t.offsetLeft,(t=t.parentNode)&&t!==e;);return n}function q(){return document.scrollingElement||document.documentElement}function g(t,e,n){var o,i,r,s,l,a,c,h=1<arguments.length&&void 0!==e?e:{},u=2<arguments.length?n:void 0;if(t.getBoundingClientRect||t===window){if(t!==window&&t.parentNode&&t!==q()){if(i=(o=t.getBoundingClientRect()).top,r=o.left,s=o.bottom,l=o.right,a=o.height,c=o.width,h.parent&&t.parentNode!==t.ownerDocument.body)for(var d,p=t.parentNode;p&&p.getBoundingClientRect&&p!==t.ownerDocument.body;){if((d=p.getBoundingClientRect()).height<a)return i=d.top,r=d.left,s=d.bottom,l=d.right,a=d.height,{top:i,left:r,bottom:s,right:l,width:c=d.width,height:a};p=p.parentNode}}else r=i=0,s=window.innerHeight,l=window.innerWidth,a=window.innerHeight,c=window.innerWidth;if((h.block||h.relative)&&t!==window&&(u=u||t.parentNode,!m))do{if(u&&u.getBoundingClientRect&&("none"!==y(u,"transform")||h.relative&&"static"!==y(u,"position"))){var f=u.getBoundingClientRect();i-=f.top+parseInt(y(u,"border-top-width")),r-=f.left+parseInt(y(u,"border-left-width")),s=i+o.height,l=r+o.width;break}}while(u=u.parentNode);return{top:i,left:r,bottom:s,right:l,width:c,height:a}}}function p(t,e,n,o){if(t){n=n||document;do{if(null==e){var i=Array.prototype.slice.call(n.children),r=i.indexOf(t);if(-1<r)return i[r];for(var s=0;s<i.length;s++)if(G(t,i[s]))return i[s]}else if((">"!==e[0]||t.parentNode===n)&&v(t,e)||o&&t===n)return t}while(t=t.parentNode)}return null}function G(t,e){if(t&&e){if(e.compareDocumentPosition)return e===t||16&e.compareDocumentPosition(t);if(e.contains&&1===t.nodeType)return e.contains(t)&&e!==t;for(;t=t.parentNode;)if(t===e)return 1}}function U(t,e,n,o){for(var i=0,r=0,s=t.children;i<s.length;){if(s[i]!==F.ghost&&"none"!==y(s[i],"display")&&p(s[i],n,t,!1)&&(o||s[i]!==F.dragged)){if(r===e)return s[i];r++}i++}return null}function K(t,e){var n,o=y(t),i=parseInt(o.width)-parseInt(o.paddingLeft)-parseInt(o.paddingRight)-parseInt(o.borderLeftWidth)-parseInt(o.borderRightWidth),r=U(t,0,e),t=U(t,1,e),e=r&&y(r),s=t&&y(t),l=e&&parseInt(e.marginLeft)+parseInt(e.marginRight)+g(r).width,a=s&&parseInt(s.marginLeft)+parseInt(s.marginRight)+g(t).width,c=L||m?"cssFloat":"float";return"flex"===o.display?"column"===o.flexDirection||"column-reverse"===o.flexDirection?"vertical":"horizontal":"grid"===o.display?o.gridTemplateColumns.split(" ").length<=1?"vertical":"horizontal":r&&e.float&&"none"!==e.float?(n="left"===e.float?"left":"right",!t||"both"!==s.clear&&s.clear!==n?"horizontal":"vertical"):r&&("block"===e.display||"flex"===e.display||"table"===e.display||"grid"===e.display||i<=l&&"none"===o[c]||t&&"none"===o[c]&&i<l+a)?"vertical":"horizontal"}function f(t,e,n){var o;t&&e&&(t.classList?t.classList[n?"add":"remove"](e):(o=(" "+t.className+" ").replace(H," ").replace(" "+e+" "," "),t.className=(o+(n?" "+e:"")).replace(H," ")))}function v(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}}function y(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")}}function Z(t,e){function n(t,e,n){return t===e||e-n<=t&&t<=e+n}var o=Math.abs(t.width-e.width),i=Math.abs(t.height-e.height),o=!n(t.left,e.left,o),t=!n(t.top,e.top,i);return o||t}function r(t,e){e=e;t=(t=t).compareDocumentPosition?t.compareDocumentPosition(e):t.contains?(t!=e&&t.contains(e)&&16)+(t!=e&&e.contains(t)&&8)+(0<=t.sourceIndex&&0<=e.sourceIndex?(t.sourceIndex<e.sourceIndex&&4)+(t.sourceIndex>e.sourceIndex&&2):1)+0:0;return 2===t?1:4===t?-1:0}function J(t){void 0!==t.preventDefault&&t.cancelable&&t.preventDefault()}function Q(t){this.options=t,this.autoScrollAnimationFrame=null}function $(t){this.options=t,this.animations=[]}function tt(t){this.options=t||{},this.selectedElements=[]}function et(t){this.helper=null,this.distance=t}window.requestAnimationFrame||(window.requestAnimationFrame=function(t){return setTimeout(t,17)}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(t){clearTimeout(t)}),Q.prototype={clear:function(){null!=this.autoScrollAnimationFrame&&(cancelAnimationFrame(this.autoScrollAnimationFrame),this.autoScrollAnimationFrame=null)},update:function(t,e,n){var o=this;cancelAnimationFrame(this.autoScrollAnimationFrame),this.autoScrollAnimationFrame=requestAnimationFrame(function(){e&&n&&o.autoScroll(t,n),o.update(t,e,n)})},autoScroll:function(t,e){var n,o,i,r,s,l,a,c,h,u,d,p,f;t&&void 0!==e.clientX&&void 0!==e.clientY&&(u=g(t))&&(n=e.clientX,e=e.clientY,o=u.top,i=u.right,r=u.bottom,s=u.left,p=u.height,u=u.width,e<o||i<n||r<e||n<s||(l=(a=this.options).scrollThreshold,a=a.scrollSpeed,d=t.scrollTop,c=t.scrollLeft,f=t.scrollHeight,h=0<d&&o<=e&&e<=o+l,u=c+u<t.scrollWidth&&n<=i&&i-l<=n,d=d+p<f&&e<=r&&r-l<=e,(f=p=0)<c&&s<=n&&n<=s+l&&(p=Math.floor(Math.max(-1,(n-s)/l-1)*a.x)),u&&(p=Math.ceil(Math.min(1,(n-i)/l+1)*a.x)),h&&(f=Math.floor(Math.max(-1,(e-o)/l-1)*a.y)),(f=d?Math.ceil(Math.min(1,(e-r)/l+1)*a.y):f)&&(t.scrollTop+=f),p&&(t.scrollLeft+=p)))}},$.prototype={collect:function(t,e,n,o){if(n){var i=Array.prototype.slice.call(n.children),n=this._getRange(i,t,e),t=n.start,r=n.end;this.animations.length=0;for(var s=t;s<=r;s++){var l=i[s];l&&"none"!==y(l,"display")&&l!==o&&l!==F.ghost&&this.animations.push({node:l,rect:g(l)})}}},animate:function(){for(var t=0,e=this.animations.length;t<e;t++){var n=this.animations[t],o=n.node,n=n.rect;this._excute(o,n)}},_excute:function(t,e){var n=e.left,e=e.top,o=g(t),e=e-o.top,n=n-o.left,o=(z(t),h(t,"translate3d(".concat(n,"px, ").concat(e,"px, 0)")),t.offsetWidth,this.options.animation);z(t,o),h(t,"translate3d(0px, 0px, 0px)"),clearTimeout(t.animated),t.animated=setTimeout(function(){z(t),h(t,""),t.animated=null},o)},_getRange:function(t,e,n){var o,e=t.indexOf(e),n=t.indexOf(n);return n<e&&(e=(o=[n,e])[0],n=o[1]),e<0&&(e=n,n=t.length-1),{start:e,end:n=n<0?t.length-1:n}}},tt.prototype={destroy:function(){s=l=c=null},active:function(){return!!l},select:function(t){f(t,this.options.selectedClass,!0),this.selectedElements.push(t),this.selectedElements.sort(r)},deselect:function(t){var e=this.selectedElements.indexOf(t);-1<e&&(f(t,this.options.selectedClass,!1),this.selectedElements.splice(e,1))},addSelected:function(t){var e=this;t.forEach(function(t){return e.selectedElements.push(t)})},removeSelected:function(e){this.selectedElements=this.selectedElements.filter(function(t){return e.indexOf(t)<0})},getSelectedElements:function(){return this.selectedElements},getEmits:function(){var t={from:{},to:{}};return l&&s&&(t.from=a({},l),t.to=a({},s)),t},getHelper:function(){var n;return l?(n=document.createElement("div"),this.selectedElements.forEach(function(t,e){t=t.cloneNode(!0);t.style="\n opacity: ".concat(0===e?1:.5,";\n position: absolute;\n z-index: ").concat(e,";\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n "),n.appendChild(t)}),n):null},getOnEndParams:function(){return l?{changed:l.sortable.el!==s.sortable.el||this._offsetChanged(l.nodes,s.nodes)}:{}},onDrag:function(e,t){var n;this._isMultiple()&&(this.selectedElements.sort(r),n=this.selectedElements.map(function(t){return{node:t,rect:g(t),offset:d(t,e)}}),l={sortable:t,nodes:n},s={sortable:t,nodes:n},c=this.selectedElements)},onStarted:function(t){var e;l&&(t.animator.collect(e=F.dragged,null,e.parentNode),c.forEach(function(t){t!=e&&y(t,"display","none")}),t.animator.animate())},toggleElementsVisible:function(t){l&&(t?(t=c.indexOf(F.dragged),this._displayElements(c,t,F.dragged)):c.forEach(function(t){t!=F.dragged&&y(t,"display","none")}))},onChange:function(t,e){var n,o;l&&(n=g(t),o=d(t,e.el),s={sortable:e,nodes:c.map(function(t){return{node:t,rect:n,offset:o}})})},onDrop:function(t,e,n){var o,i,r;l&&s&&(l.sortable=t.sortable,t=F.clone,s.sortable.animator.collect(o=F.dragged,null,o.parentNode),i=c.indexOf(o),r=null,n&&t&&(y(t,"display","none"),r=c.map(function(t){return t.cloneNode(!0)}),this._displayElements(r,i,t)),this._displayElements(c,i,o),s.nodes=(r||c).map(function(t){return{node:t,rect:g(t),offset:d(t,e)}}),s.sortable.animator.animate(),n)&&(s.sortable.multiplayer.addSelected(r||c),t||l.sortable.multiplayer.removeSelected(c))},onSelect:function(t,e,n){var o,i;F.dragged&&this._isMouseClick(t,e)&&(t=F.dragged,i=this.options.selectHandle,o=V(e).target,"function"==typeof i&&!i(e)||"string"==typeof i&&!v(o,i)||(o=this.selectedElements.indexOf(t),f(t,this.options.selectedClass,o<0),i=a(a({},n),{},{event:e}),o<0?(this.selectedElements.push(t),n.sortable._dispatchEvent("onSelect",i)):(this.selectedElements.splice(o,1),n.sortable._dispatchEvent("onDeselect",i)),this.selectedElements.sort(r)))},_displayElements:function(t,e,n){for(var o,i=0;i<t.length;i++)y(t[i],"display",""),i<e?n.parentNode.insertBefore(t[i],n):(o=0<i?t[i-1]:n,n.parentNode.insertBefore(t[i],o.nextSibling))},_isMultiple:function(){return this.options.multiple&&this.selectedElements.length&&-1<this.selectedElements.indexOf(F.dragged)},_isMouseClick:function(t,e){var n=e.clientX-t.clientX,e=e.clientY-t.clientY,t=Math.sqrt(n*n+e*e);return 0<=t&&t<=1},_offsetChanged:function(t,n){return!!t.find(function(e){var t=n.find(function(t){return t.node===e.node});return Z(e.offset,t.offset)})}},et.prototype={get node(){return this.helper},destroy:function(){this.helper&&this.helper.parentNode&&this.helper.parentNode.removeChild(this.helper),this.helper=this.distance=null},move:function(t,e){this.helper&&h(this.helper,"translate3d(".concat(t,"px, ").concat(e,"px, 0)"))},init:function(t,e,n,o){if(!this.helper){var i,r=o.fallbackOnBody,s=o.ghostClass,o=o.ghostStyle,r=r?document.body:n,l=(this.helper=e.cloneNode(!0),f(this.helper,s,!0),a({position:"fixed",top:t.top,left:t.left,width:t.width,height:t.height,minWidth:t.width,minHeight:t.height,opacity:"0.8",overflow:"hidden","z-index":"100000","box-sizing":"border-box","pointer-events":"none"},o));for(i in l)y(this.helper,i,l[i]);n=this.helper,e="none",n.style["".concat(W.css,"transition")]=e?"none"===e?"none":"".concat(e):"",h(this.helper,"translate3d(0px, 0px, 0px)"),r.appendChild(this.helper);s=this.distance.x/parseInt(this.helper.style.width)*100,t=this.distance.y/parseInt(this.helper.style.height)*100;y(this.helper,"transform-origin","".concat(s,"% ").concat(t,"%")),y(this.helper,"transform","translateZ(0)"),y(this.helper,"will-change","transform")}}};var b,w,E,S,_,x,nt,C,O,D,T,M,N,I,P,ot,X="Sortable"+Date.now(),Y=[],it=function(t){var e={},n=t.group;n&&"object"==j(n)||(n={name:n,pull:!0,put:!0,revertClone:!0}),e.name=n.name,e.pull=n.pull,e.put=n.put,e.revertClone=n.revertClone,t.group=e};function F(t,e){if(!t||!t.nodeType||1!==t.nodeType)throw"Sortable-dnd: `el` must be an HTMLElement, not ".concat({}.toString.call(t));(t[X]=this).el=t,this.options=e=Object.assign({},e);var n,o,i={disabled:!1,group:"",animation:150,draggable:null,handle:null,multiple:!1,selectHandle:null,customGhost:null,direction:function(){return K(t,e.draggable)},autoScroll:!0,scrollThreshold:55,scrollSpeed:{x:10,y:10},delay:0,delayOnTouchOnly:!1,touchStartThreshold:(Number.parseInt?Number:window).parseInt(window.devicePixelRatio,10)||1,ghostClass:"",ghostStyle:{},chosenClass:"",selectedClass:"",swapOnDrop:!0,fallbackOnBody:!1,supportTouch:"ontouchstart"in window,emptyInsertThreshold:5};for(n in i)n in this.options||(this.options[n]=i[n]);for(o in it(e),this)"_"===o.charAt(0)&&"function"==typeof this[o]&&(this[o]=this[o].bind(this));var r=this.options.supportTouch;u(t,r?"touchstart":"mousedown",this._onDrag),Y.push(t),this.autoScroller=new Q(this.options),this.multiplayer=new tt(this.options),this.animator=new $(this.options)}return F.prototype={constructor:F,destroy:function(){var e=this;this._dispatchEvent("onDestroy",{sortable:this}),i.start.forEach(function(t){return o(e.el,t,e._onDrag)}),Y.splice(Y.indexOf(this.el),1),this._clearState(),this.el[X]=this.animator=this.multiplayer=this.autoScroller=null},option:function(t,e){if(void 0===e)return this.options[t];this.options[t]=e,this.animator.options[t]=e,this.multiplayer.options[t]=e,this.autoScroller.options[t]=e,"group"===t&&it(this.options)},select:function(t){this.multiplayer.select(t)},deselect:function(t){this.multiplayer.deselect(t)},getSelectedElements:function(){return this.multiplayer.getSelectedElements()},_onDrag:function(t){var e,n,o,i;this.options.disabled||!this.options.group.pull||/mousedown|pointerdown/.test(t.type)&&0!==t.button||(e=(t=V(t)).touch,n=t.event,(t=t.target)===this.el)||B&&t&&"SELECT"===t.tagName.toUpperCase()||(_=p(t,this.options.draggable,this.el))&&!_.animated&&(I=e?_:document,C=_.cloneNode(!0),O=_.parentNode,F.dragged=_,((D=n).sortable=this).multiplayer.onDrag(this.el,this),o=g(_),i=d(_,this.el),w={sortable:this,node:_,rect:o,offset:i},b={sortable:this,node:_,rect:o,offset:i},E=new et({x:n.clientX-o.left,y:n.clientY-o.top}),u(I,"touchend",this._onDrop),u(I,"touchcancel",this._onDrop),u(I,"mouseup",this._onDrop),"function"!=typeof(i=this.options.handle)||i(n))&&("string"!=typeof i||v(t,i))&&this._prepareStart(e)},_prepareStart:function(t){var e=this,n=this.options,o=n.delay,n=n.delayOnTouchOnly;!o||n&&!t||L||m?this._onStart(t):(i.move.forEach(function(t){return u(e.el.ownerDocument,t,e._delayMoveHandler)}),i.end.forEach(function(t){return u(e.el.ownerDocument,t,e._cancelStart)}),ot=setTimeout(function(){return e._onStart(t)},o))},_delayMoveHandler:function(t){t=t.touches?t.touches[0]:t;Math.max(Math.abs(t.clientX-D.clientX),Math.abs(t.clientY-D.clientY))>=Math.floor(this.options.touchStartThreshold/(window.devicePixelRatio||1))&&this._cancelStart()},_cancelStart:function(){var e=this;clearTimeout(ot),i.move.forEach(function(t){return o(e.el.ownerDocument,t,e._delayMoveHandler)}),i.end.forEach(function(t){return o(e.el.ownerDocument,t,e._cancelStart)})},_onStart:function(t){S=this.el,"clone"===this.options.group.pull&&(N=!0,F.clone=C),u(I,t?"touchmove":"mousemove",this._nearestSortable);try{document.selection?setTimeout(function(){return document.selection.empty()},0):window.getSelection().removeAllRanges()}catch(t){}},_onStarted:function(){(F.active=this)._dispatchEvent("onDrag",a(a({},this._getFromTo()),{},{event:D})),this.multiplayer.onStarted(this);var t=this._getGhostElement();E.init(w.rect,t,this.el,this.options),F.ghost=E.node,y(_,"display","none"),_.parentNode.insertBefore(C,_),f(C,this.options.chosenClass,!0),B&&y(document.body,"user-select","none")},_getGhostElement:function(){var t=this.options.customGhost;return"function"==typeof t?t((t=this.multiplayer.getSelectedElements()).length?t:[_]):this.multiplayer.getHelper()||_},_nearestSortable:function(t){var e,n,o,i,r,s,l;J(t),!D||!_||(e=T||D,n=(o=t).clientX,o=o.clientY,i=n-e.clientX,e=o-e.clientY,void 0!==n&&void 0!==o&&Math.abs(i)<=0&&Math.abs(e)<=0)||(T||this._onStarted(),o=(n=V(t)).event,i=n.target,T=o,E.move(o.clientX-D.clientX,o.clientY-D.clientY),this._autoScroll(i),r=o.clientX,s=o.clientY,Y.some(function(t){var e,n,o=t[X].options.emptyInsertThreshold;if(o)return n=g(t,{parent:!0}),e=r>=n.left-o&&r<=n.right+o,n=s>=n.top-o&&s<=n.bottom+o,e&&n?l=t:void 0}),l&&l[X]._onMove(o,i))},_autoScroll:function(t){this.options.autoScroll&&(t=function(t,e){if(t&&t.getBoundingClientRect){var n=t,o=!1;do{if(n.clientWidth<n.scrollWidth||n.clientHeight<n.scrollHeight){var i=y(n);if(n.clientWidth<n.scrollWidth&&("auto"==i.overflowX||"scroll"==i.overflowX)||n.clientHeight<n.scrollHeight&&("auto"==i.overflowY||"scroll"==i.overflowY)){if(!n.getBoundingClientRect||n===document.body)return q();if(o||e)return n;o=!0}}}while(n=n.parentNode)}return q()}(t,!0),this.autoScroller.update(t,D,T))},_allowPut:function(){var t,e,n;return D.sortable.el===this.el||!!this.options.group.put&&(t=(e=this.options.group).name,e=e.put,n=D.sortable.options.group,e.join&&-1<e.indexOf(n.name)||n.name&&t&&n.name===t)},_allowSwap:function(){var t,e,n,o,i=r(C,x);return nt=i<0?x.nextSibling:x,M!==x?!(P=0):(t=g(x),o=(e="vertical"===(n="function"==typeof this.options.direction?this.options.direction.call(T,_,this):this.options.direction))?T.clientY:T.clientX,n=x["vertical"===n?"offsetHeight":"offsetWidth"],o=o>=(e?t.top:t.left)&&o<(e?t.bottom:t.right)-n/2?-1:1,P!==o&&((P=o)<0?0<i:i<0))},_onMove:function(t,e){var n,o,i;this._allowPut()&&(this._dispatchEvent("onMove",a(a({},this._getFromTo()),{},{event:t})),S=this.el,x=p(e,this.options.draggable,S),S===w.sortable.el||e!==S&&function(t,e){for(var n=t.lastElementChild;n&&(n===F.ghost||"none"===y(n,"display")||e&&!v(n,e));)n=n.previousElementSibling;return n}(S)?x&&!x.animated&&this._allowSwap()&&x!==C&&!G(x,C)&&(S!==w.sortable.el?this._onInsert(t,!1):(n=t,o=O,i=i||g(o),n.clientX<=i.right&&n.clientX>=i.left&&n.clientY>=i.top&&n.clientY<=i.bottom&&e===O||this._onChange(t)),M=x):(M=null,this._onInsert(t,!0)))},_onInsert:function(t,e){var n=e?C:x;O=e?S:x.parentNode,w.sortable.animator.collect(C,null,C.parentNode,C),this.animator.collect(null,n,O,C),this.multiplayer.onChange(C,this),b={sortable:this,node:n,rect:g(n),offset:d(n,S)},N&&this.el!==D.sortable.el&&w.sortable.el===D.sortable.el&&(y(_,"display",""),D.sortable.options.group.revertClone||_.parentNode.insertBefore(_,C),D.sortable.multiplayer.toggleElementsVisible(!0)),w.sortable._dispatchEvent("onRemove",a(a({},this._getFromTo()),{},{event:t})),e?O.appendChild(C):O.insertBefore(C,x),this._dispatchEvent("onAdd",a(a({},this._getFromTo()),{},{event:t})),N&&this.el===D.sortable.el&&(y(_,"display","none"),D.sortable.multiplayer.toggleElementsVisible(!1)),w.sortable.animator.animate(),this.animator.animate(),w.sortable=this},_onChange:function(t){O=x.parentNode,this.animator.collect(C,x,O),this.multiplayer.onChange(C,this),b={sortable:this,node:x,rect:g(x),offset:d(x,S)},this._dispatchEvent("onChange",a(a({},this._getFromTo()),{},{event:t})),O.insertBefore(C,nt),this.animator.animate(),w.sortable=this},_onDrop:function(t){J(t),this._cancelStart(),this._unbindEvents(),this.autoScroller.clear(),_&&D&&T?this._onEnd(t):this.options.multiple&&this.multiplayer.onSelect(D,t,a({},w)),this._clearState()},_onEnd:function(t){w.sortable=D.sortable;var e=w.sortable.el!==b.sortable.el,n=(!this.options.swapOnDrop||N&&e||O.insertBefore(_,C),b.rect=g(C),b.offset=d(C,S),b.node===C&&(b.node=_),this.multiplayer.onDrop(D,S,e),this.multiplayer.getOnEndParams()),o=e||Z(w.offset,b.offset),o=a(a({},this._getFromTo()),{},{changed:o,event:t},n);e&&w.sortable._dispatchEvent("onDrop",o),b.sortable._dispatchEvent("onDrop",o),N&&e&&!this.multiplayer.active()?f(C,this.options.chosenClass,!1):O.removeChild(C),y(_,"display",""),B&&y(document.body,"user-select","")},_getFromTo:function(){var t=this.multiplayer.getEmits();return{from:a(a({},t.from),w),to:a(a({},t.to),b)}},_dispatchEvent:function(t){t=this.options[t];"function"==typeof t&&t(a({},1<arguments.length&&void 0!==arguments[1]?arguments[1]:{}))},_clearState:function(){this.multiplayer.destroy(),E&&E.destroy(),b=w=E=S=_=x=nt=C=O=D=T=M=N=I=P=ot=F.clone=F.ghost=F.active=F.dragged=null},_unbindEvents:function(){var e=this;i.move.forEach(function(t){return o(I,t,e._nearestSortable)}),i.end.forEach(function(t){return o(I,t,e._onDrop)})}},F.utils={on:u,off:o,css:y,index:function(t,e){var n=0;if(!t||!t.parentNode)return-1;for(;t=t.previousElementSibling;)"TEMPLATE"===t.nodeName.toUpperCase()||e&&!v(t,e)||"none"===y(t,"display")||n++;return n},closest:p,getOffset:d,toggleClass:f,detectDirection:K},F.get=function(t){return t[X]},F.create=function(t,e){return new F(t,e)},F}); | ||
| !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).Sortable=e()}(this,function(){"use strict";function R(t){return(R="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}var H={capture:!1,passive:!1},L=/\s+/g;function t(t){if("undefined"!=typeof window&&window.navigator)return!!navigator.userAgent.match(t)}var B,e,s,l,r,a,h=t(/(?:Trident.*rv[ :]?11\.|msie|iemobile|Windows Phone)/i),F=t(/Edge/i),W=t(/safari/i)&&!t(/chrome/i)&&!t(/android/i),k=(B=!1,document.addEventListener("checkIfSupportPassive",null,{get passive(){return B=!0}}),B),z="undefined"==typeof window||"undefined"==typeof document?{}:(e=window.getComputedStyle(document.documentElement,"")||["-moz-hidden-iframe"],e=(Array.prototype.slice.call(e).join("").match(/-(moz|webkit|ms)-/)||""===e.OLink&&["","o"])[1],{dom:"WebKit|Moz|MS|O".match(new RegExp("("+e+")","i"))[1],lowercase:e,css:"-"+e+"-",js:e[0].toUpperCase()+e.substr(1)});function j(t,e){t.style["".concat(z.css,"transition-duration")]=null==e?"":"".concat(e,"ms")}function c(t,e){t.style["".concat(z.css,"transform")]=e?"".concat(e):""}function u(t,e,n){window.addEventListener?t.addEventListener(e,n,!(!k&&h)&&H):window.attachEvent?t.attachEvent("on"+e,n):t["on"+e]=n}function n(t,e,n){window.removeEventListener?t.removeEventListener(e,n,!(!k&&h)&&H):window.detachEvent?t.detachEvent("on"+e,n):t["on"+e]=null}function G(t){var e=t,n=t.touches&&t.touches[0]||t.changedTouches&&t.changedTouches[0],t=n?document.elementFromPoint(n.clientX,n.clientY):t.target;return!n||"clientX"in e||(e.clientX=n.clientX,e.clientY=n.clientY,e.pageX=n.pageX,e.pageY=n.pageY,e.screenX=n.screenX,e.screenY=n.screenY),{touch:n,event:e,target:t}}function V(){return document.scrollingElement||document.documentElement}function f(t,e,n){if(t.getBoundingClientRect||t===window){var o,i,s,l,r,a,c=t!==window&&t.parentNode&&t!==V()?(i=(o=t.getBoundingClientRect()).top,s=o.left,l=o.bottom,r=o.right,a=o.height,o.width):(s=i=0,l=window.innerHeight,r=window.innerWidth,a=window.innerHeight,window.innerWidth);if(e&&t!==window){n=n||t.parentNode;do{if(n&&n.getBoundingClientRect){var h=n.getBoundingClientRect();i-=h.top+parseInt(v(n,"border-top-width")),s-=h.left+parseInt(v(n,"border-left-width")),l=i+o.height,r=s+o.width;break}}while(n=n.parentNode)}return{top:i,left:s,bottom:l,right:r,width:c,height:a}}}function d(t,e,n,o){if(t){n=n||document;do{if(null==e){var i=Array.prototype.slice.call(n.children),s=i.indexOf(t);if(-1<s)return i[s];for(var l=0;l<i.length;l++)if(q(t,i[l]))return i[l]}else if((">"!==e[0]||t.parentNode===n)&&g(t,e)||o&&t===n)return t}while(t=t.parentNode)}return null}function q(t,e){if(t&&e){if(e.compareDocumentPosition)return e===t||16&e.compareDocumentPosition(t);if(e.contains&&1===t.nodeType)return e.contains(t)&&e!==t;for(;t=t.parentNode;)if(t===e)return 1}}function p(t,e){var n=0;if(!t||!t.parentNode)return-1;for(;t=t.previousElementSibling;)"TEMPLATE"===t.nodeName.toUpperCase()||e&&!g(t,e)||"none"===v(t,"display")||t===P.dragged||n++;return n}function U(t,e,n,o){for(var i=0,s=0,l=t.children;i<l.length;){if(l[i]!==P.ghost&&"none"!==v(l[i],"display")&&d(l[i],n,t,!1)&&(o||l[i]!==P.dragged)){if(s===e)return l[i];s++}i++}return null}function K(t,e){var n,o=v(t),i=parseInt(o.width)-parseInt(o.paddingLeft)-parseInt(o.paddingRight)-parseInt(o.borderLeftWidth)-parseInt(o.borderRightWidth),s=U(t,0,e),t=U(t,1,e),e=s&&v(s),l=t&&v(t),r=e&&parseInt(e.marginLeft)+parseInt(e.marginRight)+f(s).width,a=l&&parseInt(l.marginLeft)+parseInt(l.marginRight)+f(t).width,c=F||h?"cssFloat":"float";return"flex"===o.display?"column"===o.flexDirection||"column-reverse"===o.flexDirection?"vertical":"horizontal":"grid"===o.display?o.gridTemplateColumns.split(" ").length<=1?"vertical":"horizontal":s&&e.float&&"none"!==e.float?(n="left"===e.float?"left":"right",!t||"both"!==l.clear&&l.clear!==n?"horizontal":"vertical"):s&&("block"===e.display||"flex"===e.display||"table"===e.display||"grid"===e.display||i<=r&&"none"===o[c]||t&&"none"===o[c]&&i<r+a)?"vertical":"horizontal"}function m(t,e,n){var o;t&&e&&(t.classList?t.classList[n?"add":"remove"](e):(o=(" "+t.className+" ").replace(L," ").replace(" "+e+" "," "),t.className=(o+(n?" "+e:"")).replace(L," ")))}function g(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}}function v(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")}}function y(t,e){e=e;t=(t=t).compareDocumentPosition?t.compareDocumentPosition(e):t.contains?(t!=e&&t.contains(e)&&16)+(t!=e&&e.contains(t)&&8)+(0<=t.sourceIndex&&0<=e.sourceIndex?(t.sourceIndex<e.sourceIndex&&4)+(t.sourceIndex>e.sourceIndex&&2):1)+0:0;return 2===t?1:4===t?-1:0}function Z(t){void 0!==t.preventDefault&&t.cancelable&&t.preventDefault()}function w(t){var e=t.sortable,n=t.name,t=t.params,e=e.options[n];"function"==typeof e&&e(Object.assign({},t))}function J(t){this.options=t,this.autoScrollAnimationFrame=null}function Q(t){this.options=t,this.animations=[]}function $(t){this.options=t||{},this.selectedElements=[]}window.requestAnimationFrame||(window.requestAnimationFrame=function(t){return setTimeout(t,17)}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(t){clearTimeout(t)}),J.prototype={destroy:function(){null!=this.autoScrollAnimationFrame&&(cancelAnimationFrame(this.autoScrollAnimationFrame),this.autoScrollAnimationFrame=null)},update:function(t,e,n){var o=this;cancelAnimationFrame(this.autoScrollAnimationFrame),this.autoScrollAnimationFrame=requestAnimationFrame(function(){e&&n&&o.autoScroll(t,n),o.update(t,e,n)})},autoScroll:function(t,e){var n,o,i,s,l,r,a,c,h,u,d,p,m;t&&void 0!==e.clientX&&void 0!==e.clientY&&(u=f(t))&&(n=e.clientX,e=e.clientY,o=u.top,i=u.right,s=u.bottom,l=u.left,p=u.height,u=u.width,e<o||i<n||s<e||n<l||(r=(a=this.options).scrollThreshold,a=a.scrollSpeed,d=t.scrollTop,c=t.scrollLeft,m=t.scrollHeight,h=0<d&&o<=e&&e<=o+r,u=c+u<t.scrollWidth&&n<=i&&i-r<=n,d=d+p<m&&e<=s&&s-r<=e,(m=p=0)<c&&l<=n&&n<=l+r&&(p=Math.floor(Math.max(-1,(n-l)/r-1)*a.x)),u&&(p=Math.ceil(Math.min(1,(n-i)/r+1)*a.x)),h&&(m=Math.floor(Math.max(-1,(e-o)/r-1)*a.y)),(m=d?Math.ceil(Math.min(1,(e-s)/r+1)*a.y):m)&&(t.scrollTop+=m),p&&(t.scrollLeft+=p)))}},Q.prototype={collect:function(t,e,n,o){if(n){for(var i=Array.prototype.slice.call(n.children),n=this._getRange(i,t,e),t=n.start,s=n.end,l=[],r=t;r<=s;r++){var a=i[r];a&&"none"!==v(a,"display")&&a!==o&&a!==P.ghost&&l.push({node:a,rect:f(a)})}this.animations.push(l)}},animate:function(){for(var t=this.animations.pop(),e=0,n=t.length;e<n;e++){var o=t[e],i=o.node,o=o.rect;this._excute(i,o)}},_excute:function(t,e){var n=e.left,e=e.top,o=f(t),e=e-o.top,n=n-o.left,o=(j(t),c(t,"translate3d(".concat(n,"px, ").concat(e,"px, 0)")),t.offsetWidth,this.options.animation);j(t,o),c(t,"translate3d(0px, 0px, 0px)"),clearTimeout(t.animated),t.animated=setTimeout(function(){j(t),c(t,""),t.animated=null},o)},_getRange:function(t,e,n){var o,e=t.indexOf(e),n=t.indexOf(n);return n<e&&(e=(o=[n,e])[0],n=o[1]),e<0&&(e=n,n=t.length-1),{start:e,end:n=n<0?t.length-1:n}}},$.prototype={destroy:function(){s=l=r=a=null},active:function(){return!!l},select:function(t){m(t,this.options.selectedClass,!0),this.selectedElements.push(t),this.selectedElements.sort(y)},deselect:function(t){var e=this.selectedElements.indexOf(t);-1<e&&(m(t,this.options.selectedClass,!1),this.selectedElements.splice(e,1))},addSelected:function(t){var e=this;t.forEach(function(t){return e.selectedElements.push(t)})},removeSelected:function(e){this.selectedElements=this.selectedElements.filter(function(t){return e.indexOf(t)<0})},getSelectedElements:function(){return this.selectedElements},getParams:function(){var t;return l?((t={}).nodes=r,a&&(t.clones=a),t):{}},getGhostElement:function(){var n;return l?(n=document.createElement("div"),this.selectedElements.forEach(function(t,e){t=t.cloneNode(!0);t.style="position: absolute;left: 0;top: 0;bottom: 0;right: 0;opacity: ".concat(0===e?1:.5,";z-index: ").concat(e,";"),n.appendChild(t)}),n):null},toggleVisible:function(t){l&&(t?(t=r.indexOf(P.dragged),this._viewElements(r,t,P.dragged)):this._hideElements(r))},onDrag:function(t){var e=P.dragged;!this.options.multiple||!this.selectedElements.length||this.selectedElements.indexOf(e)<0||(this.selectedElements.sort(y),r=this.selectedElements,(s=l=t).animator.collect(e,null,e.parentNode),this._hideElements(r),t.animator.animate())},onChange:function(t){l&&(s=t)},onDrop:function(t,e,n){var o,i;l&&s&&(l=t,t=P.clone,i=r.indexOf(o=P.dragged),s.animator.collect(o,null,o.parentNode),e&&"clone"===n?(v(t,"display","none"),a=r.map(function(t){return t.cloneNode(!0)}),this._viewElements(a,i,t)):a=null,this._viewElements(r,i,o),s.animator.animate(),e)&&(s.multiplayer.addSelected(a||r),"clone"!==n)&&l.multiplayer.removeSelected(r)},onSelect:function(t,e,n,o){var e=G(e),i=e.event,e=e.target;P.dragged||!this._isClick(t,i)||"function"==typeof(t=this.options.selectHandle)&&!t(i)||"string"==typeof t&&!g(e,t)||(e=this.selectedElements.indexOf(n),m(n,this.options.selectedClass,e<0),t={from:o.el,event:i,node:n,index:p(n)},e<0?(this.selectedElements.push(n),w({sortable:o,name:"onSelect",params:t})):(this.selectedElements.splice(e,1),w({sortable:o,name:"onDeselect",params:t})),this.selectedElements.sort(y))},_viewElements:function(t,e,n){for(var o,i=0;i<t.length;i++)v(t[i],"display",""),i<e?n.parentNode.insertBefore(t[i],n):(o=0<i?t[i-1]:n,n.parentNode.insertBefore(t[i],o.nextSibling))},_hideElements:function(t){for(var e=0;e<t.length;e++)t[e]!=P.dragged&&v(t[e],"display","none")},_isClick:function(t,e){var n=e.clientX-t.clientX,e=e.clientY-t.clientY,t=Math.sqrt(n*n+e*e);return 0<=t&&t<=1}};var b,S,tt,_,E,x,D,C,M,N,T,et,o,I,i,O,X,nt,Y,A="Sortable"+Date.now(),ot=[],it=function(t){var e={},n=t.group;n&&"object"==R(n)||(n={name:n,pull:!0,put:!0,revertDrag:!0}),e.name=n.name,e.pull=n.pull,e.put=n.put,e.revertDrag=n.revertDrag,t.group=e};function P(t,e){if(!t||!t.nodeType||1!==t.nodeType)throw"Sortable-dnd: `el` must be an HTMLElement, not ".concat({}.toString.call(t));(t[A]=this).el=t,this.options=e=Object.assign({},e);var n,o,i={store:null,disabled:!1,group:"",animation:150,draggable:null,handle:null,multiple:!1,selectHandle:null,customGhost:null,direction:function(){return K(t,e.draggable)},autoScroll:!0,scrollThreshold:55,scrollSpeed:{x:10,y:10},delay:0,delayOnTouchOnly:!1,touchStartThreshold:(Number.parseInt?Number:window).parseInt(window.devicePixelRatio,10)||1,ghostClass:"",ghostStyle:{},chosenClass:"",selectedClass:"",swapOnDrop:!0,fallbackOnBody:!1,supportTouch:"ontouchstart"in window,emptyInsertThreshold:-5};for(n in i)n in this.options||(this.options[n]=i[n]);for(o in it(e),this)"_"===o.charAt(0)&&"function"==typeof this[o]&&(this[o]=this[o].bind(this));var s=this.options.supportTouch;u(t,s?"touchstart":"mousedown",this._onDrag),ot.push(t),this.autoScroller=new J(this.options),this.multiplayer=new $(this.options),this.animator=new Q(this.options)}P.prototype={constructor:P,_onDrag:function(t){var e,n,o,i,s=this;b||this.options.disabled||!this.options.group.pull||/mousedown|pointerdown/.test(t.type)&&0!==t.button||(t=G(t),e=t.touch,i=t.event,t=t.target,W&&t&&"SELECT"===t.tagName.toUpperCase())||(n=(o=this.options).handle,o=o.draggable,(b=d(t,o,this.el))&&!b.animated&&((D=i).sortable=this,u(N=e?b:document,"mouseup",this._onDrop),u(N,"touchend",this._onDrop),u(N,"touchcancel",this._onDrop),"function"!=typeof n||n(i))&&("string"!=typeof n||g(t,n))&&(i=(o=this.options).delay,t=o.delayOnTouchOnly,!i||t&&!e||F||h?this._onStart(e):(u(this.el.ownerDocument,"touchmove",this._delayMoveHandler),u(this.el.ownerDocument,"mousemove",this._delayMoveHandler),u(this.el.ownerDocument,"mouseup",this._cancelStart),u(this.el.ownerDocument,"touchend",this._cancelStart),u(this.el.ownerDocument,"touchcancel",this._cancelStart),et=setTimeout(function(){return s._onStart(e)},i))))},_delayMoveHandler:function(t){t=t.touches?t.touches[0]:t;Math.max(Math.abs(t.clientX-D.clientX),Math.abs(t.clientY-D.clientY))>=Math.floor(this.options.touchStartThreshold/(window.devicePixelRatio||1))&&this._cancelStart()},_cancelStart:function(){clearTimeout(et),n(this.el.ownerDocument,"touchmove",this._delayMoveHandler),n(this.el.ownerDocument,"mousemove",this._delayMoveHandler),n(this.el.ownerDocument,"mouseup",this._cancelStart),n(this.el.ownerDocument,"touchend",this._cancelStart),n(this.el.ownerDocument,"touchcancel",this._cancelStart)},_onStart:function(t){u(N,t?"touchmove":"mousemove",this._nearestSortable);try{document.selection?setTimeout(function(){return document.selection.empty()},0):window.getSelection().removeAllRanges()}catch(t){}},_onStarted:function(){var t=p(b);o=this.el,I=this.el,nt=X=O=t,x=(Y=b).parentNode,i=this.options.group.pull,m(_=b.cloneNode(!0),this.options.chosenClass,!0),P.clone=_,P.active=this,P.dragged=b,this._appendGhost(),this.multiplayer.onDrag(this),w({sortable:this,name:"onDrag",params:this._getParams(D)}),v(b,"display","none"),b.parentNode.insertBefore(_,b),W&&v(document.body,"user-select","none")},_getGhostElement:function(){var t=this.options.customGhost;return"function"==typeof t?t((t=this.multiplayer.getSelectedElements()).length?t:[b]):this.multiplayer.getGhostElement()||b},_appendGhost:function(){if(!E){var t,e=this.options,n=e.fallbackOnBody,o=e.ghostClass,e=e.ghostStyle,n=n?document.body:this.el,i=this._getGhostElement(),i=(m(E=i.cloneNode(!0),o,!0),f(b)),s=Object.assign({position:"fixed",top:i.top,left:i.left,width:i.width,height:i.height,minWidth:i.width,minHeight:i.height,opacity:"0.8",overflow:"hidden","z-index":"100000","box-sizing":"border-box","pointer-events":"none"},e);for(t in s)v(E,t,s[t]);o="none",E.style["".concat(z.css,"transition")]=o?"none"===o?"none":"".concat(o):"",c(E,"translate3d(0px, 0px, 0px)"),P.ghost=E,n.appendChild(E);e=(D.clientX-i.left)/parseInt(E.style.width)*100,o=(D.clientY-i.top)/parseInt(E.style.height)*100;v(E,"transform-origin","".concat(e,"% ").concat(o,"%")),v(E,"transform","translateZ(0)"),v(E,"will-change","transform")}},_nearestSortable:function(t){var e,n,o,i,s,l,r;Z(t),!D||!b||(o=C||D,i=(e=t).clientX,e=e.clientY,n=i-o.clientX,o=e-o.clientY,void 0!==i&&void 0!==e&&Math.abs(n)<=0&&Math.abs(o)<=0)||(C||this._onStarted(),e=(i=G(t)).event,n=i.target,o=(C=e).clientX-D.clientX,t=e.clientY-D.clientY,c(E,"translate3d(".concat(o,"px, ").concat(t,"px, 0)")),this.options.autoScroll&&(i=function(t,e){if(t&&t.getBoundingClientRect){var n=t,o=!1;do{if(n.clientWidth<n.scrollWidth||n.clientHeight<n.scrollHeight){var i=v(n);if(n.clientWidth<n.scrollWidth&&("auto"==i.overflowX||"scroll"==i.overflowX)||n.clientHeight<n.scrollHeight&&("auto"==i.overflowY||"scroll"==i.overflowY)){if(!n.getBoundingClientRect||n===document.body)return V();if(o||e)return n;o=!0}}}while(n=n.parentNode)}return V()}(n,!0),this.autoScroller.update(i,D,C)),s=e.clientX,l=e.clientY,ot.some(function(t){var e,n,o=t[A].options.emptyInsertThreshold;if(null!=o)return n=f(t),e=s>=n.left-o&&s<=n.right+o,n=l>=n.top-o&&l<=n.bottom+o,e&&n?r=t:void 0}),r&&r[A]._onMove(e,n))},_allowPut:function(){var t,e,n;return D.sortable.el===this.el||!!this.options.group.put&&(t=(e=this.options.group).name,e=e.put,n=D.sortable.options.group,e.join&&-1<e.indexOf(n.name)||n.name&&t&&n.name===t)},_allowSwap:function(){var t=y(_,S),e=(tt=t<0?S.nextSibling:S,f(S)),n="function"==typeof this.options.direction?this.options.direction.call(C,b,this):this.options.direction,o="vertical"===n,i=o?C.clientY:C.clientX,n=S["vertical"===n?"offsetHeight":"offsetWidth"],i=i>=(o?e.top:e.left)&&i<(o?e.bottom:e.right)-n/2?-1:1;return M!==S?(T=i,!0):T!==i&&((T=i)<0?0<t:t<0)},_onMove:function(t,e){var n,o,i;this._allowPut()&&(w({sortable:this,name:"onMove",params:this._getParams(t)}),this.el===I||e!==this.el&&function(t,e){for(var n=t.lastElementChild;n&&(n===P.ghost||"none"===v(n,"display")||e&&!g(n,e));)n=n.previousElementSibling;return n}(this.el)?(S=d(e,this.options.draggable,this.el))&&!S.animated&&this._allowSwap()&&(M=(S===_||q(S,_)||(this.el!==I?this._onInsert(t):(n=t,o=x,i=i||f(o),n.clientX<=i.right&&n.clientX>=i.left&&n.clientY>=i.top&&n.clientY<=i.bottom&&e===x||this._onChange(t))),S)):(S=M=null,this._onInsert(t)))},_onInsert:function(t){var e=S||_;x=S?S.parentNode:this.el,I[A].animator.collect(_,null,_.parentNode,_),this.animator.collect(null,e,x,_),this.multiplayer.onChange(this),o=this.el,O=p(_),X=p(e),Y=e,"clone"===i&&this.el!==D.sortable.el&&I===D.sortable.el?(this.animator.collect(b,_,b.parentNode),v(b,"display",""),D.sortable.options.group.revertDrag||b.parentNode.insertBefore(b,_),D.sortable.multiplayer.toggleVisible(!0),this.animator.animate()):w({sortable:I[A],name:"onRemove",params:this._getParams(t)}),S?x.insertBefore(_,S):x.appendChild(_),"clone"===i&&this.el===D.sortable.el?(v(b,"display","none"),D.sortable.multiplayer.toggleVisible(!1)):w({sortable:this,name:"onAdd",params:this._getParams(t)}),I[A].animator.animate(),this.animator.animate(),I=this.el},_onChange:function(t){S!==b&&(x=S.parentNode,this.animator.collect(_,S,x),this.multiplayer.onChange(this),O=p(_),X=p(S),Y=S,x.insertBefore(_,tt),w({sortable:this,name:"onChange",params:this._getParams(t)}),this.animator.animate(),I=this.el)},_onDrop:function(t){Z(t),this._cancelStart(),n(N,"touchmove",this._nearestSortable),n(N,"mousemove",this._nearestSortable),n(N,"mouseup",this._onDrop),n(N,"touchend",this._onDrop),n(N,"touchcancel",this._onDrop),b&&D&&C?this._onEnd(t):this.options.multiple&&this.multiplayer.onSelect(D,t,b,this),E&&E.parentNode&&E.parentNode.removeChild(E),this.multiplayer.destroy(),this.autoScroller.destroy(),st()},_onEnd:function(t){I=D.sortable.el,O=nt;var e=I!==o,t=(!this.options.swapOnDrop||"clone"===i&&e||x.insertBefore(b,_),Y===_&&(Y=b),this.multiplayer.onDrop(I[A],e,i),this._getParams(t));e&&w({sortable:I[A],name:"onDrop",params:t}),w({sortable:o[A],name:"onDrop",params:t}),"clone"!==i||!e||this.multiplayer.active()?x.removeChild(_):m(_,this.options.chosenClass,!1),v(b,"display",""),W&&v(document.body,"user-select","")},_getParams:function(t){var e=Object.create(null),t=(e.event=t,e.to=o,e.from=I,e.node=b,e.clone=_,e.target=Y,e.oldIndex=O,e.newIndex=X,e.pullMode=i,e.relative=Y===b?0:y(Y,_),this.multiplayer.getParams());return t.nodes&&(e.nodes=t.nodes),t.clones&&(e.clones=t.clones),e},destroy:function(){st(),this._cancelStart(),n(this.el,"touchstart",this._onDrag),n(this.el,"mousedown",this._onDrag),ot.splice(ot.indexOf(this.el),1),this.el[A]=this.animator=this.multiplayer=this.autoScroller=null},option:function(t,e){if(void 0===e)return this.options[t];this.options[t]=e,this.animator.options[t]=e,this.multiplayer.options[t]=e,this.autoScroller.options[t]=e,"group"===t&&it(this.options)},select:function(t){this.multiplayer.select(t)},deselect:function(t){this.multiplayer.deselect(t)},getSelectedElements:function(){return this.multiplayer.getSelectedElements()}};var st=function(){o=I=b=S=tt=_=E=x=i=O=X=nt=D=C=Y=M=N=T=et=P.clone=P.ghost=P.active=P.dragged=null};return P.utils={on:u,off:n,css:v,index:p,closest:d,getRect:f,toggleClass:m,detectDirection:K},P.get=function(t){return t[A]},P.create=function(t,e){return new P(t,e)},P}); |
| { | ||
| "name": "sortable-dnd", | ||
| "version": "0.5.6", | ||
| "version": "0.6.0", | ||
| "description": "JS library for drag-and-drop lists, supports sortable and draggable", | ||
@@ -5,0 +5,0 @@ "main": "dist/sortable-dnd.min.js", |
@@ -77,30 +77,40 @@ # sortable-dnd | ||
| swapOnDrop: true, // When the value is false, the dragged element will return to the starting position of the drag | ||
| store: null, // store data | ||
| customGhost: (nodes) => { | ||
| // Customize the ghost element in drag, must return an HTMLElement | ||
| // Customize the ghost element in drag | ||
| // you must return an HTMLElement | ||
| }, | ||
| // callback functions | ||
| onDrag: ({ from, event }) => { | ||
| onDrag: (params) => { | ||
| // Triggered when drag is started | ||
| // see @Params | ||
| }, | ||
| onMove: ({ from, event }) => { | ||
| onMove: (params) => { | ||
| // Triggered when the dragged element is moving | ||
| // see @Params | ||
| }, | ||
| onDrop: ({ from, to, changed, event }) => { | ||
| onDrop: (params) => { | ||
| // Triggered when drag is completed | ||
| // see @Params | ||
| }, | ||
| onAdd: ({ from, to, event }) => { | ||
| onAdd: (params) => { | ||
| // Triggered when the element is dropped into the list from another | ||
| // see @Params | ||
| }, | ||
| onRemove: ({ from, to, event }) => { | ||
| onRemove: (params) => { | ||
| // Triggered when the element is removed from the list into another | ||
| // see @Params | ||
| }, | ||
| onChange: ({ from, to, event }) => { | ||
| onChange: (params) => { | ||
| // Triggered when the dragged element changes position in the list | ||
| // see @Params | ||
| }, | ||
| onSelect: (params) => { | ||
| // Triggered when an element is selected by clicking the mouse | ||
| // see @Select | ||
| }, | ||
| onDeselect: (params) => { | ||
| // Triggered when an element is unselected by clicking the mouse | ||
| // see @Select | ||
| }, | ||
@@ -114,20 +124,43 @@ }) | ||
| // string | ||
| new Sortable(el, { | ||
| ..., | ||
| group: 'name' | ||
| }) | ||
| group: 'name', | ||
| // object | ||
| new Sortable(el, { | ||
| ..., | ||
| group: { | ||
| name: 'group', // group name | ||
| put: true | false | ['foo', 'bar'], // whether elements can be added from other lists, or an array of group names from which elements can be taken. | ||
| pull: true | false | 'clone', // whether elements can be moved out of this list. | ||
| revertClone: true | false, // revert cloned element to initial position after moving to a another list. | ||
| } | ||
| }) | ||
| group: { | ||
| name: 'group', // group name | ||
| put: true | false | ['foo', 'bar'], // whether elements can be added from other lists, or an array of group names from which elements can be taken. | ||
| pull: true | false | 'clone', // whether elements can be moved out of this list. | ||
| revertDrag: true | false, // revert cloned element to initial position after moving to a another list. | ||
| } | ||
| ``` | ||
| **Params** | ||
| ```js | ||
| { | ||
| from, // previous list | ||
| to, // list, in which moved element. | ||
| node, // dragged element | ||
| nodes, // dragged elements | ||
| clone, // cloned element, all dnd operations are based on cloned element and do not alter the source dom(node). | ||
| clones, // cloned elements, there is a value only in the `pull: clone` after moving to a another list. | ||
| target, // drop element | ||
| oldIndex, // old index within parent | ||
| newIndex, // new index within parent | ||
| event, // TouchEvent | MouseEvent | ||
| pullMode, // Pull mode if dragging into another sortable. | ||
| relative, // Position of the drop element relative to the drag element after swap is complete. | ||
| } = params | ||
| ``` | ||
| **Select** | ||
| ```js | ||
| { | ||
| event, // TouchEvent | MouseEvent | ||
| index, // index within parent | ||
| node, // dragged element | ||
| from, // list container | ||
| } = params | ||
| ``` | ||
| ## Methods | ||
@@ -173,3 +206,3 @@ | ||
| ```ts | ||
| const { on, off, css, index, closest, getOffset, toggleClass } = Sortable.utils; | ||
| const { on, off, css, index, closest, getRect, toggleClass } = Sortable.utils; | ||
@@ -191,4 +224,4 @@ // attach an event handler function | ||
| // Get element's offet in given parentNode | ||
| getOffset(element: HTMLElement, parentEl: HTMLElement); | ||
| // Returns the "bounding client rect" of given element | ||
| getRect(element: HTMLElement, relativeToContainingBlock: boolean, container: HTMLElement); | ||
@@ -195,0 +228,0 @@ // Add or remove one classes from each element |
@@ -18,3 +18,3 @@ declare class Sortable { | ||
| /** | ||
| * The element being dragged. | ||
| * Original element to be dragged. | ||
| */ | ||
@@ -29,2 +29,7 @@ static dragged: HTMLElement | null; | ||
| /** | ||
| * The clone element. All operations during dnd are based on clone. | ||
| */ | ||
| static clone: HTMLElement | null; | ||
| /** | ||
| * Public Methods. | ||
@@ -85,13 +90,12 @@ */ | ||
| export interface DOMOffset { | ||
| export interface DOMRect { | ||
| height: number; | ||
| width: number; | ||
| top: number; | ||
| right: number; | ||
| bottom: number; | ||
| left: number; | ||
| } | ||
| export interface DOMRect extends DOMOffset { | ||
| bottom: number; | ||
| right: number; | ||
| } | ||
| export interface DOMOffset extends DOMRect {}; | ||
@@ -112,5 +116,5 @@ export interface Group { | ||
| /** | ||
| * revert cloned element to initial position after moving to a another list. | ||
| * revert draged element to initial position after moving to a another list. | ||
| */ | ||
| revertClone?: boolean; | ||
| revertDrag?: boolean; | ||
| } | ||
@@ -129,2 +133,6 @@ | ||
| /** | ||
| * index within parent | ||
| */ | ||
| index: number; | ||
| /** | ||
| * dragged element | ||
@@ -134,9 +142,5 @@ */ | ||
| /** | ||
| * offset value relative to the list container | ||
| * list container | ||
| */ | ||
| offset: DOMOffset; | ||
| /** | ||
| * value obtained by `getBoundingClientRect()` | ||
| */ | ||
| rect: DOMRect; | ||
| el: HTMLElement; | ||
| } | ||
@@ -148,6 +152,10 @@ | ||
| */ | ||
| nodes?: Item[]; | ||
| nodes?: HTMLElement[]; | ||
| /** | ||
| * `Sortable.Options.store` | ||
| */ | ||
| store?: any; | ||
| } | ||
| export interface SelectEvent extends Item { | ||
| export interface SelectEvent { | ||
| /** | ||
@@ -157,8 +165,54 @@ * TouchEvent | MouseEvent | ||
| event: EventType; | ||
| /** | ||
| * index within parent | ||
| */ | ||
| index: number; | ||
| /** | ||
| * dragged element | ||
| */ | ||
| node: HTMLElement; | ||
| /** | ||
| * list container | ||
| */ | ||
| from: HTMLElement; | ||
| } | ||
| export interface SortableEvent { | ||
| from: FromTo; | ||
| to: FromTo; | ||
| /** | ||
| * previous list | ||
| */ | ||
| from: HTMLElement; | ||
| /** | ||
| * list, in which moved element. | ||
| */ | ||
| to: HTMLElement; | ||
| /** | ||
| * dragged element | ||
| */ | ||
| node: HTMLElement; | ||
| /** | ||
| * dragged elements | ||
| */ | ||
| nodes: HTMLElement[]; | ||
| /** | ||
| * cloned element, all dnd operations are based on cloned element and do not alter the source dom(node). | ||
| */ | ||
| clone: HTMLElement; | ||
| /** | ||
| * cloned elements, there is a value only in the `pull: clone` after moving to a another list. | ||
| */ | ||
| clones: HTMLElement[]; | ||
| /** | ||
| * drop element | ||
| */ | ||
| target: HTMLElement; | ||
| /** | ||
| * old index within parent | ||
| */ | ||
| oldIndex: number; | ||
| /** | ||
| * new index within parent | ||
| */ | ||
| newIndex: number; | ||
| /** | ||
| * TouchEvent | MouseEvent | ||
@@ -168,5 +222,17 @@ */ | ||
| /** | ||
| * determine whether the position of dragged element(s) changes, valid only in `onDrop`. | ||
| * Pull mode if dragging into another sortable. | ||
| */ | ||
| changed?: boolean; | ||
| pullMode: "clone" | boolean | undefined; | ||
| /** | ||
| * Position of the drop element relative to the drag element after swap is complete. | ||
| * | ||
| * @example | ||
| * | ||
| * 0: index(target) === index(node) | ||
| * | ||
| * 1: index(target) > index(node) | ||
| * | ||
| * -1: index(target) < index(node) | ||
| */ | ||
| relative: 0 | 1 | -1; | ||
| } | ||
@@ -176,2 +242,14 @@ | ||
| /** | ||
| * store data | ||
| * @example | ||
| * | ||
| * // store value | ||
| * sortable.option('store', value); | ||
| * | ||
| * // get the stored value | ||
| * sortable.option('store'); | ||
| */ | ||
| store?: any; | ||
| /** | ||
| * Specifies which items inside the element should be draggable. | ||
@@ -334,2 +412,3 @@ * @example | ||
| * Triggered when the drag is completed. | ||
| * The params records only the status from the drag to the drop. All operations in the process are ignored. | ||
| */ | ||
@@ -419,7 +498,8 @@ onDrop?: (params: SortableEvent) => void; | ||
| /** | ||
| * Get element's offet in given parentNode | ||
| * @param element an HTMLElement. | ||
| * @param parentEl a specific element's context. | ||
| * Returns the "bounding client rect" of given element | ||
| * @param element The element whose boundingClientRect is wanted | ||
| * @param relativeToContainingBlock Whether the rect should be relative to the containing block of (including) the container | ||
| * @param container The parent the element will be placed in | ||
| */ | ||
| getOffset(element: HTMLElement, parentEl: HTMLElement): DOMOffset; | ||
| getRect(element: HTMLElement, relativeToContainingBlock: boolean, container: HTMLElement): DOMRect; | ||
@@ -433,2 +513,9 @@ /** | ||
| toggleClass(element: HTMLElement, name: string, state: boolean): void; | ||
| /** | ||
| * Determine the direction in which the container is rolling. | ||
| * @param el list container. | ||
| * @param selector an element seletor. | ||
| */ | ||
| detectDirection(el: HTMLElement, selector: string): 'vertical' | 'horizontal'; | ||
| } | ||
@@ -435,0 +522,0 @@ } |
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
Deprecated
MaintenanceThe maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.
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
- Number of lines in readme file
- increased by17.01%
227
Worsened metrics
- Total package byte prevSize
- decreased by-7.16%
88462
- Lines of code
- decreased by-5.96%
1768
- Number of medium maintenance alerts
- increased byInfinity%
1
No dependency changes