diff --git a/Sortable.js b/Sortable.js index ec10918ed..93503ccac 100644 --- a/Sortable.js +++ b/Sortable.js @@ -1,5 +1,5 @@ /**! - * Sortable 1.10.0-rc3 + * Sortable 1.10.0 * @author RubaXa * @author owenm * @license MIT @@ -132,7 +132,7 @@ throw new TypeError("Invalid attempt to spread non-iterable instance"); } - var version = "1.10.0-rc3"; + var version = "1.10.0"; function userAgent(pattern) { return !! @@ -250,15 +250,19 @@ function matrix(el, selfOnly) { var appliedTransforms = ''; - do { - var transform = css(el, 'transform'); + if (typeof el === 'string') { + appliedTransforms = el; + } else { + do { + var transform = css(el, 'transform'); - if (transform && transform !== 'none') { - appliedTransforms = transform + ' ' + appliedTransforms; - } - /* jshint boss:true */ + if (transform && transform !== 'none') { + appliedTransforms = transform + ' ' + appliedTransforms; + } + /* jshint boss:true */ - } while (!selfOnly && (el = el.parentNode)); + } while (!selfOnly && (el = el.parentNode)); + } var matrixFn = window.DOMMatrix || window.WebKitCSSMatrix || window.CSSMatrix; /*jshint -W056 */ @@ -373,16 +377,15 @@ /** * Checks if a side of an element is scrolled past a side of its parents * @param {HTMLElement} el The element who's side being scrolled out of view is in question - * @param {[DOMRect]} rect Optional rect of `el` to use * @param {String} elSide Side of the element in question ('top', 'left', 'right', 'bottom') * @param {String} parentSide Side of the parent in question ('top', 'left', 'right', 'bottom') * @return {HTMLElement} The parent scroll element that the el's side is scrolled past, or null if there is no such element */ - function isScrolledPast(el, rect, elSide, parentSide) { + function isScrolledPast(el, elSide, parentSide) { var parent = getParentAutoScrollElement(el, true), - elSideVal = (rect ? rect : getRect(el))[elSide]; + elSideVal = getRect(el)[elSide]; /* jshint boss:true */ while (parent) { @@ -635,7 +638,9 @@ target: child, rect: getRect(child) }); - var fromRect = getRect(child); // If animating: compensate for current animation + + var fromRect = _objectSpread({}, animationStates[animationStates.length - 1].rect); // If animating: compensate for current animation + if (child.thisAnimationDuration) { var childMatrix = matrix(child, true); @@ -684,9 +689,7 @@ toRect.left -= targetMatrix.e; } - target.toRect = toRect; // If element is scrolled out of view: Do not animate - - if ((isScrolledPast(target, toRect, 'bottom', 'top') || isScrolledPast(target, toRect, 'top', 'bottom') || isScrolledPast(target, toRect, 'right', 'left') || isScrolledPast(target, toRect, 'left', 'right')) && (isScrolledPast(target, animatingRect, 'bottom', 'top') || isScrolledPast(target, animatingRect, 'top', 'bottom') || isScrolledPast(target, animatingRect, 'right', 'left') || isScrolledPast(target, animatingRect, 'left', 'right')) && (isScrolledPast(target, fromRect, 'bottom', 'top') || isScrolledPast(target, fromRect, 'top', 'bottom') || isScrolledPast(target, fromRect, 'right', 'left') || isScrolledPast(target, fromRect, 'left', 'right'))) return; + target.toRect = toRect; if (target.thisAnimationDuration) { // Could also check if animatingRect is between fromRect and toRect @@ -706,7 +709,7 @@ time = _this.options.animation; } - _this.animate(target, animatingRect, time); + _this.animate(target, animatingRect, toRect, time); } if (time) { @@ -735,16 +738,15 @@ animationStates = []; }, - animate: function animate(target, prev, duration) { + animate: function animate(target, currentRect, toRect, duration) { if (duration) { css(target, 'transition', ''); css(target, 'transform', ''); - var currentRect = getRect(target), - elMatrix = matrix(this.el), + var elMatrix = matrix(this.el), scaleX = elMatrix && elMatrix.a, scaleY = elMatrix && elMatrix.d, - translateX = (prev.left - currentRect.left) / (scaleX || 1), - translateY = (prev.top - currentRect.top) / (scaleY || 1); + translateX = (currentRect.left - toRect.left) / (scaleX || 1), + translateY = (currentRect.top - toRect.top) / (scaleY || 1); target.animatingX = !!translateX; target.animatingY = !!translateY; css(target, 'transform', 'translate3d(' + translateX + 'px,' + translateY + 'px,0)'); @@ -792,12 +794,17 @@ var _this = this; this.eventCanceled = false; + + evt.cancel = function () { + _this.eventCanceled = true; + }; + var eventNameGlobal = eventName + 'Global'; plugins.forEach(function (plugin) { if (!sortable[plugin.pluginName]) return; // Fire global events if it exists in this sortable if (sortable[plugin.pluginName][eventNameGlobal]) { - _this.eventCanceled = !!sortable[plugin.pluginName][eventNameGlobal](_objectSpread({ + sortable[plugin.pluginName][eventNameGlobal](_objectSpread({ sortable: sortable }, evt)); } // Only fire plugin event if plugin is enabled in this sortable, @@ -805,21 +812,22 @@ if (sortable.options[plugin.pluginName] && sortable[plugin.pluginName][eventName]) { - _this.eventCanceled = _this.eventCanceled || !!sortable[plugin.pluginName][eventName](_objectSpread({ + sortable[plugin.pluginName][eventName](_objectSpread({ sortable: sortable }, evt)); } }); }, - initializePlugins: function initializePlugins(sortable, el, defaults) { + initializePlugins: function initializePlugins(sortable, el, defaults, options) { plugins.forEach(function (plugin) { var pluginName = plugin.pluginName; if (!sortable.options[pluginName] && !plugin.initializeByDefault) return; - var initialized = new plugin(sortable, el); + var initialized = new plugin(sortable, el, sortable.options); initialized.sortable = sortable; + initialized.options = sortable.options; sortable[pluginName] = initialized; // Add default options from plugin - _extends(defaults, initialized.options); + _extends(defaults, initialized.defaults); }); for (var option in sortable.options) { @@ -831,14 +839,14 @@ } } }, - getEventOptions: function getEventOptions(name, sortable) { - var eventOptions = {}; + getEventProperties: function getEventProperties(name, sortable) { + var eventProperties = {}; plugins.forEach(function (plugin) { - if (typeof plugin.eventOptions !== 'function') return; + if (typeof plugin.eventProperties !== 'function') return; - _extends(eventOptions, plugin.eventOptions.call(sortable, name)); + _extends(eventProperties, plugin.eventProperties.call(sortable[plugin.pluginName], name)); }); - return eventOptions; + return eventProperties; }, modifyOption: function modifyOption(sortable, name, value) { var modifiedValue; @@ -868,8 +876,9 @@ newDraggableIndex = _ref.newDraggableIndex, originalEvent = _ref.originalEvent, putSortable = _ref.putSortable, - eventOptions = _ref.eventOptions; - sortable = sortable || rootEl[expando]; + extraEventProperties = _ref.extraEventProperties; + sortable = sortable || rootEl && rootEl[expando]; + if (!sortable) return; var evt, options = sortable.options, onName = 'on' + name.charAt(0).toUpperCase() + name.substr(1); // Support for new CustomEvent feature @@ -895,10 +904,10 @@ evt.originalEvent = originalEvent; evt.pullMode = putSortable ? putSortable.lastPutMode : undefined; - var allEventOptions = _objectSpread({}, eventOptions, PluginManager.getEventOptions(name, sortable)); + var allEventProperties = _objectSpread({}, extraEventProperties, PluginManager.getEventProperties(name, sortable)); - for (var option in allEventOptions) { - evt[option] = allEventOptions[option]; + for (var option in allEventProperties) { + evt[option] = allEventProperties[option]; } if (rootEl) { @@ -986,6 +995,10 @@ sortables = [], tapEvt, touchEvt, + lastDx, + lastDy, + tapDistanceLeft, + tapDistanceTop, moved, lastTarget, lastDirection, @@ -1032,7 +1045,7 @@ return elCSS.gridTemplateColumns.split(' ').length <= 1 ? 'vertical' : 'horizontal'; } - if (child1 && firstChildCSS["float"] !== 'none') { + if (child1 && firstChildCSS["float"] && firstChildCSS["float"] !== 'none') { var touchingSideChild2 = firstChildCSS["float"] === 'left' ? 'left' : 'right'; return child2 && (secondChildCSS.clear === 'both' || secondChildCSS.clear === touchingSideChild2) ? 'vertical' : 'horizontal'; } @@ -1286,7 +1299,7 @@ options = this.options, preventOnFilter = options.preventOnFilter, type = evt.type, - touch = evt.touches && evt.touches[0], + touch = evt.touches && evt.touches[0] || evt.pointerType && evt.pointerType === 'touch' && evt, target = (touch || evt).target, originalTarget = evt.target.shadowRoot && (evt.path && evt.path[0] || evt.composedPath && evt.composedPath()[0]) || target, filter = options.filter; @@ -1387,6 +1400,7 @@ dragStartFn; if (target && !dragEl && target.parentNode === el) { + var dragRect = getRect(target); rootEl = el; dragEl = target; parentEl = dragEl.parentNode; @@ -1399,6 +1413,8 @@ clientX: (touch || evt).clientX, clientY: (touch || evt).clientY }; + tapDistanceLeft = tapEvt.clientX - dragRect.left; + tapDistanceTop = tapEvt.clientY - dragRect.top; this._lastX = (touch || evt).clientX; this._lastY = (touch || evt).clientY; dragEl.style['will-change'] = 'all'; @@ -1618,8 +1634,7 @@ scaleY = ghostEl && ghostMatrix && ghostMatrix.d, relativeScrollOffset = PositionGhostAbsolutely && ghostRelativeParent && getRelativeScrollOffset(ghostRelativeParent), dx = (touch.clientX - tapEvt.clientX + fallbackOffset.x) / (scaleX || 1) + (relativeScrollOffset ? relativeScrollOffset[0] - ghostRelativeParentInitialScroll[0] : 0) / (scaleX || 1), - dy = (touch.clientY - tapEvt.clientY + fallbackOffset.y) / (scaleY || 1) + (relativeScrollOffset ? relativeScrollOffset[1] - ghostRelativeParentInitialScroll[1] : 0) / (scaleY || 1), - translate3d = evt.touches ? 'translate3d(' + dx + 'px,' + dy + 'px,0)' : 'translate(' + dx + 'px,' + dy + 'px)'; // only set the status to dragging, when we are actually dragging + dy = (touch.clientY - tapEvt.clientY + fallbackOffset.y) / (scaleY || 1) + (relativeScrollOffset ? relativeScrollOffset[1] - ghostRelativeParentInitialScroll[1] : 0) / (scaleY || 1); // only set the status to dragging, when we are actually dragging if (!Sortable.active && !awaitingDragStarted) { if (fallbackTolerance && Math.max(Math.abs(touch.clientX - this._lastX), Math.abs(touch.clientY - this._lastY)) < fallbackTolerance) { @@ -1629,11 +1644,31 @@ this._onDragStart(evt, true); } - touchEvt = touch; - css(ghostEl, 'webkitTransform', translate3d); - css(ghostEl, 'mozTransform', translate3d); - css(ghostEl, 'msTransform', translate3d); - css(ghostEl, 'transform', translate3d); + if (ghostEl) { + if (ghostMatrix) { + ghostMatrix.e += dx - (lastDx || 0); + ghostMatrix.f += dy - (lastDy || 0); + } else { + ghostMatrix = { + a: 1, + b: 0, + c: 0, + d: 1, + e: dx, + f: dy + }; + } + + var cssMatrix = "matrix(".concat(ghostMatrix.a, ",").concat(ghostMatrix.b, ",").concat(ghostMatrix.c, ",").concat(ghostMatrix.d, ",").concat(ghostMatrix.e, ",").concat(ghostMatrix.f, ")"); + css(ghostEl, 'webkitTransform', cssMatrix); + css(ghostEl, 'mozTransform', cssMatrix); + css(ghostEl, 'msTransform', cssMatrix); + css(ghostEl, 'transform', cssMatrix); + lastDx = dx; + lastDy = dy; + touchEvt = touch; + } + evt.cancelable && evt.preventDefault(); } }, @@ -1681,7 +1716,9 @@ css(ghostEl, 'zIndex', '100000'); css(ghostEl, 'pointerEvents', 'none'); Sortable.ghost = ghostEl; - container.appendChild(ghostEl); + container.appendChild(ghostEl); // Set transform-origin + + css(ghostEl, 'transform-origin', tapDistanceLeft / parseInt(ghostEl.style.width) * 100 + '% ' + tapDistanceTop / parseInt(ghostEl.style.height) * 100 + '%'); } }, _onDragStart: function _onDragStart( @@ -1960,7 +1997,7 @@ differentLevel = dragEl.parentNode !== el, differentRowCol = !_dragElInRowColumn(dragEl.animated && dragEl.toRect || dragRect, target.animated && target.toRect || targetRect, vertical), side1 = vertical ? 'top' : 'left', - scrolledPastTop = isScrolledPast(target, null, 'top', 'top') || isScrolledPast(dragEl, null, 'top', 'top'), + scrolledPastTop = isScrolledPast(target, 'top', 'top') || isScrolledPast(dragEl, 'top', 'top'), scrollBefore = scrolledPastTop ? scrolledPastTop.scrollTop : void 0; if (lastTarget !== target) { @@ -2061,7 +2098,8 @@ newDraggableIndex = index(dragEl, options.draggable); pluginEvent('drop', this, { evt: evt - }); // Get again after plugin event + }); + parentEl = dragEl && dragEl.parentNode; // Get again after plugin event newIndex = index(dragEl); newDraggableIndex = index(dragEl, options.draggable); @@ -2220,7 +2258,7 @@ savedInputChecked.forEach(function (el) { el.checked = true; }); - savedInputChecked.length = 0; + savedInputChecked.length = lastDx = lastDy = 0; }, handleEvent: function handleEvent( /**Event*/ @@ -2396,7 +2434,7 @@ } if (this.options.group.revertClone) { - this._animate(dragEl, cloneEl); + this.animate(dragEl, cloneEl); } css(cloneEl, 'display', ''); @@ -2548,8 +2586,8 @@ var idx = inputs.length; while (idx--) { - var _el = inputs[idx]; - _el.checked && savedInputChecked.push(_el); + var el = inputs[idx]; + el.checked && savedInputChecked.push(el); } } @@ -2587,11 +2625,21 @@ detectDirection: _detectDirection, getChild: getChild }; + /** + * Get the Sortable instance of an element + * @param {HTMLElement} element The element + * @return {Sortable|undefined} The instance of Sortable + */ + + Sortable.get = function (element) { + return element[expando]; + }; /** * Mount a plugin to Sortable * @param {...SortablePlugin|SortablePlugin[]} plugins Plugins being mounted */ + Sortable.mount = function () { for (var _len = arguments.length, plugins = new Array(_len), _key = 0; _key < _len; _key++) { plugins[_key] = arguments[_key]; @@ -2600,7 +2648,7 @@ if (plugins[0].constructor === Array) plugins = plugins[0]; plugins.forEach(function (plugin) { if (!plugin.prototype || !plugin.prototype.constructor) { - throw "Sortable: Mounted plugin must be a constructor function, not ".concat({}.toString.call(el)); + throw "Sortable: Mounted plugin must be a constructor function, not ".concat({}.toString.call(plugin)); } if (plugin.utils) Sortable.utils = _objectSpread({}, Sortable.utils, plugin.utils); @@ -2632,7 +2680,7 @@ function AutoScrollPlugin() { function AutoScroll() { - this.options = { + this.defaults = { scroll: true, scrollSensitivity: 30, scrollSpeed: 10, @@ -2653,7 +2701,7 @@ if (this.sortable.nativeDraggable) { on(document, 'dragover', this._handleAutoScroll); } else { - if (this.sortable.options.supportPointer) { + if (this.options.supportPointer) { on(document, 'pointermove', this._handleFallbackAutoScroll); } else if (originalEvent.touches) { on(document, 'touchmove', this._handleFallbackAutoScroll); @@ -2666,7 +2714,7 @@ var originalEvent = _ref2.originalEvent; // For when bubbling is canceled and using fallback (fallback 'touchmove' always reached) - if (!this.sortable.options.dragOverBubble && !originalEvent.rootEl) { + if (!this.options.dragOverBubble && !originalEvent.rootEl) { this._handleAutoScroll(originalEvent); } }, @@ -2693,8 +2741,8 @@ _handleAutoScroll: function _handleAutoScroll(evt, fallback) { var _this = this; - var x = evt.clientX, - y = evt.clientY, + var x = (evt.touches ? evt.touches[0] : evt).clientX, + y = (evt.touches ? evt.touches[0] : evt).clientY, elem = document.elementFromPoint(x, y); touchEvt$1 = evt; // IE does not seem to have native autoscroll, // Edge's autoscroll seems too conditional, @@ -2724,7 +2772,7 @@ } } else { // if DnD is enabled (and browser has good autoscrolling), first autoscroll will already scroll, so get parent autoscroll of first autoscroll - if (!this.sortable.options.bubbleScroll || getParentAutoScrollElement(elem, true) === getWindowScrollingElement()) { + if (!this.options.bubbleScroll || getParentAutoScrollElement(elem, true) === getWindowScrollingElement()) { clearAutoScrolls(); return; } @@ -2753,7 +2801,9 @@ var autoScroll = throttle(function (evt, options, rootEl, isFallback) { // Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=505521 if (!options.scroll) return; - var sens = options.scrollSensitivity, + var x = (evt.touches ? evt.touches[0] : evt).clientX, + y = (evt.touches ? evt.touches[0] : evt).clientY, + sens = options.scrollSensitivity, speed = options.scrollSpeed, winScroller = getWindowScrollingElement(); var scrollThisInstance = false, @@ -2798,8 +2848,8 @@ canScrollY = height < scrollHeight && (elCSS.overflowY === 'auto' || elCSS.overflowY === 'scroll'); } - var vx = canScrollX && (Math.abs(right - evt.clientX) <= sens && scrollPosX + width < scrollWidth) - (Math.abs(left - evt.clientX) <= sens && !!scrollPosX); - var vy = canScrollY && (Math.abs(bottom - evt.clientY) <= sens && scrollPosY + height < scrollHeight) - (Math.abs(top - evt.clientY) <= sens && !!scrollPosY); + var vx = canScrollX && (Math.abs(right - x) <= sens && scrollPosX + width < scrollWidth) - (Math.abs(left - x) <= sens && !!scrollPosX); + var vy = canScrollY && (Math.abs(bottom - y) <= sens && scrollPosY + height < scrollHeight) - (Math.abs(top - y) <= sens && !!scrollPosY); if (!autoScrolls[layersOut]) { for (var i = 0; i <= layersOut; i++) { @@ -2858,12 +2908,16 @@ unhideGhostForTarget = _ref.unhideGhostForTarget; var toSortable = putSortable || activeSortable; hideGhostForTarget(); - var target = document.elementFromPoint(originalEvent.clientX, originalEvent.clientY); + var touch = originalEvent.changedTouches && originalEvent.changedTouches.length ? originalEvent.changedTouches[0] : originalEvent; + var target = document.elementFromPoint(touch.clientX, touch.clientY); unhideGhostForTarget(); if (toSortable && !toSortable.el.contains(target)) { dispatchSortableEvent('spill'); - this.onSpill(dragEl); + this.onSpill({ + dragEl: dragEl, + putSortable: putSortable + }); } }; @@ -2875,9 +2929,16 @@ var oldDraggableIndex = _ref2.oldDraggableIndex; this.startIndex = oldDraggableIndex; }, - onSpill: function onSpill(dragEl) { + onSpill: function onSpill(_ref3) { + var dragEl = _ref3.dragEl, + putSortable = _ref3.putSortable; this.sortable.captureAnimationState(); - var nextSibling = getChild(this.sortable.el, this.startIndex, this.sortable.options); + + if (putSortable) { + putSortable.captureAnimationState(); + } + + var nextSibling = getChild(this.sortable.el, this.startIndex, this.options); if (nextSibling) { this.sortable.el.insertBefore(dragEl, nextSibling); @@ -2886,6 +2947,10 @@ } this.sortable.animateAll(); + + if (putSortable) { + putSortable.animateAll(); + } }, drop: drop }; @@ -2897,10 +2962,13 @@ function Remove() {} Remove.prototype = { - onSpill: function onSpill(dragEl) { - this.sortable.captureAnimationState(); + onSpill: function onSpill(_ref4) { + var dragEl = _ref4.dragEl, + putSortable = _ref4.putSortable; + var parentSortable = putSortable || this.sortable; + parentSortable.captureAnimationState(); dragEl.parentNode && dragEl.parentNode.removeChild(dragEl); - this.sortable.animateAll(); + parentSortable.animateAll(); }, drop: drop }; @@ -2913,7 +2981,7 @@ function SwapPlugin() { function Swap() { - this.options = { + this.defaults = { swapClass: 'sortable-swap-highlight' }; } @@ -2928,10 +2996,11 @@ target = _ref2.target, onMove = _ref2.onMove, activeSortable = _ref2.activeSortable, - changed = _ref2.changed; + changed = _ref2.changed, + cancel = _ref2.cancel; if (!activeSortable.options.swap) return; var el = this.sortable.el, - options = this.sortable.options; + options = this.options; if (target && target !== el) { var prevSwapEl = lastSwapEl; @@ -2949,14 +3018,15 @@ } changed(); - return completed(true); + completed(true); + cancel(); }, drop: function drop(_ref3) { var activeSortable = _ref3.activeSortable, putSortable = _ref3.putSortable, dragEl = _ref3.dragEl; var toSortable = putSortable || this.sortable; - var options = this.sortable.options; + var options = this.options; lastSwapEl && toggleClass(lastSwapEl, options.swapClass, false); if (lastSwapEl && (options.swap || putSortable && putSortable.options.swap)) { @@ -2975,7 +3045,7 @@ }; return _extends(Swap, { pluginName: 'swap', - eventOptions: function eventOptions() { + eventProperties: function eventProperties() { return { swapItem: lastSwapEl }; @@ -3032,7 +3102,7 @@ on(document, 'keydown', this._checkKeyDown); on(document, 'keyup', this._checkKeyUp); - this.options = { + this.defaults = { selectedClass: 'sortable-selected', multiDragKey: null, setData: function setData(dataTransfer, dragEl) { @@ -3062,39 +3132,42 @@ this.isMultiDrag = ~multiDragElements.indexOf(dragEl$1); }, setupClone: function setupClone(_ref2) { - var sortable = _ref2.sortable; + var sortable = _ref2.sortable, + cancel = _ref2.cancel; if (!this.isMultiDrag) return; - for (var _i = 0; _i < multiDragElements.length; _i++) { - multiDragClones.push(clone(multiDragElements[_i])); - multiDragClones[_i].sortableIndex = multiDragElements[_i].sortableIndex; - multiDragClones[_i].draggable = false; - multiDragClones[_i].style['will-change'] = ''; - toggleClass(multiDragClones[_i], sortable.options.selectedClass, false); - multiDragElements[_i] === dragEl$1 && toggleClass(multiDragClones[_i], sortable.options.chosenClass, false); + for (var i = 0; i < multiDragElements.length; i++) { + multiDragClones.push(clone(multiDragElements[i])); + multiDragClones[i].sortableIndex = multiDragElements[i].sortableIndex; + multiDragClones[i].draggable = false; + multiDragClones[i].style['will-change'] = ''; + toggleClass(multiDragClones[i], this.options.selectedClass, false); + multiDragElements[i] === dragEl$1 && toggleClass(multiDragClones[i], this.options.chosenClass, false); } sortable._hideClone(); - return true; + cancel(); }, clone: function clone(_ref3) { var sortable = _ref3.sortable, rootEl = _ref3.rootEl, - dispatchSortableEvent = _ref3.dispatchSortableEvent; + dispatchSortableEvent = _ref3.dispatchSortableEvent, + cancel = _ref3.cancel; if (!this.isMultiDrag) return; - if (!sortable.options.removeCloneOnHide) { + if (!this.options.removeCloneOnHide) { if (multiDragElements.length && multiDragSortable === sortable) { insertMultiDragClones(true, rootEl); dispatchSortableEvent('clone'); - return true; + cancel(); } } }, showClone: function showClone(_ref4) { var cloneNowShown = _ref4.cloneNowShown, - rootEl = _ref4.rootEl; + rootEl = _ref4.rootEl, + cancel = _ref4.cancel; if (!this.isMultiDrag) return; insertMultiDragClones(false, rootEl); multiDragClones.forEach(function (clone) { @@ -3102,22 +3175,25 @@ }); cloneNowShown(); clonesHidden = false; - return true; + cancel(); }, hideClone: function hideClone(_ref5) { + var _this = this; + var sortable = _ref5.sortable, - cloneNowHidden = _ref5.cloneNowHidden; + cloneNowHidden = _ref5.cloneNowHidden, + cancel = _ref5.cancel; if (!this.isMultiDrag) return; multiDragClones.forEach(function (clone) { css(clone, 'display', 'none'); - if (sortable.options.removeCloneOnHide && clone.parentNode) { + if (_this.options.removeCloneOnHide && clone.parentNode) { clone.parentNode.removeChild(clone); } }); cloneNowHidden(); clonesHidden = true; - return true; + cancel(); }, dragStartGlobal: function dragStartGlobal(_ref6) { var sortable = _ref6.sortable; @@ -3136,10 +3212,12 @@ dragStarted = true; }, dragStarted: function dragStarted(_ref7) { + var _this2 = this; + var sortable = _ref7.sortable; if (!this.isMultiDrag) return; - if (sortable.options.sort) { + if (this.options.sort) { // Capture rects, // hide multi drag elements (by positioning them absolute), // set multi drag elements rects to dragRect, @@ -3148,7 +3226,7 @@ // unset rects & remove from DOM sortable.captureAnimationState(); - if (sortable.options.animation) { + if (this.options.animation) { multiDragElements.forEach(function (multiDragElement) { if (multiDragElement === dragEl$1) return; css(multiDragElement, 'position', 'absolute'); @@ -3167,24 +3245,26 @@ folding = false; initialFolding = false; - if (sortable.options.animation) { + if (_this2.options.animation) { multiDragElements.forEach(function (multiDragElement) { unsetRect(multiDragElement); }); } // Remove all auxiliary multidrag items from el, if sorting enabled - if (sortable.options.sort) { + if (_this2.options.sort) { removeMultiDragElements(); } }); }, dragOver: function dragOver(_ref8) { var target = _ref8.target, - completed = _ref8.completed; + completed = _ref8.completed, + cancel = _ref8.cancel; if (folding && ~multiDragElements.indexOf(target)) { - return completed(false); + completed(false); + cancel(); } }, revert: function revert(_ref9) { @@ -3205,7 +3285,7 @@ fromSortable.removeAnimationState(multiDragElement); }); folding = false; - insertMultiDragElements(!sortable.options.removeCloneOnHide, rootEl); + insertMultiDragElements(!this.options.removeCloneOnHide, rootEl); } }, dragOverCompleted: function dragOverCompleted(_ref10) { @@ -3215,7 +3295,7 @@ activeSortable = _ref10.activeSortable, parentEl = _ref10.parentEl, putSortable = _ref10.putSortable; - var options = sortable.options; + var options = this.options; if (insertion) { // Clones must be hidden before folding animation to capture dragRectAbsolute properly @@ -3298,7 +3378,7 @@ putSortable = _ref12.putSortable; var toSortable = putSortable || this.sortable; if (!evt) return; - var options = sortable.options, + var options = this.options, children = parentEl.children; // Multi-drag selection if (!dragStarted) { @@ -3318,32 +3398,32 @@ originalEvt: evt }); // Modifier activated, select from last to dragEl - if ((!options.multiDragKey || this.multiDragKeyDown) && evt.shiftKey && lastMultiDragSelect && sortable.el.contains(lastMultiDragSelect)) { + if (evt.shiftKey && lastMultiDragSelect && sortable.el.contains(lastMultiDragSelect)) { var lastIndex = index(lastMultiDragSelect), currentIndex = index(dragEl$1); if (~lastIndex && ~currentIndex && lastIndex !== currentIndex) { // Must include lastMultiDragSelect (select it), in case modified selection from no selection // (but previous selection existed) - var n, _i2; + var n, i; if (currentIndex > lastIndex) { - _i2 = lastIndex; + i = lastIndex; n = currentIndex; } else { - _i2 = currentIndex; + i = currentIndex; n = lastIndex + 1; } - for (; _i2 < n; _i2++) { - if (~multiDragElements.indexOf(children[_i2])) continue; - toggleClass(children[_i2], options.selectedClass, true); - multiDragElements.push(children[_i2]); + for (; i < n; i++) { + if (~multiDragElements.indexOf(children[i])) continue; + toggleClass(children[i], options.selectedClass, true); + multiDragElements.push(children[i]); dispatchEvent({ sortable: sortable, rootEl: rootEl, name: 'select', - targetEl: children[_i2], + targetEl: children[i], originalEvt: evt }); } @@ -3444,7 +3524,7 @@ this.isMultiDrag = dragStarted = false; multiDragClones.length = 0; }, - destroy: function destroy() { + destroyGlobal: function destroyGlobal() { this._deselectMultiDrag(); off(document, 'pointerup', this._deselectMultiDrag); @@ -3458,13 +3538,13 @@ if (multiDragSortable !== this.sortable) return; // Only deselect if target is not item in this sortable - if (evt && closest(evt.target, this.sortable.options.draggable, this.sortable.el, false)) return; // Only deselect if left click + if (evt && closest(evt.target, this.options.draggable, this.sortable.el, false)) return; // Only deselect if left click if (evt && evt.button !== 0) return; while (multiDragElements.length) { var el = multiDragElements[0]; - toggleClass(el, this.sortable.options.selectedClass, false); + toggleClass(el, this.options.selectedClass, false); multiDragElements.shift(); dispatchEvent({ sortable: this.sortable, @@ -3476,12 +3556,12 @@ } }, _checkKeyDown: function _checkKeyDown(evt) { - if (evt.key === this.sortable.options.multiDragKey) { + if (evt.key === this.options.multiDragKey) { this.multiDragKeyDown = true; } }, _checkKeyUp: function _checkKeyUp(evt) { - if (evt.key === this.sortable.options.multiDragKey) { + if (evt.key === this.options.multiDragKey) { this.multiDragKeyDown = false; } } @@ -3520,8 +3600,8 @@ multiDragElements.splice(index, 1); } }, - eventOptions: function eventOptions() { - var _this = this; + eventProperties: function eventProperties() { + var _this3 = this; var oldIndicies = [], newIndicies = []; @@ -3536,7 +3616,7 @@ if (folding && multiDragElement !== dragEl$1) { newIndex = -1; } else if (folding) { - newIndex = index(multiDragElement, ':not(.' + _this.options.selectedClass + ')'); + newIndex = index(multiDragElement, ':not(.' + _this3.options.selectedClass + ')'); } else { newIndex = index(multiDragElement); } @@ -3570,7 +3650,7 @@ } function insertMultiDragElements(clonesInserted, rootEl) { - multiDragElements.forEach(function (multiDragElement) { + multiDragElements.forEach(function (multiDragElement, i) { var target = rootEl.children[multiDragElement.sortableIndex + (clonesInserted ? Number(i) : 0)]; if (target) { @@ -3588,7 +3668,7 @@ function insertMultiDragClones(elementsInserted, rootEl) { - multiDragClones.forEach(function (clone) { + multiDragClones.forEach(function (clone, i) { var target = rootEl.children[clone.sortableIndex + (elementsInserted ? Number(i) : 0)]; if (target) { diff --git a/Sortable.min.js b/Sortable.min.js index bd16c4054..693054f62 100644 --- a/Sortable.min.js +++ b/Sortable.min.js @@ -1,2 +1,2 @@ -/*! Sortable 1.10.0-rc3 - MIT | git://github.com/SortableJS/Sortable.git */ -!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 o(t){return(o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function a(){return(a=Object.assign||function(t){for(var e=1;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!1}return!1}}function k(t,e,n,o){if(t){n=n||document;do{if(null!=e&&(">"===e[0]?t.parentNode===n&&f(t,e):f(t,e))||o&&t===n)return t;if(t===n)break}while(t=(i=t).host&&i!==document&&i.host.nodeType?i.host:i.parentNode)}var i;return null}var p,g=/\s+/g;function P(t,e,n){if(t&&e)if(t.classList)t.classList[n?"add":"remove"](e);else{var o=(" "+t.className+" ").replace(g," ").replace(" "+e+" "," ");t.className=(o+(n?" "+e:"")).replace(g," ")}}function R(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];e in o||-1!==e.indexOf("webkit")||(e="-webkit-"+e),o[e]=n+("string"==typeof n?"":"px")}}function v(t,e){var n="";do{var o=R(t,"transform");o&&"none"!==o&&(n=o+" "+n)}while(!e&&(t=t.parentNode));var i=window.DOMMatrix||window.WebKitCSSMatrix||window.CSSMatrix;return i&&new i(n)}function m(t,e,n){if(t){var o=t.getElementsByTagName(e),i=0,r=o.length;if(n)for(;i=e.left-n&&r<=e.right+n,i=a>=e.top-n&&a<=e.bottom+n;return n&&o&&i?l=t:void 0}}),l}((t=t.touches?t.touches[0]:t).clientX,t.clientY);if(e){var n={};for(var o in t)t.hasOwnProperty(o)&&(n[o]=t[o]);n.target=n.rootEl=e,n.preventDefault=void 0,n.stopPropagation=void 0,e[L]._onDragOver(n)}}}function At(t){G&&G.parentNode[L]._isOutsideThisEl(t.target)}function Nt(t,e){if(!t||!t.nodeType||1!==t.nodeType)throw"Sortable: `el` must be an HTMLElement, not ".concat({}.toString.call(t));this.el=t,this.options=e=a({},e),t[L]=this;var n={group:null,sort:!0,disabled:!1,store:null,handle:null,draggable:/^[uo]l$/i.test(t.nodeName)?">li":">*",swapThreshold:1,invertSwap:!1,invertedSwapThreshold:null,removeCloneOnHide:!0,direction:function(){return Ct(t,this.options)},ghostClass:"sortable-ghost",chosenClass:"sortable-chosen",dragClass:"sortable-drag",ignore:"a, img",filter:null,preventOnFilter:!0,animation:0,easing:null,setData:function(t,e){t.setData("Text",e.textContent)},dropBubble:!1,dragoverBubble:!1,dataIdAttr:"data-id",delay:0,delayOnTouchOnly:!1,touchStartThreshold:(Number.parseInt?Number:window).parseInt(window.devicePixelRatio,10)||1,forceFallback:!1,fallbackClass:"sortable-fallback",fallbackOnBody:!1,fallbackTolerance:0,fallbackOffset:{x:0,y:0},supportPointer:!1!==Nt.supportPointer&&"PointerEvent"in window,emptyInsertThreshold:5};for(var o in j.initializePlugins(this,t,n),n)o in e||(e[o]=n[o]);for(var i in Tt(e),this)"_"===i.charAt(0)&&"function"==typeof this[i]&&(this[i]=this[i].bind(this));this.nativeDraggable=!e.forceFallback&&_t,this.nativeDraggable&&(this.options.touchStartThreshold=1),e.supportPointer?d(t,"pointerdown",this._onTapStart):(d(t,"mousedown",this._onTapStart),d(t,"touchstart",this._onTapStart)),this.nativeDraggable&&(d(t,"dragover",this),d(t,"dragenter",this)),gt.push(this.el),e.store&&e.store.get&&this.sort(e.store.get(this)||[]),a(this,x())}function It(t,e,n,o,i,r,a,l){var s,c,u=t[L],d=u.options.onMove;return!window.CustomEvent||y||E?(s=document.createEvent("Event")).initEvent("move",!0,!0):s=new CustomEvent("move",{bubbles:!0,cancelable:!0}),s.to=e,s.from=t,s.dragged=n,s.draggedRect=o,s.related=i||e,s.relatedRect=r||X(e),s.willInsertAfter=l,s.originalEvent=a,t.dispatchEvent(s),d&&(c=d.call(u,s,a)),c}function kt(t){t.draggable=!1}function Pt(){wt=!1}function Rt(t){for(var e=t.tagName+t.className+t.src+t.href+t.textContent,n=e.length,o=0;n--;)o+=e.charCodeAt(n);return o.toString(36)}function Xt(t){return setTimeout(t,0)}function Yt(t){return clearTimeout(t)}Nt.prototype={constructor:Nt,_isOutsideThisEl:function(t){this.el.contains(t)||t===this.el||(ct=null)},_getDirection:function(t,e){return"function"==typeof this.options.direction?this.options.direction.call(this,t,e,G):this.options.direction},_onTapStart:function(e){if(e.cancelable){var n=this,o=this.el,t=this.options,i=t.preventOnFilter,r=e.type,a=e.touches&&e.touches[0],l=(a||e).target,s=e.target.shadowRoot&&(e.path&&e.path[0]||e.composedPath&&e.composedPath()[0])||l,c=t.filter;if(function(t){yt.length=0;var e=t.getElementsByTagName("input"),n=e.length;for(;n--;){var o=e[n];o.checked&&yt.push(o)}}(o),!G&&!(/mousedown|pointerdown/.test(r)&&0!==e.button||t.disabled||s.isContentEditable||(l=k(l,t.draggable,o,!1))&&l.animated||Q===l)){if(tt=F(l),nt=F(l,t.draggable),"function"==typeof c){if(c.call(this,e,l,this))return z({sortable:n,rootEl:s,name:"filter",targetEl:l,toEl:o,fromEl:o}),W("filter",n,{evt:e}),void(i&&e.cancelable&&e.preventDefault())}else if(c&&(c=c.split(",").some(function(t){if(t=k(s,t.trim(),o,!1))return z({sortable:n,rootEl:t,name:"filter",targetEl:l,fromEl:o,toEl:o}),W("filter",n,{evt:e}),!0})))return void(i&&e.cancelable&&e.preventDefault());t.handle&&!k(s,t.handle,o,!1)||this._prepareDragStart(e,a,l)}}},_prepareDragStart:function(t,e,n){var o,i=this,r=i.el,a=i.options,l=r.ownerDocument;if(n&&!G&&n.parentNode===r)if(V=r,U=(G=n).parentNode,Z=G.nextSibling,Q=n,it=a.group,at={target:Nt.dragged=G,clientX:(e||t).clientX,clientY:(e||t).clientY},this._lastX=(e||t).clientX,this._lastY=(e||t).clientY,G.style["will-change"]="all",o=function(){W("delayEnded",i,{evt:t}),Nt.eventCanceled?i._onDrop():(i._disableDelayedDragEvents(),!s&&i.nativeDraggable&&(G.draggable=!0),i._triggerDragStart(t,e),z({sortable:i,name:"choose",originalEvent:t}),P(G,a.chosenClass,!0))},a.ignore.split(",").forEach(function(t){m(G,t.trim(),kt)}),d(l,"dragover",Mt),d(l,"mousemove",Mt),d(l,"touchmove",Mt),d(l,"mouseup",i._onDrop),d(l,"touchend",i._onDrop),d(l,"touchcancel",i._onDrop),s&&this.nativeDraggable&&(this.options.touchStartThreshold=4,G.draggable=!0),W("delayStart",this,{evt:t}),!a.delay||a.delayOnTouchOnly&&!e||this.nativeDraggable&&(E||y))o();else{if(Nt.eventCanceled)return void this._onDrop();d(l,"mouseup",i._disableDelayedDrag),d(l,"touchend",i._disableDelayedDrag),d(l,"touchcancel",i._disableDelayedDrag),d(l,"mousemove",i._delayedDragTouchMoveHandler),d(l,"touchmove",i._delayedDragTouchMoveHandler),a.supportPointer&&d(l,"pointermove",i._delayedDragTouchMoveHandler),i._dragStartTimer=setTimeout(o,a.delay)}},_delayedDragTouchMoveHandler:function(t){var e=t.touches?t.touches[0]:t;Math.max(Math.abs(e.clientX-this._lastX),Math.abs(e.clientY-this._lastY))>=Math.floor(this.options.touchStartThreshold/(this.nativeDraggable&&window.devicePixelRatio||1))&&this._disableDelayedDrag()},_disableDelayedDrag:function(){G&&kt(G),clearTimeout(this._dragStartTimer),this._disableDelayedDragEvents()},_disableDelayedDragEvents:function(){var t=this.el.ownerDocument;h(t,"mouseup",this._disableDelayedDrag),h(t,"touchend",this._disableDelayedDrag),h(t,"touchcancel",this._disableDelayedDrag),h(t,"mousemove",this._delayedDragTouchMoveHandler),h(t,"touchmove",this._delayedDragTouchMoveHandler),h(t,"pointermove",this._delayedDragTouchMoveHandler)},_triggerDragStart:function(t,e){e=e||"touch"==t.pointerType&&t,!this.nativeDraggable||e?this.options.supportPointer?d(document,"pointermove",this._onTouchMove):d(document,e?"touchmove":"mousemove",this._onTouchMove):(d(G,"dragend",this),d(V,"dragstart",this._onDragStart));try{document.selection?Xt(function(){document.selection.empty()}):window.getSelection().removeAllRanges()}catch(t){}},_dragStarted:function(t,e){if(ft=!1,V&&G){W("dragStarted",this,{evt:e}),this.nativeDraggable&&d(document,"dragover",At);var n=this.options;t||P(G,n.dragClass,!1),P(G,n.ghostClass,!0),Nt.active=this,t&&this._appendGhost(),z({sortable:this,name:"start",originalEvent:e})}else this._nulling()},_emulateDragOver:function(){if(lt){this._lastX=lt.clientX,this._lastY=lt.clientY,xt();for(var t=document.elementFromPoint(lt.clientX,lt.clientY),e=t;t&&t.shadowRoot&&(t=t.shadowRoot.elementFromPoint(lt.clientX,lt.clientY))!==e;)e=t;if(G.parentNode[L]._isOutsideThisEl(t),e)do{if(e[L]){if(e[L]._onDragOver({clientX:lt.clientX,clientY:lt.clientY,target:t,rootEl:e})&&!this.options.dragoverBubble)break}t=e}while(e=e.parentNode);Ot()}},_onTouchMove:function(t){if(at){var e=this.options,n=e.fallbackTolerance,o=e.fallbackOffset,i=t.touches?t.touches[0]:t,r=q&&v(q),a=q&&r&&r.a,l=q&&r&&r.d,s=Et&&ht&&w(ht),c=(i.clientX-at.clientX+o.x)/(a||1)+(s?s[0]-bt[0]:0)/(a||1),u=(i.clientY-at.clientY+o.y)/(l||1)+(s?s[1]-bt[1]:0)/(l||1),d=t.touches?"translate3d("+c+"px,"+u+"px,0)":"translate("+c+"px,"+u+"px)";if(!Nt.active&&!ft){if(n&&Math.max(Math.abs(i.clientX-this._lastX),Math.abs(i.clientY-this._lastY))o.right+10||t.clientX<=o.right&&t.clientY>o.bottom&&t.clientX>=o.left:t.clientX>o.right&&t.clientY>o.top||t.clientX<=o.right&&t.clientY>o.bottom+10}(n,a,this)&&!g.animated){if(g===G)return A(!1);if(g&&l===n.target&&(s=g),s&&(i=X(s)),!1!==It(V,l,G,o,s,i,n,!!s))return M(),l.appendChild(G),U=l,N(),A(!0)}else if(s.parentNode===l){i=X(s);var v,m,b,w=G.parentNode!==l,y=!function(t,e,n){var o=n?t.left:t.top,i=n?t.right:t.bottom,r=n?t.width:t.height,a=n?e.left:e.top,l=n?e.right:e.bottom,s=n?e.width:e.height;return o===a||i===l||o+r/2===a+s/2}(G.animated&&G.toRect||o,s.animated&&s.toRect||i,a),E=a?"top":"left",D=Y(s,null,"top","top")||Y(G,null,"top","top"),_=D?D.scrollTop:void 0;if(ct!==s&&(m=i[E],vt=!1,mt=!y&&e.invertSwap||w),0!==(v=function(t,e,n,o,i,r,a,l){var s=o?t.clientY:t.clientX,c=o?n.height:n.width,u=o?n.top:n.left,d=o?n.bottom:n.right,h=!1;if(!a)if(l&&dt"===e[0]&&(e=e.substring(1)),t)try{if(t.matches)return t.matches(e);if(t.msMatchesSelector)return t.msMatchesSelector(e);if(t.webkitMatchesSelector)return t.webkitMatchesSelector(e)}catch(t){return!1}return!1}}function P(t,e,n,o){if(t){n=n||document;do{if(null!=e&&(">"===e[0]?t.parentNode===n&&h(t,e):h(t,e))||o&&t===n)return t;if(t===n)break}while(t=(i=t).host&&i!==document&&i.host.nodeType?i.host:i.parentNode)}var i;return null}var f,p=/\s+/g;function k(t,e,n){if(t&&e)if(t.classList)t.classList[n?"add":"remove"](e);else{var o=(" "+t.className+" ").replace(p," ").replace(" "+e+" "," ");t.className=(o+(n?" "+e:"")).replace(p," ")}}function R(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];e in o||-1!==e.indexOf("webkit")||(e="-webkit-"+e),o[e]=n+("string"==typeof n?"":"px")}}function v(t,e){var n="";if("string"==typeof t)n=t;else do{var o=R(t,"transform");o&&"none"!==o&&(n=o+" "+n)}while(!e&&(t=t.parentNode));var i=window.DOMMatrix||window.WebKitCSSMatrix||window.CSSMatrix;return i&&new i(n)}function g(t,e,n){if(t){var o=t.getElementsByTagName(e),i=0,r=o.length;if(n)for(;i=e.left-n&&r<=e.right+n,i=a>=e.top-n&&a<=e.bottom+n;return n&&o&&i?l=t:void 0}}),l}((t=t.touches?t.touches[0]:t).clientX,t.clientY);if(e){var n={};for(var o in t)t.hasOwnProperty(o)&&(n[o]=t[o]);n.target=n.rootEl=e,n.preventDefault=void 0,n.stopPropagation=void 0,e[j]._onDragOver(n)}}}function Pt(t){z&&z.parentNode[j]._isOutsideThisEl(t.target)}function kt(t,e){if(!t||!t.nodeType||1!==t.nodeType)throw"Sortable: `el` must be an HTMLElement, not ".concat({}.toString.call(t));this.el=t,this.options=e=a({},e),t[j]=this;var n={group:null,sort:!0,disabled:!1,store:null,handle:null,draggable:/^[uo]l$/i.test(t.nodeName)?">li":">*",swapThreshold:1,invertSwap:!1,invertedSwapThreshold:null,removeCloneOnHide:!0,direction:function(){return Mt(t,this.options)},ghostClass:"sortable-ghost",chosenClass:"sortable-chosen",dragClass:"sortable-drag",ignore:"a, img",filter:null,preventOnFilter:!0,animation:0,easing:null,setData:function(t,e){t.setData("Text",e.textContent)},dropBubble:!1,dragoverBubble:!1,dataIdAttr:"data-id",delay:0,delayOnTouchOnly:!1,touchStartThreshold:(Number.parseInt?Number:window).parseInt(window.devicePixelRatio,10)||1,forceFallback:!1,fallbackClass:"sortable-fallback",fallbackOnBody:!1,fallbackTolerance:0,fallbackOffset:{x:0,y:0},supportPointer:!1!==kt.supportPointer&&"PointerEvent"in window,emptyInsertThreshold:5};for(var o in O.initializePlugins(this,t,n),n)o in e||(e[o]=n[o]);for(var i in Ot(e),this)"_"===i.charAt(0)&&"function"==typeof this[i]&&(this[i]=this[i].bind(this));this.nativeDraggable=!e.forceFallback&&Tt,this.nativeDraggable&&(this.options.touchStartThreshold=1),e.supportPointer?u(t,"pointerdown",this._onTapStart):(u(t,"mousedown",this._onTapStart),u(t,"touchstart",this._onTapStart)),this.nativeDraggable&&(u(t,"dragover",this),u(t,"dragenter",this)),bt.push(this.el),e.store&&e.store.get&&this.sort(e.store.get(this)||[]),a(this,T())}function Rt(t,e,n,o,i,r,a,l){var s,c,u=t[j],d=u.options.onMove;return!window.CustomEvent||w||E?(s=document.createEvent("Event")).initEvent("move",!0,!0):s=new CustomEvent("move",{bubbles:!0,cancelable:!0}),s.to=e,s.from=t,s.dragged=n,s.draggedRect=o,s.related=i||e,s.relatedRect=r||X(e),s.willInsertAfter=l,s.originalEvent=a,t.dispatchEvent(s),d&&(c=d.call(u,s,a)),c}function Xt(t){t.draggable=!1}function Yt(){Dt=!1}function Bt(t){for(var e=t.tagName+t.className+t.src+t.href+t.textContent,n=e.length,o=0;n--;)o+=e.charCodeAt(n);return o.toString(36)}function Ft(t){return setTimeout(t,0)}function Ht(t){return clearTimeout(t)}kt.prototype={constructor:kt,_isOutsideThisEl:function(t){this.el.contains(t)||t===this.el||(ht=null)},_getDirection:function(t,e){return"function"==typeof this.options.direction?this.options.direction.call(this,t,e,z):this.options.direction},_onTapStart:function(e){if(e.cancelable){var n=this,o=this.el,t=this.options,i=t.preventOnFilter,r=e.type,a=e.touches&&e.touches[0]||e.pointerType&&"touch"===e.pointerType&&e,l=(a||e).target,s=e.target.shadowRoot&&(e.path&&e.path[0]||e.composedPath&&e.composedPath()[0])||l,c=t.filter;if(function(t){St.length=0;var e=t.getElementsByTagName("input"),n=e.length;for(;n--;){var o=e[n];o.checked&&St.push(o)}}(o),!z&&!(/mousedown|pointerdown/.test(r)&&0!==e.button||t.disabled||s.isContentEditable||(l=P(l,t.draggable,o,!1))&&l.animated||Z===l)){if(J=F(l),et=F(l,t.draggable),"function"==typeof c){if(c.call(this,e,l,this))return W({sortable:n,rootEl:s,name:"filter",targetEl:l,toEl:o,fromEl:o}),K("filter",n,{evt:e}),void(i&&e.cancelable&&e.preventDefault())}else if(c&&(c=c.split(",").some(function(t){if(t=P(s,t.trim(),o,!1))return W({sortable:n,rootEl:t,name:"filter",targetEl:l,fromEl:o,toEl:o}),K("filter",n,{evt:e}),!0})))return void(i&&e.cancelable&&e.preventDefault());t.handle&&!P(s,t.handle,o,!1)||this._prepareDragStart(e,a,l)}}},_prepareDragStart:function(t,e,n){var o,i=this,r=i.el,a=i.options,l=r.ownerDocument;if(n&&!z&&n.parentNode===r){var s=X(n);if(q=r,G=(z=n).parentNode,V=z.nextSibling,Z=n,ot=a.group,rt={target:kt.dragged=z,clientX:(e||t).clientX,clientY:(e||t).clientY},ct=rt.clientX-s.left,ut=rt.clientY-s.top,this._lastX=(e||t).clientX,this._lastY=(e||t).clientY,z.style["will-change"]="all",o=function(){K("delayEnded",i,{evt:t}),kt.eventCanceled?i._onDrop():(i._disableDelayedDragEvents(),!c&&i.nativeDraggable&&(z.draggable=!0),i._triggerDragStart(t,e),W({sortable:i,name:"choose",originalEvent:t}),k(z,a.chosenClass,!0))},a.ignore.split(",").forEach(function(t){g(z,t.trim(),Xt)}),u(l,"dragover",It),u(l,"mousemove",It),u(l,"touchmove",It),u(l,"mouseup",i._onDrop),u(l,"touchend",i._onDrop),u(l,"touchcancel",i._onDrop),c&&this.nativeDraggable&&(this.options.touchStartThreshold=4,z.draggable=!0),K("delayStart",this,{evt:t}),!a.delay||a.delayOnTouchOnly&&!e||this.nativeDraggable&&(E||w))o();else{if(kt.eventCanceled)return void this._onDrop();u(l,"mouseup",i._disableDelayedDrag),u(l,"touchend",i._disableDelayedDrag),u(l,"touchcancel",i._disableDelayedDrag),u(l,"mousemove",i._delayedDragTouchMoveHandler),u(l,"touchmove",i._delayedDragTouchMoveHandler),a.supportPointer&&u(l,"pointermove",i._delayedDragTouchMoveHandler),i._dragStartTimer=setTimeout(o,a.delay)}}},_delayedDragTouchMoveHandler:function(t){var e=t.touches?t.touches[0]:t;Math.max(Math.abs(e.clientX-this._lastX),Math.abs(e.clientY-this._lastY))>=Math.floor(this.options.touchStartThreshold/(this.nativeDraggable&&window.devicePixelRatio||1))&&this._disableDelayedDrag()},_disableDelayedDrag:function(){z&&Xt(z),clearTimeout(this._dragStartTimer),this._disableDelayedDragEvents()},_disableDelayedDragEvents:function(){var t=this.el.ownerDocument;d(t,"mouseup",this._disableDelayedDrag),d(t,"touchend",this._disableDelayedDrag),d(t,"touchcancel",this._disableDelayedDrag),d(t,"mousemove",this._delayedDragTouchMoveHandler),d(t,"touchmove",this._delayedDragTouchMoveHandler),d(t,"pointermove",this._delayedDragTouchMoveHandler)},_triggerDragStart:function(t,e){e=e||"touch"==t.pointerType&&t,!this.nativeDraggable||e?this.options.supportPointer?u(document,"pointermove",this._onTouchMove):u(document,e?"touchmove":"mousemove",this._onTouchMove):(u(z,"dragend",this),u(q,"dragstart",this._onDragStart));try{document.selection?Ft(function(){document.selection.empty()}):window.getSelection().removeAllRanges()}catch(t){}},_dragStarted:function(t,e){if(vt=!1,q&&z){K("dragStarted",this,{evt:e}),this.nativeDraggable&&u(document,"dragover",Pt);var n=this.options;t||k(z,n.dragClass,!1),k(z,n.ghostClass,!0),kt.active=this,t&&this._appendGhost(),W({sortable:this,name:"start",originalEvent:e})}else this._nulling()},_emulateDragOver:function(){if(at){this._lastX=at.clientX,this._lastY=at.clientY,At();for(var t=document.elementFromPoint(at.clientX,at.clientY),e=t;t&&t.shadowRoot&&(t=t.shadowRoot.elementFromPoint(at.clientX,at.clientY))!==e;)e=t;if(z.parentNode[j]._isOutsideThisEl(t),e)do{if(e[j]){if(e[j]._onDragOver({clientX:at.clientX,clientY:at.clientY,target:t,rootEl:e})&&!this.options.dragoverBubble)break}t=e}while(e=e.parentNode);Nt()}},_onTouchMove:function(t){if(rt){var e=this.options,n=e.fallbackTolerance,o=e.fallbackOffset,i=t.touches?t.touches[0]:t,r=U&&v(U),a=U&&r&&r.a,l=U&&r&&r.d,s=_t&>&&b(gt),c=(i.clientX-rt.clientX+o.x)/(a||1)+(s?s[0]-Et[0]:0)/(a||1),u=(i.clientY-rt.clientY+o.y)/(l||1)+(s?s[1]-Et[1]:0)/(l||1);if(!kt.active&&!vt){if(n&&Math.max(Math.abs(i.clientX-this._lastX),Math.abs(i.clientY-this._lastY))o.right+10||t.clientX<=o.right&&t.clientY>o.bottom&&t.clientX>=o.left:t.clientX>o.right&&t.clientY>o.top||t.clientX<=o.right&&t.clientY>o.bottom+10}(n,a,this)&&!g.animated){if(g===z)return A(!1);if(g&&l===n.target&&(s=g),s&&(i=X(s)),!1!==Rt(q,l,z,o,s,i,n,!!s))return O(),l.appendChild(z),G=l,N(),A(!0)}else if(s.parentNode===l){i=X(s);var v,m,b,y=z.parentNode!==l,w=!function(t,e,n){var o=n?t.left:t.top,i=n?t.right:t.bottom,r=n?t.width:t.height,a=n?e.left:e.top,l=n?e.right:e.bottom,s=n?e.width:e.height;return o===a||i===l||o+r/2===a+s/2}(z.animated&&z.toRect||o,s.animated&&s.toRect||i,a),E=a?"top":"left",D=Y(s,"top","top")||Y(z,"top","top"),S=D?D.scrollTop:void 0;if(ht!==s&&(m=i[E],yt=!1,wt=!w&&e.invertSwap||y),0!==(v=function(t,e,n,o,i,r,a,l){var s=o?t.clientY:t.clientX,c=o?n.height:n.width,u=o?n.top:n.left,d=o?n.bottom:n.right,h=!1;if(!a)if(l&&pt * @author owenm * @license MIT @@ -126,7 +126,7 @@ function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); } -var version = "1.10.0-rc3"; +var version = "1.10.0"; function userAgent(pattern) { return !! @@ -244,15 +244,19 @@ function css(el, prop, val) { function matrix(el, selfOnly) { var appliedTransforms = ''; - do { - var transform = css(el, 'transform'); + if (typeof el === 'string') { + appliedTransforms = el; + } else { + do { + var transform = css(el, 'transform'); - if (transform && transform !== 'none') { - appliedTransforms = transform + ' ' + appliedTransforms; - } - /* jshint boss:true */ + if (transform && transform !== 'none') { + appliedTransforms = transform + ' ' + appliedTransforms; + } + /* jshint boss:true */ - } while (!selfOnly && (el = el.parentNode)); + } while (!selfOnly && (el = el.parentNode)); + } var matrixFn = window.DOMMatrix || window.WebKitCSSMatrix || window.CSSMatrix; /*jshint -W056 */ @@ -367,16 +371,15 @@ function getRect(el, relativeToContainingBlock, relativeToNonStaticParent, undoS /** * Checks if a side of an element is scrolled past a side of its parents * @param {HTMLElement} el The element who's side being scrolled out of view is in question - * @param {[DOMRect]} rect Optional rect of `el` to use * @param {String} elSide Side of the element in question ('top', 'left', 'right', 'bottom') * @param {String} parentSide Side of the parent in question ('top', 'left', 'right', 'bottom') * @return {HTMLElement} The parent scroll element that the el's side is scrolled past, or null if there is no such element */ -function isScrolledPast(el, rect, elSide, parentSide) { +function isScrolledPast(el, elSide, parentSide) { var parent = getParentAutoScrollElement(el, true), - elSideVal = (rect ? rect : getRect(el))[elSide]; + elSideVal = getRect(el)[elSide]; /* jshint boss:true */ while (parent) { @@ -629,7 +632,9 @@ function AnimationStateManager() { target: child, rect: getRect(child) }); - var fromRect = getRect(child); // If animating: compensate for current animation + + var fromRect = _objectSpread({}, animationStates[animationStates.length - 1].rect); // If animating: compensate for current animation + if (child.thisAnimationDuration) { var childMatrix = matrix(child, true); @@ -678,9 +683,7 @@ function AnimationStateManager() { toRect.left -= targetMatrix.e; } - target.toRect = toRect; // If element is scrolled out of view: Do not animate - - if ((isScrolledPast(target, toRect, 'bottom', 'top') || isScrolledPast(target, toRect, 'top', 'bottom') || isScrolledPast(target, toRect, 'right', 'left') || isScrolledPast(target, toRect, 'left', 'right')) && (isScrolledPast(target, animatingRect, 'bottom', 'top') || isScrolledPast(target, animatingRect, 'top', 'bottom') || isScrolledPast(target, animatingRect, 'right', 'left') || isScrolledPast(target, animatingRect, 'left', 'right')) && (isScrolledPast(target, fromRect, 'bottom', 'top') || isScrolledPast(target, fromRect, 'top', 'bottom') || isScrolledPast(target, fromRect, 'right', 'left') || isScrolledPast(target, fromRect, 'left', 'right'))) return; + target.toRect = toRect; if (target.thisAnimationDuration) { // Could also check if animatingRect is between fromRect and toRect @@ -700,7 +703,7 @@ function AnimationStateManager() { time = _this.options.animation; } - _this.animate(target, animatingRect, time); + _this.animate(target, animatingRect, toRect, time); } if (time) { @@ -729,16 +732,15 @@ function AnimationStateManager() { animationStates = []; }, - animate: function animate(target, prev, duration) { + animate: function animate(target, currentRect, toRect, duration) { if (duration) { css(target, 'transition', ''); css(target, 'transform', ''); - var currentRect = getRect(target), - elMatrix = matrix(this.el), + var elMatrix = matrix(this.el), scaleX = elMatrix && elMatrix.a, scaleY = elMatrix && elMatrix.d, - translateX = (prev.left - currentRect.left) / (scaleX || 1), - translateY = (prev.top - currentRect.top) / (scaleY || 1); + translateX = (currentRect.left - toRect.left) / (scaleX || 1), + translateY = (currentRect.top - toRect.top) / (scaleY || 1); target.animatingX = !!translateX; target.animatingY = !!translateY; css(target, 'transform', 'translate3d(' + translateX + 'px,' + translateY + 'px,0)'); @@ -786,12 +788,17 @@ var PluginManager = { var _this = this; this.eventCanceled = false; + + evt.cancel = function () { + _this.eventCanceled = true; + }; + var eventNameGlobal = eventName + 'Global'; plugins.forEach(function (plugin) { if (!sortable[plugin.pluginName]) return; // Fire global events if it exists in this sortable if (sortable[plugin.pluginName][eventNameGlobal]) { - _this.eventCanceled = !!sortable[plugin.pluginName][eventNameGlobal](_objectSpread({ + sortable[plugin.pluginName][eventNameGlobal](_objectSpread({ sortable: sortable }, evt)); } // Only fire plugin event if plugin is enabled in this sortable, @@ -799,21 +806,22 @@ var PluginManager = { if (sortable.options[plugin.pluginName] && sortable[plugin.pluginName][eventName]) { - _this.eventCanceled = _this.eventCanceled || !!sortable[plugin.pluginName][eventName](_objectSpread({ + sortable[plugin.pluginName][eventName](_objectSpread({ sortable: sortable }, evt)); } }); }, - initializePlugins: function initializePlugins(sortable, el, defaults) { + initializePlugins: function initializePlugins(sortable, el, defaults, options) { plugins.forEach(function (plugin) { var pluginName = plugin.pluginName; if (!sortable.options[pluginName] && !plugin.initializeByDefault) return; - var initialized = new plugin(sortable, el); + var initialized = new plugin(sortable, el, sortable.options); initialized.sortable = sortable; + initialized.options = sortable.options; sortable[pluginName] = initialized; // Add default options from plugin - _extends(defaults, initialized.options); + _extends(defaults, initialized.defaults); }); for (var option in sortable.options) { @@ -825,14 +833,14 @@ var PluginManager = { } } }, - getEventOptions: function getEventOptions(name, sortable) { - var eventOptions = {}; + getEventProperties: function getEventProperties(name, sortable) { + var eventProperties = {}; plugins.forEach(function (plugin) { - if (typeof plugin.eventOptions !== 'function') return; + if (typeof plugin.eventProperties !== 'function') return; - _extends(eventOptions, plugin.eventOptions.call(sortable, name)); + _extends(eventProperties, plugin.eventProperties.call(sortable[plugin.pluginName], name)); }); - return eventOptions; + return eventProperties; }, modifyOption: function modifyOption(sortable, name, value) { var modifiedValue; @@ -862,8 +870,9 @@ function dispatchEvent(_ref) { newDraggableIndex = _ref.newDraggableIndex, originalEvent = _ref.originalEvent, putSortable = _ref.putSortable, - eventOptions = _ref.eventOptions; - sortable = sortable || rootEl[expando]; + extraEventProperties = _ref.extraEventProperties; + sortable = sortable || rootEl && rootEl[expando]; + if (!sortable) return; var evt, options = sortable.options, onName = 'on' + name.charAt(0).toUpperCase() + name.substr(1); // Support for new CustomEvent feature @@ -889,10 +898,10 @@ function dispatchEvent(_ref) { evt.originalEvent = originalEvent; evt.pullMode = putSortable ? putSortable.lastPutMode : undefined; - var allEventOptions = _objectSpread({}, eventOptions, PluginManager.getEventOptions(name, sortable)); + var allEventProperties = _objectSpread({}, extraEventProperties, PluginManager.getEventProperties(name, sortable)); - for (var option in allEventOptions) { - evt[option] = allEventOptions[option]; + for (var option in allEventProperties) { + evt[option] = allEventProperties[option]; } if (rootEl) { @@ -980,6 +989,10 @@ var dragEl, sortables = [], tapEvt, touchEvt, + lastDx, + lastDy, + tapDistanceLeft, + tapDistanceTop, moved, lastTarget, lastDirection, @@ -1026,7 +1039,7 @@ supportDraggable = !ChromeForAndroid && !IOS && 'draggable' in document.createEl return elCSS.gridTemplateColumns.split(' ').length <= 1 ? 'vertical' : 'horizontal'; } - if (child1 && firstChildCSS["float"] !== 'none') { + if (child1 && firstChildCSS["float"] && firstChildCSS["float"] !== 'none') { var touchingSideChild2 = firstChildCSS["float"] === 'left' ? 'left' : 'right'; return child2 && (secondChildCSS.clear === 'both' || secondChildCSS.clear === touchingSideChild2) ? 'vertical' : 'horizontal'; } @@ -1280,7 +1293,7 @@ Sortable.prototype = options = this.options, preventOnFilter = options.preventOnFilter, type = evt.type, - touch = evt.touches && evt.touches[0], + touch = evt.touches && evt.touches[0] || evt.pointerType && evt.pointerType === 'touch' && evt, target = (touch || evt).target, originalTarget = evt.target.shadowRoot && (evt.path && evt.path[0] || evt.composedPath && evt.composedPath()[0]) || target, filter = options.filter; @@ -1381,6 +1394,7 @@ Sortable.prototype = dragStartFn; if (target && !dragEl && target.parentNode === el) { + var dragRect = getRect(target); rootEl = el; dragEl = target; parentEl = dragEl.parentNode; @@ -1393,6 +1407,8 @@ Sortable.prototype = clientX: (touch || evt).clientX, clientY: (touch || evt).clientY }; + tapDistanceLeft = tapEvt.clientX - dragRect.left; + tapDistanceTop = tapEvt.clientY - dragRect.top; this._lastX = (touch || evt).clientX; this._lastY = (touch || evt).clientY; dragEl.style['will-change'] = 'all'; @@ -1612,8 +1628,7 @@ Sortable.prototype = scaleY = ghostEl && ghostMatrix && ghostMatrix.d, relativeScrollOffset = PositionGhostAbsolutely && ghostRelativeParent && getRelativeScrollOffset(ghostRelativeParent), dx = (touch.clientX - tapEvt.clientX + fallbackOffset.x) / (scaleX || 1) + (relativeScrollOffset ? relativeScrollOffset[0] - ghostRelativeParentInitialScroll[0] : 0) / (scaleX || 1), - dy = (touch.clientY - tapEvt.clientY + fallbackOffset.y) / (scaleY || 1) + (relativeScrollOffset ? relativeScrollOffset[1] - ghostRelativeParentInitialScroll[1] : 0) / (scaleY || 1), - translate3d = evt.touches ? 'translate3d(' + dx + 'px,' + dy + 'px,0)' : 'translate(' + dx + 'px,' + dy + 'px)'; // only set the status to dragging, when we are actually dragging + dy = (touch.clientY - tapEvt.clientY + fallbackOffset.y) / (scaleY || 1) + (relativeScrollOffset ? relativeScrollOffset[1] - ghostRelativeParentInitialScroll[1] : 0) / (scaleY || 1); // only set the status to dragging, when we are actually dragging if (!Sortable.active && !awaitingDragStarted) { if (fallbackTolerance && Math.max(Math.abs(touch.clientX - this._lastX), Math.abs(touch.clientY - this._lastY)) < fallbackTolerance) { @@ -1623,11 +1638,31 @@ Sortable.prototype = this._onDragStart(evt, true); } - touchEvt = touch; - css(ghostEl, 'webkitTransform', translate3d); - css(ghostEl, 'mozTransform', translate3d); - css(ghostEl, 'msTransform', translate3d); - css(ghostEl, 'transform', translate3d); + if (ghostEl) { + if (ghostMatrix) { + ghostMatrix.e += dx - (lastDx || 0); + ghostMatrix.f += dy - (lastDy || 0); + } else { + ghostMatrix = { + a: 1, + b: 0, + c: 0, + d: 1, + e: dx, + f: dy + }; + } + + var cssMatrix = "matrix(".concat(ghostMatrix.a, ",").concat(ghostMatrix.b, ",").concat(ghostMatrix.c, ",").concat(ghostMatrix.d, ",").concat(ghostMatrix.e, ",").concat(ghostMatrix.f, ")"); + css(ghostEl, 'webkitTransform', cssMatrix); + css(ghostEl, 'mozTransform', cssMatrix); + css(ghostEl, 'msTransform', cssMatrix); + css(ghostEl, 'transform', cssMatrix); + lastDx = dx; + lastDy = dy; + touchEvt = touch; + } + evt.cancelable && evt.preventDefault(); } }, @@ -1675,7 +1710,9 @@ Sortable.prototype = css(ghostEl, 'zIndex', '100000'); css(ghostEl, 'pointerEvents', 'none'); Sortable.ghost = ghostEl; - container.appendChild(ghostEl); + container.appendChild(ghostEl); // Set transform-origin + + css(ghostEl, 'transform-origin', tapDistanceLeft / parseInt(ghostEl.style.width) * 100 + '% ' + tapDistanceTop / parseInt(ghostEl.style.height) * 100 + '%'); } }, _onDragStart: function _onDragStart( @@ -1954,7 +1991,7 @@ Sortable.prototype = differentLevel = dragEl.parentNode !== el, differentRowCol = !_dragElInRowColumn(dragEl.animated && dragEl.toRect || dragRect, target.animated && target.toRect || targetRect, vertical), side1 = vertical ? 'top' : 'left', - scrolledPastTop = isScrolledPast(target, null, 'top', 'top') || isScrolledPast(dragEl, null, 'top', 'top'), + scrolledPastTop = isScrolledPast(target, 'top', 'top') || isScrolledPast(dragEl, 'top', 'top'), scrollBefore = scrolledPastTop ? scrolledPastTop.scrollTop : void 0; if (lastTarget !== target) { @@ -2055,7 +2092,8 @@ Sortable.prototype = newDraggableIndex = index(dragEl, options.draggable); pluginEvent('drop', this, { evt: evt - }); // Get again after plugin event + }); + parentEl = dragEl && dragEl.parentNode; // Get again after plugin event newIndex = index(dragEl); newDraggableIndex = index(dragEl, options.draggable); @@ -2214,7 +2252,7 @@ Sortable.prototype = savedInputChecked.forEach(function (el) { el.checked = true; }); - savedInputChecked.length = 0; + savedInputChecked.length = lastDx = lastDy = 0; }, handleEvent: function handleEvent( /**Event*/ @@ -2390,7 +2428,7 @@ Sortable.prototype = } if (this.options.group.revertClone) { - this._animate(dragEl, cloneEl); + this.animate(dragEl, cloneEl); } css(cloneEl, 'display', ''); @@ -2542,8 +2580,8 @@ function _saveInputCheckedState(root) { var idx = inputs.length; while (idx--) { - var _el = inputs[idx]; - _el.checked && savedInputChecked.push(_el); + var el = inputs[idx]; + el.checked && savedInputChecked.push(el); } } @@ -2581,11 +2619,21 @@ Sortable.utils = { detectDirection: _detectDirection, getChild: getChild }; +/** + * Get the Sortable instance of an element + * @param {HTMLElement} element The element + * @return {Sortable|undefined} The instance of Sortable + */ + +Sortable.get = function (element) { + return element[expando]; +}; /** * Mount a plugin to Sortable * @param {...SortablePlugin|SortablePlugin[]} plugins Plugins being mounted */ + Sortable.mount = function () { for (var _len = arguments.length, plugins = new Array(_len), _key = 0; _key < _len; _key++) { plugins[_key] = arguments[_key]; @@ -2594,7 +2642,7 @@ Sortable.mount = function () { if (plugins[0].constructor === Array) plugins = plugins[0]; plugins.forEach(function (plugin) { if (!plugin.prototype || !plugin.prototype.constructor) { - throw "Sortable: Mounted plugin must be a constructor function, not ".concat({}.toString.call(el)); + throw "Sortable: Mounted plugin must be a constructor function, not ".concat({}.toString.call(plugin)); } if (plugin.utils) Sortable.utils = _objectSpread({}, Sortable.utils, plugin.utils); @@ -2626,7 +2674,7 @@ var autoScrolls = [], function AutoScrollPlugin() { function AutoScroll() { - this.options = { + this.defaults = { scroll: true, scrollSensitivity: 30, scrollSpeed: 10, @@ -2647,7 +2695,7 @@ function AutoScrollPlugin() { if (this.sortable.nativeDraggable) { on(document, 'dragover', this._handleAutoScroll); } else { - if (this.sortable.options.supportPointer) { + if (this.options.supportPointer) { on(document, 'pointermove', this._handleFallbackAutoScroll); } else if (originalEvent.touches) { on(document, 'touchmove', this._handleFallbackAutoScroll); @@ -2660,7 +2708,7 @@ function AutoScrollPlugin() { var originalEvent = _ref2.originalEvent; // For when bubbling is canceled and using fallback (fallback 'touchmove' always reached) - if (!this.sortable.options.dragOverBubble && !originalEvent.rootEl) { + if (!this.options.dragOverBubble && !originalEvent.rootEl) { this._handleAutoScroll(originalEvent); } }, @@ -2687,8 +2735,8 @@ function AutoScrollPlugin() { _handleAutoScroll: function _handleAutoScroll(evt, fallback) { var _this = this; - var x = evt.clientX, - y = evt.clientY, + var x = (evt.touches ? evt.touches[0] : evt).clientX, + y = (evt.touches ? evt.touches[0] : evt).clientY, elem = document.elementFromPoint(x, y); touchEvt$1 = evt; // IE does not seem to have native autoscroll, // Edge's autoscroll seems too conditional, @@ -2718,7 +2766,7 @@ function AutoScrollPlugin() { } } else { // if DnD is enabled (and browser has good autoscrolling), first autoscroll will already scroll, so get parent autoscroll of first autoscroll - if (!this.sortable.options.bubbleScroll || getParentAutoScrollElement(elem, true) === getWindowScrollingElement()) { + if (!this.options.bubbleScroll || getParentAutoScrollElement(elem, true) === getWindowScrollingElement()) { clearAutoScrolls(); return; } @@ -2747,7 +2795,9 @@ function clearPointerElemChangedInterval() { var autoScroll = throttle(function (evt, options, rootEl, isFallback) { // Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=505521 if (!options.scroll) return; - var sens = options.scrollSensitivity, + var x = (evt.touches ? evt.touches[0] : evt).clientX, + y = (evt.touches ? evt.touches[0] : evt).clientY, + sens = options.scrollSensitivity, speed = options.scrollSpeed, winScroller = getWindowScrollingElement(); var scrollThisInstance = false, @@ -2792,8 +2842,8 @@ var autoScroll = throttle(function (evt, options, rootEl, isFallback) { canScrollY = height < scrollHeight && (elCSS.overflowY === 'auto' || elCSS.overflowY === 'scroll'); } - var vx = canScrollX && (Math.abs(right - evt.clientX) <= sens && scrollPosX + width < scrollWidth) - (Math.abs(left - evt.clientX) <= sens && !!scrollPosX); - var vy = canScrollY && (Math.abs(bottom - evt.clientY) <= sens && scrollPosY + height < scrollHeight) - (Math.abs(top - evt.clientY) <= sens && !!scrollPosY); + var vx = canScrollX && (Math.abs(right - x) <= sens && scrollPosX + width < scrollWidth) - (Math.abs(left - x) <= sens && !!scrollPosX); + var vy = canScrollY && (Math.abs(bottom - y) <= sens && scrollPosY + height < scrollHeight) - (Math.abs(top - y) <= sens && !!scrollPosY); if (!autoScrolls[layersOut]) { for (var i = 0; i <= layersOut; i++) { @@ -2852,12 +2902,16 @@ var drop = function drop(_ref) { unhideGhostForTarget = _ref.unhideGhostForTarget; var toSortable = putSortable || activeSortable; hideGhostForTarget(); - var target = document.elementFromPoint(originalEvent.clientX, originalEvent.clientY); + var touch = originalEvent.changedTouches && originalEvent.changedTouches.length ? originalEvent.changedTouches[0] : originalEvent; + var target = document.elementFromPoint(touch.clientX, touch.clientY); unhideGhostForTarget(); if (toSortable && !toSortable.el.contains(target)) { dispatchSortableEvent('spill'); - this.onSpill(dragEl); + this.onSpill({ + dragEl: dragEl, + putSortable: putSortable + }); } }; @@ -2869,9 +2923,16 @@ Revert.prototype = { var oldDraggableIndex = _ref2.oldDraggableIndex; this.startIndex = oldDraggableIndex; }, - onSpill: function onSpill(dragEl) { + onSpill: function onSpill(_ref3) { + var dragEl = _ref3.dragEl, + putSortable = _ref3.putSortable; this.sortable.captureAnimationState(); - var nextSibling = getChild(this.sortable.el, this.startIndex, this.sortable.options); + + if (putSortable) { + putSortable.captureAnimationState(); + } + + var nextSibling = getChild(this.sortable.el, this.startIndex, this.options); if (nextSibling) { this.sortable.el.insertBefore(dragEl, nextSibling); @@ -2880,6 +2941,10 @@ Revert.prototype = { } this.sortable.animateAll(); + + if (putSortable) { + putSortable.animateAll(); + } }, drop: drop }; @@ -2891,10 +2956,13 @@ _extends(Revert, { function Remove() {} Remove.prototype = { - onSpill: function onSpill(dragEl) { - this.sortable.captureAnimationState(); + onSpill: function onSpill(_ref4) { + var dragEl = _ref4.dragEl, + putSortable = _ref4.putSortable; + var parentSortable = putSortable || this.sortable; + parentSortable.captureAnimationState(); dragEl.parentNode && dragEl.parentNode.removeChild(dragEl); - this.sortable.animateAll(); + parentSortable.animateAll(); }, drop: drop }; @@ -2907,7 +2975,7 @@ var lastSwapEl; function SwapPlugin() { function Swap() { - this.options = { + this.defaults = { swapClass: 'sortable-swap-highlight' }; } @@ -2922,10 +2990,11 @@ function SwapPlugin() { target = _ref2.target, onMove = _ref2.onMove, activeSortable = _ref2.activeSortable, - changed = _ref2.changed; + changed = _ref2.changed, + cancel = _ref2.cancel; if (!activeSortable.options.swap) return; var el = this.sortable.el, - options = this.sortable.options; + options = this.options; if (target && target !== el) { var prevSwapEl = lastSwapEl; @@ -2943,14 +3012,15 @@ function SwapPlugin() { } changed(); - return completed(true); + completed(true); + cancel(); }, drop: function drop(_ref3) { var activeSortable = _ref3.activeSortable, putSortable = _ref3.putSortable, dragEl = _ref3.dragEl; var toSortable = putSortable || this.sortable; - var options = this.sortable.options; + var options = this.options; lastSwapEl && toggleClass(lastSwapEl, options.swapClass, false); if (lastSwapEl && (options.swap || putSortable && putSortable.options.swap)) { @@ -2969,7 +3039,7 @@ function SwapPlugin() { }; return _extends(Swap, { pluginName: 'swap', - eventOptions: function eventOptions() { + eventProperties: function eventProperties() { return { swapItem: lastSwapEl }; @@ -3026,7 +3096,7 @@ function MultiDragPlugin() { on(document, 'keydown', this._checkKeyDown); on(document, 'keyup', this._checkKeyUp); - this.options = { + this.defaults = { selectedClass: 'sortable-selected', multiDragKey: null, setData: function setData(dataTransfer, dragEl) { @@ -3056,39 +3126,42 @@ function MultiDragPlugin() { this.isMultiDrag = ~multiDragElements.indexOf(dragEl$1); }, setupClone: function setupClone(_ref2) { - var sortable = _ref2.sortable; + var sortable = _ref2.sortable, + cancel = _ref2.cancel; if (!this.isMultiDrag) return; - for (var _i = 0; _i < multiDragElements.length; _i++) { - multiDragClones.push(clone(multiDragElements[_i])); - multiDragClones[_i].sortableIndex = multiDragElements[_i].sortableIndex; - multiDragClones[_i].draggable = false; - multiDragClones[_i].style['will-change'] = ''; - toggleClass(multiDragClones[_i], sortable.options.selectedClass, false); - multiDragElements[_i] === dragEl$1 && toggleClass(multiDragClones[_i], sortable.options.chosenClass, false); + for (var i = 0; i < multiDragElements.length; i++) { + multiDragClones.push(clone(multiDragElements[i])); + multiDragClones[i].sortableIndex = multiDragElements[i].sortableIndex; + multiDragClones[i].draggable = false; + multiDragClones[i].style['will-change'] = ''; + toggleClass(multiDragClones[i], this.options.selectedClass, false); + multiDragElements[i] === dragEl$1 && toggleClass(multiDragClones[i], this.options.chosenClass, false); } sortable._hideClone(); - return true; + cancel(); }, clone: function clone(_ref3) { var sortable = _ref3.sortable, rootEl = _ref3.rootEl, - dispatchSortableEvent = _ref3.dispatchSortableEvent; + dispatchSortableEvent = _ref3.dispatchSortableEvent, + cancel = _ref3.cancel; if (!this.isMultiDrag) return; - if (!sortable.options.removeCloneOnHide) { + if (!this.options.removeCloneOnHide) { if (multiDragElements.length && multiDragSortable === sortable) { insertMultiDragClones(true, rootEl); dispatchSortableEvent('clone'); - return true; + cancel(); } } }, showClone: function showClone(_ref4) { var cloneNowShown = _ref4.cloneNowShown, - rootEl = _ref4.rootEl; + rootEl = _ref4.rootEl, + cancel = _ref4.cancel; if (!this.isMultiDrag) return; insertMultiDragClones(false, rootEl); multiDragClones.forEach(function (clone) { @@ -3096,22 +3169,25 @@ function MultiDragPlugin() { }); cloneNowShown(); clonesHidden = false; - return true; + cancel(); }, hideClone: function hideClone(_ref5) { + var _this = this; + var sortable = _ref5.sortable, - cloneNowHidden = _ref5.cloneNowHidden; + cloneNowHidden = _ref5.cloneNowHidden, + cancel = _ref5.cancel; if (!this.isMultiDrag) return; multiDragClones.forEach(function (clone) { css(clone, 'display', 'none'); - if (sortable.options.removeCloneOnHide && clone.parentNode) { + if (_this.options.removeCloneOnHide && clone.parentNode) { clone.parentNode.removeChild(clone); } }); cloneNowHidden(); clonesHidden = true; - return true; + cancel(); }, dragStartGlobal: function dragStartGlobal(_ref6) { var sortable = _ref6.sortable; @@ -3130,10 +3206,12 @@ function MultiDragPlugin() { dragStarted = true; }, dragStarted: function dragStarted(_ref7) { + var _this2 = this; + var sortable = _ref7.sortable; if (!this.isMultiDrag) return; - if (sortable.options.sort) { + if (this.options.sort) { // Capture rects, // hide multi drag elements (by positioning them absolute), // set multi drag elements rects to dragRect, @@ -3142,7 +3220,7 @@ function MultiDragPlugin() { // unset rects & remove from DOM sortable.captureAnimationState(); - if (sortable.options.animation) { + if (this.options.animation) { multiDragElements.forEach(function (multiDragElement) { if (multiDragElement === dragEl$1) return; css(multiDragElement, 'position', 'absolute'); @@ -3161,24 +3239,26 @@ function MultiDragPlugin() { folding = false; initialFolding = false; - if (sortable.options.animation) { + if (_this2.options.animation) { multiDragElements.forEach(function (multiDragElement) { unsetRect(multiDragElement); }); } // Remove all auxiliary multidrag items from el, if sorting enabled - if (sortable.options.sort) { + if (_this2.options.sort) { removeMultiDragElements(); } }); }, dragOver: function dragOver(_ref8) { var target = _ref8.target, - completed = _ref8.completed; + completed = _ref8.completed, + cancel = _ref8.cancel; if (folding && ~multiDragElements.indexOf(target)) { - return completed(false); + completed(false); + cancel(); } }, revert: function revert(_ref9) { @@ -3199,7 +3279,7 @@ function MultiDragPlugin() { fromSortable.removeAnimationState(multiDragElement); }); folding = false; - insertMultiDragElements(!sortable.options.removeCloneOnHide, rootEl); + insertMultiDragElements(!this.options.removeCloneOnHide, rootEl); } }, dragOverCompleted: function dragOverCompleted(_ref10) { @@ -3209,7 +3289,7 @@ function MultiDragPlugin() { activeSortable = _ref10.activeSortable, parentEl = _ref10.parentEl, putSortable = _ref10.putSortable; - var options = sortable.options; + var options = this.options; if (insertion) { // Clones must be hidden before folding animation to capture dragRectAbsolute properly @@ -3292,7 +3372,7 @@ function MultiDragPlugin() { putSortable = _ref12.putSortable; var toSortable = putSortable || this.sortable; if (!evt) return; - var options = sortable.options, + var options = this.options, children = parentEl.children; // Multi-drag selection if (!dragStarted) { @@ -3312,32 +3392,32 @@ function MultiDragPlugin() { originalEvt: evt }); // Modifier activated, select from last to dragEl - if ((!options.multiDragKey || this.multiDragKeyDown) && evt.shiftKey && lastMultiDragSelect && sortable.el.contains(lastMultiDragSelect)) { + if (evt.shiftKey && lastMultiDragSelect && sortable.el.contains(lastMultiDragSelect)) { var lastIndex = index(lastMultiDragSelect), currentIndex = index(dragEl$1); if (~lastIndex && ~currentIndex && lastIndex !== currentIndex) { // Must include lastMultiDragSelect (select it), in case modified selection from no selection // (but previous selection existed) - var n, _i2; + var n, i; if (currentIndex > lastIndex) { - _i2 = lastIndex; + i = lastIndex; n = currentIndex; } else { - _i2 = currentIndex; + i = currentIndex; n = lastIndex + 1; } - for (; _i2 < n; _i2++) { - if (~multiDragElements.indexOf(children[_i2])) continue; - toggleClass(children[_i2], options.selectedClass, true); - multiDragElements.push(children[_i2]); + for (; i < n; i++) { + if (~multiDragElements.indexOf(children[i])) continue; + toggleClass(children[i], options.selectedClass, true); + multiDragElements.push(children[i]); dispatchEvent({ sortable: sortable, rootEl: rootEl, name: 'select', - targetEl: children[_i2], + targetEl: children[i], originalEvt: evt }); } @@ -3438,7 +3518,7 @@ function MultiDragPlugin() { this.isMultiDrag = dragStarted = false; multiDragClones.length = 0; }, - destroy: function destroy() { + destroyGlobal: function destroyGlobal() { this._deselectMultiDrag(); off(document, 'pointerup', this._deselectMultiDrag); @@ -3452,13 +3532,13 @@ function MultiDragPlugin() { if (multiDragSortable !== this.sortable) return; // Only deselect if target is not item in this sortable - if (evt && closest(evt.target, this.sortable.options.draggable, this.sortable.el, false)) return; // Only deselect if left click + if (evt && closest(evt.target, this.options.draggable, this.sortable.el, false)) return; // Only deselect if left click if (evt && evt.button !== 0) return; while (multiDragElements.length) { var el = multiDragElements[0]; - toggleClass(el, this.sortable.options.selectedClass, false); + toggleClass(el, this.options.selectedClass, false); multiDragElements.shift(); dispatchEvent({ sortable: this.sortable, @@ -3470,12 +3550,12 @@ function MultiDragPlugin() { } }, _checkKeyDown: function _checkKeyDown(evt) { - if (evt.key === this.sortable.options.multiDragKey) { + if (evt.key === this.options.multiDragKey) { this.multiDragKeyDown = true; } }, _checkKeyUp: function _checkKeyUp(evt) { - if (evt.key === this.sortable.options.multiDragKey) { + if (evt.key === this.options.multiDragKey) { this.multiDragKeyDown = false; } } @@ -3514,8 +3594,8 @@ function MultiDragPlugin() { multiDragElements.splice(index, 1); } }, - eventOptions: function eventOptions() { - var _this = this; + eventProperties: function eventProperties() { + var _this3 = this; var oldIndicies = [], newIndicies = []; @@ -3530,7 +3610,7 @@ function MultiDragPlugin() { if (folding && multiDragElement !== dragEl$1) { newIndex = -1; } else if (folding) { - newIndex = index(multiDragElement, ':not(.' + _this.options.selectedClass + ')'); + newIndex = index(multiDragElement, ':not(.' + _this3.options.selectedClass + ')'); } else { newIndex = index(multiDragElement); } @@ -3564,7 +3644,7 @@ function MultiDragPlugin() { } function insertMultiDragElements(clonesInserted, rootEl) { - multiDragElements.forEach(function (multiDragElement) { + multiDragElements.forEach(function (multiDragElement, i) { var target = rootEl.children[multiDragElement.sortableIndex + (clonesInserted ? Number(i) : 0)]; if (target) { @@ -3582,7 +3662,7 @@ function insertMultiDragElements(clonesInserted, rootEl) { function insertMultiDragClones(elementsInserted, rootEl) { - multiDragClones.forEach(function (clone) { + multiDragClones.forEach(function (clone, i) { var target = rootEl.children[clone.sortableIndex + (elementsInserted ? Number(i) : 0)]; if (target) { diff --git a/modular/sortable.core.esm.js b/modular/sortable.core.esm.js index 1345a108f..fd4b551c0 100644 --- a/modular/sortable.core.esm.js +++ b/modular/sortable.core.esm.js @@ -1,5 +1,5 @@ /**! - * Sortable 1.10.0-rc3 + * Sortable 1.10.0 * @author RubaXa * @author owenm * @license MIT @@ -126,7 +126,7 @@ function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); } -var version = "1.10.0-rc3"; +var version = "1.10.0"; function userAgent(pattern) { return !! @@ -244,15 +244,19 @@ function css(el, prop, val) { function matrix(el, selfOnly) { var appliedTransforms = ''; - do { - var transform = css(el, 'transform'); + if (typeof el === 'string') { + appliedTransforms = el; + } else { + do { + var transform = css(el, 'transform'); - if (transform && transform !== 'none') { - appliedTransforms = transform + ' ' + appliedTransforms; - } - /* jshint boss:true */ + if (transform && transform !== 'none') { + appliedTransforms = transform + ' ' + appliedTransforms; + } + /* jshint boss:true */ - } while (!selfOnly && (el = el.parentNode)); + } while (!selfOnly && (el = el.parentNode)); + } var matrixFn = window.DOMMatrix || window.WebKitCSSMatrix || window.CSSMatrix; /*jshint -W056 */ @@ -367,16 +371,15 @@ function getRect(el, relativeToContainingBlock, relativeToNonStaticParent, undoS /** * Checks if a side of an element is scrolled past a side of its parents * @param {HTMLElement} el The element who's side being scrolled out of view is in question - * @param {[DOMRect]} rect Optional rect of `el` to use * @param {String} elSide Side of the element in question ('top', 'left', 'right', 'bottom') * @param {String} parentSide Side of the parent in question ('top', 'left', 'right', 'bottom') * @return {HTMLElement} The parent scroll element that the el's side is scrolled past, or null if there is no such element */ -function isScrolledPast(el, rect, elSide, parentSide) { +function isScrolledPast(el, elSide, parentSide) { var parent = getParentAutoScrollElement(el, true), - elSideVal = (rect ? rect : getRect(el))[elSide]; + elSideVal = getRect(el)[elSide]; /* jshint boss:true */ while (parent) { @@ -629,7 +632,9 @@ function AnimationStateManager() { target: child, rect: getRect(child) }); - var fromRect = getRect(child); // If animating: compensate for current animation + + var fromRect = _objectSpread({}, animationStates[animationStates.length - 1].rect); // If animating: compensate for current animation + if (child.thisAnimationDuration) { var childMatrix = matrix(child, true); @@ -678,9 +683,7 @@ function AnimationStateManager() { toRect.left -= targetMatrix.e; } - target.toRect = toRect; // If element is scrolled out of view: Do not animate - - if ((isScrolledPast(target, toRect, 'bottom', 'top') || isScrolledPast(target, toRect, 'top', 'bottom') || isScrolledPast(target, toRect, 'right', 'left') || isScrolledPast(target, toRect, 'left', 'right')) && (isScrolledPast(target, animatingRect, 'bottom', 'top') || isScrolledPast(target, animatingRect, 'top', 'bottom') || isScrolledPast(target, animatingRect, 'right', 'left') || isScrolledPast(target, animatingRect, 'left', 'right')) && (isScrolledPast(target, fromRect, 'bottom', 'top') || isScrolledPast(target, fromRect, 'top', 'bottom') || isScrolledPast(target, fromRect, 'right', 'left') || isScrolledPast(target, fromRect, 'left', 'right'))) return; + target.toRect = toRect; if (target.thisAnimationDuration) { // Could also check if animatingRect is between fromRect and toRect @@ -700,7 +703,7 @@ function AnimationStateManager() { time = _this.options.animation; } - _this.animate(target, animatingRect, time); + _this.animate(target, animatingRect, toRect, time); } if (time) { @@ -729,16 +732,15 @@ function AnimationStateManager() { animationStates = []; }, - animate: function animate(target, prev, duration) { + animate: function animate(target, currentRect, toRect, duration) { if (duration) { css(target, 'transition', ''); css(target, 'transform', ''); - var currentRect = getRect(target), - elMatrix = matrix(this.el), + var elMatrix = matrix(this.el), scaleX = elMatrix && elMatrix.a, scaleY = elMatrix && elMatrix.d, - translateX = (prev.left - currentRect.left) / (scaleX || 1), - translateY = (prev.top - currentRect.top) / (scaleY || 1); + translateX = (currentRect.left - toRect.left) / (scaleX || 1), + translateY = (currentRect.top - toRect.top) / (scaleY || 1); target.animatingX = !!translateX; target.animatingY = !!translateY; css(target, 'transform', 'translate3d(' + translateX + 'px,' + translateY + 'px,0)'); @@ -786,12 +788,17 @@ var PluginManager = { var _this = this; this.eventCanceled = false; + + evt.cancel = function () { + _this.eventCanceled = true; + }; + var eventNameGlobal = eventName + 'Global'; plugins.forEach(function (plugin) { if (!sortable[plugin.pluginName]) return; // Fire global events if it exists in this sortable if (sortable[plugin.pluginName][eventNameGlobal]) { - _this.eventCanceled = !!sortable[plugin.pluginName][eventNameGlobal](_objectSpread({ + sortable[plugin.pluginName][eventNameGlobal](_objectSpread({ sortable: sortable }, evt)); } // Only fire plugin event if plugin is enabled in this sortable, @@ -799,21 +806,22 @@ var PluginManager = { if (sortable.options[plugin.pluginName] && sortable[plugin.pluginName][eventName]) { - _this.eventCanceled = _this.eventCanceled || !!sortable[plugin.pluginName][eventName](_objectSpread({ + sortable[plugin.pluginName][eventName](_objectSpread({ sortable: sortable }, evt)); } }); }, - initializePlugins: function initializePlugins(sortable, el, defaults) { + initializePlugins: function initializePlugins(sortable, el, defaults, options) { plugins.forEach(function (plugin) { var pluginName = plugin.pluginName; if (!sortable.options[pluginName] && !plugin.initializeByDefault) return; - var initialized = new plugin(sortable, el); + var initialized = new plugin(sortable, el, sortable.options); initialized.sortable = sortable; + initialized.options = sortable.options; sortable[pluginName] = initialized; // Add default options from plugin - _extends(defaults, initialized.options); + _extends(defaults, initialized.defaults); }); for (var option in sortable.options) { @@ -825,14 +833,14 @@ var PluginManager = { } } }, - getEventOptions: function getEventOptions(name, sortable) { - var eventOptions = {}; + getEventProperties: function getEventProperties(name, sortable) { + var eventProperties = {}; plugins.forEach(function (plugin) { - if (typeof plugin.eventOptions !== 'function') return; + if (typeof plugin.eventProperties !== 'function') return; - _extends(eventOptions, plugin.eventOptions.call(sortable, name)); + _extends(eventProperties, plugin.eventProperties.call(sortable[plugin.pluginName], name)); }); - return eventOptions; + return eventProperties; }, modifyOption: function modifyOption(sortable, name, value) { var modifiedValue; @@ -862,8 +870,9 @@ function dispatchEvent(_ref) { newDraggableIndex = _ref.newDraggableIndex, originalEvent = _ref.originalEvent, putSortable = _ref.putSortable, - eventOptions = _ref.eventOptions; - sortable = sortable || rootEl[expando]; + extraEventProperties = _ref.extraEventProperties; + sortable = sortable || rootEl && rootEl[expando]; + if (!sortable) return; var evt, options = sortable.options, onName = 'on' + name.charAt(0).toUpperCase() + name.substr(1); // Support for new CustomEvent feature @@ -889,10 +898,10 @@ function dispatchEvent(_ref) { evt.originalEvent = originalEvent; evt.pullMode = putSortable ? putSortable.lastPutMode : undefined; - var allEventOptions = _objectSpread({}, eventOptions, PluginManager.getEventOptions(name, sortable)); + var allEventProperties = _objectSpread({}, extraEventProperties, PluginManager.getEventProperties(name, sortable)); - for (var option in allEventOptions) { - evt[option] = allEventOptions[option]; + for (var option in allEventProperties) { + evt[option] = allEventProperties[option]; } if (rootEl) { @@ -980,6 +989,10 @@ var dragEl, sortables = [], tapEvt, touchEvt, + lastDx, + lastDy, + tapDistanceLeft, + tapDistanceTop, moved, lastTarget, lastDirection, @@ -1026,7 +1039,7 @@ supportDraggable = !ChromeForAndroid && !IOS && 'draggable' in document.createEl return elCSS.gridTemplateColumns.split(' ').length <= 1 ? 'vertical' : 'horizontal'; } - if (child1 && firstChildCSS["float"] !== 'none') { + if (child1 && firstChildCSS["float"] && firstChildCSS["float"] !== 'none') { var touchingSideChild2 = firstChildCSS["float"] === 'left' ? 'left' : 'right'; return child2 && (secondChildCSS.clear === 'both' || secondChildCSS.clear === touchingSideChild2) ? 'vertical' : 'horizontal'; } @@ -1280,7 +1293,7 @@ Sortable.prototype = options = this.options, preventOnFilter = options.preventOnFilter, type = evt.type, - touch = evt.touches && evt.touches[0], + touch = evt.touches && evt.touches[0] || evt.pointerType && evt.pointerType === 'touch' && evt, target = (touch || evt).target, originalTarget = evt.target.shadowRoot && (evt.path && evt.path[0] || evt.composedPath && evt.composedPath()[0]) || target, filter = options.filter; @@ -1381,6 +1394,7 @@ Sortable.prototype = dragStartFn; if (target && !dragEl && target.parentNode === el) { + var dragRect = getRect(target); rootEl = el; dragEl = target; parentEl = dragEl.parentNode; @@ -1393,6 +1407,8 @@ Sortable.prototype = clientX: (touch || evt).clientX, clientY: (touch || evt).clientY }; + tapDistanceLeft = tapEvt.clientX - dragRect.left; + tapDistanceTop = tapEvt.clientY - dragRect.top; this._lastX = (touch || evt).clientX; this._lastY = (touch || evt).clientY; dragEl.style['will-change'] = 'all'; @@ -1612,8 +1628,7 @@ Sortable.prototype = scaleY = ghostEl && ghostMatrix && ghostMatrix.d, relativeScrollOffset = PositionGhostAbsolutely && ghostRelativeParent && getRelativeScrollOffset(ghostRelativeParent), dx = (touch.clientX - tapEvt.clientX + fallbackOffset.x) / (scaleX || 1) + (relativeScrollOffset ? relativeScrollOffset[0] - ghostRelativeParentInitialScroll[0] : 0) / (scaleX || 1), - dy = (touch.clientY - tapEvt.clientY + fallbackOffset.y) / (scaleY || 1) + (relativeScrollOffset ? relativeScrollOffset[1] - ghostRelativeParentInitialScroll[1] : 0) / (scaleY || 1), - translate3d = evt.touches ? 'translate3d(' + dx + 'px,' + dy + 'px,0)' : 'translate(' + dx + 'px,' + dy + 'px)'; // only set the status to dragging, when we are actually dragging + dy = (touch.clientY - tapEvt.clientY + fallbackOffset.y) / (scaleY || 1) + (relativeScrollOffset ? relativeScrollOffset[1] - ghostRelativeParentInitialScroll[1] : 0) / (scaleY || 1); // only set the status to dragging, when we are actually dragging if (!Sortable.active && !awaitingDragStarted) { if (fallbackTolerance && Math.max(Math.abs(touch.clientX - this._lastX), Math.abs(touch.clientY - this._lastY)) < fallbackTolerance) { @@ -1623,11 +1638,31 @@ Sortable.prototype = this._onDragStart(evt, true); } - touchEvt = touch; - css(ghostEl, 'webkitTransform', translate3d); - css(ghostEl, 'mozTransform', translate3d); - css(ghostEl, 'msTransform', translate3d); - css(ghostEl, 'transform', translate3d); + if (ghostEl) { + if (ghostMatrix) { + ghostMatrix.e += dx - (lastDx || 0); + ghostMatrix.f += dy - (lastDy || 0); + } else { + ghostMatrix = { + a: 1, + b: 0, + c: 0, + d: 1, + e: dx, + f: dy + }; + } + + var cssMatrix = "matrix(".concat(ghostMatrix.a, ",").concat(ghostMatrix.b, ",").concat(ghostMatrix.c, ",").concat(ghostMatrix.d, ",").concat(ghostMatrix.e, ",").concat(ghostMatrix.f, ")"); + css(ghostEl, 'webkitTransform', cssMatrix); + css(ghostEl, 'mozTransform', cssMatrix); + css(ghostEl, 'msTransform', cssMatrix); + css(ghostEl, 'transform', cssMatrix); + lastDx = dx; + lastDy = dy; + touchEvt = touch; + } + evt.cancelable && evt.preventDefault(); } }, @@ -1675,7 +1710,9 @@ Sortable.prototype = css(ghostEl, 'zIndex', '100000'); css(ghostEl, 'pointerEvents', 'none'); Sortable.ghost = ghostEl; - container.appendChild(ghostEl); + container.appendChild(ghostEl); // Set transform-origin + + css(ghostEl, 'transform-origin', tapDistanceLeft / parseInt(ghostEl.style.width) * 100 + '% ' + tapDistanceTop / parseInt(ghostEl.style.height) * 100 + '%'); } }, _onDragStart: function _onDragStart( @@ -1954,7 +1991,7 @@ Sortable.prototype = differentLevel = dragEl.parentNode !== el, differentRowCol = !_dragElInRowColumn(dragEl.animated && dragEl.toRect || dragRect, target.animated && target.toRect || targetRect, vertical), side1 = vertical ? 'top' : 'left', - scrolledPastTop = isScrolledPast(target, null, 'top', 'top') || isScrolledPast(dragEl, null, 'top', 'top'), + scrolledPastTop = isScrolledPast(target, 'top', 'top') || isScrolledPast(dragEl, 'top', 'top'), scrollBefore = scrolledPastTop ? scrolledPastTop.scrollTop : void 0; if (lastTarget !== target) { @@ -2055,7 +2092,8 @@ Sortable.prototype = newDraggableIndex = index(dragEl, options.draggable); pluginEvent('drop', this, { evt: evt - }); // Get again after plugin event + }); + parentEl = dragEl && dragEl.parentNode; // Get again after plugin event newIndex = index(dragEl); newDraggableIndex = index(dragEl, options.draggable); @@ -2214,7 +2252,7 @@ Sortable.prototype = savedInputChecked.forEach(function (el) { el.checked = true; }); - savedInputChecked.length = 0; + savedInputChecked.length = lastDx = lastDy = 0; }, handleEvent: function handleEvent( /**Event*/ @@ -2390,7 +2428,7 @@ Sortable.prototype = } if (this.options.group.revertClone) { - this._animate(dragEl, cloneEl); + this.animate(dragEl, cloneEl); } css(cloneEl, 'display', ''); @@ -2542,8 +2580,8 @@ function _saveInputCheckedState(root) { var idx = inputs.length; while (idx--) { - var _el = inputs[idx]; - _el.checked && savedInputChecked.push(_el); + var el = inputs[idx]; + el.checked && savedInputChecked.push(el); } } @@ -2581,11 +2619,21 @@ Sortable.utils = { detectDirection: _detectDirection, getChild: getChild }; +/** + * Get the Sortable instance of an element + * @param {HTMLElement} element The element + * @return {Sortable|undefined} The instance of Sortable + */ + +Sortable.get = function (element) { + return element[expando]; +}; /** * Mount a plugin to Sortable * @param {...SortablePlugin|SortablePlugin[]} plugins Plugins being mounted */ + Sortable.mount = function () { for (var _len = arguments.length, plugins = new Array(_len), _key = 0; _key < _len; _key++) { plugins[_key] = arguments[_key]; @@ -2594,7 +2642,7 @@ Sortable.mount = function () { if (plugins[0].constructor === Array) plugins = plugins[0]; plugins.forEach(function (plugin) { if (!plugin.prototype || !plugin.prototype.constructor) { - throw "Sortable: Mounted plugin must be a constructor function, not ".concat({}.toString.call(el)); + throw "Sortable: Mounted plugin must be a constructor function, not ".concat({}.toString.call(plugin)); } if (plugin.utils) Sortable.utils = _objectSpread({}, Sortable.utils, plugin.utils); @@ -2626,7 +2674,7 @@ var autoScrolls = [], function AutoScrollPlugin() { function AutoScroll() { - this.options = { + this.defaults = { scroll: true, scrollSensitivity: 30, scrollSpeed: 10, @@ -2647,7 +2695,7 @@ function AutoScrollPlugin() { if (this.sortable.nativeDraggable) { on(document, 'dragover', this._handleAutoScroll); } else { - if (this.sortable.options.supportPointer) { + if (this.options.supportPointer) { on(document, 'pointermove', this._handleFallbackAutoScroll); } else if (originalEvent.touches) { on(document, 'touchmove', this._handleFallbackAutoScroll); @@ -2660,7 +2708,7 @@ function AutoScrollPlugin() { var originalEvent = _ref2.originalEvent; // For when bubbling is canceled and using fallback (fallback 'touchmove' always reached) - if (!this.sortable.options.dragOverBubble && !originalEvent.rootEl) { + if (!this.options.dragOverBubble && !originalEvent.rootEl) { this._handleAutoScroll(originalEvent); } }, @@ -2687,8 +2735,8 @@ function AutoScrollPlugin() { _handleAutoScroll: function _handleAutoScroll(evt, fallback) { var _this = this; - var x = evt.clientX, - y = evt.clientY, + var x = (evt.touches ? evt.touches[0] : evt).clientX, + y = (evt.touches ? evt.touches[0] : evt).clientY, elem = document.elementFromPoint(x, y); touchEvt$1 = evt; // IE does not seem to have native autoscroll, // Edge's autoscroll seems too conditional, @@ -2718,7 +2766,7 @@ function AutoScrollPlugin() { } } else { // if DnD is enabled (and browser has good autoscrolling), first autoscroll will already scroll, so get parent autoscroll of first autoscroll - if (!this.sortable.options.bubbleScroll || getParentAutoScrollElement(elem, true) === getWindowScrollingElement()) { + if (!this.options.bubbleScroll || getParentAutoScrollElement(elem, true) === getWindowScrollingElement()) { clearAutoScrolls(); return; } @@ -2747,7 +2795,9 @@ function clearPointerElemChangedInterval() { var autoScroll = throttle(function (evt, options, rootEl, isFallback) { // Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=505521 if (!options.scroll) return; - var sens = options.scrollSensitivity, + var x = (evt.touches ? evt.touches[0] : evt).clientX, + y = (evt.touches ? evt.touches[0] : evt).clientY, + sens = options.scrollSensitivity, speed = options.scrollSpeed, winScroller = getWindowScrollingElement(); var scrollThisInstance = false, @@ -2792,8 +2842,8 @@ var autoScroll = throttle(function (evt, options, rootEl, isFallback) { canScrollY = height < scrollHeight && (elCSS.overflowY === 'auto' || elCSS.overflowY === 'scroll'); } - var vx = canScrollX && (Math.abs(right - evt.clientX) <= sens && scrollPosX + width < scrollWidth) - (Math.abs(left - evt.clientX) <= sens && !!scrollPosX); - var vy = canScrollY && (Math.abs(bottom - evt.clientY) <= sens && scrollPosY + height < scrollHeight) - (Math.abs(top - evt.clientY) <= sens && !!scrollPosY); + var vx = canScrollX && (Math.abs(right - x) <= sens && scrollPosX + width < scrollWidth) - (Math.abs(left - x) <= sens && !!scrollPosX); + var vy = canScrollY && (Math.abs(bottom - y) <= sens && scrollPosY + height < scrollHeight) - (Math.abs(top - y) <= sens && !!scrollPosY); if (!autoScrolls[layersOut]) { for (var i = 0; i <= layersOut; i++) { @@ -2852,12 +2902,16 @@ var drop = function drop(_ref) { unhideGhostForTarget = _ref.unhideGhostForTarget; var toSortable = putSortable || activeSortable; hideGhostForTarget(); - var target = document.elementFromPoint(originalEvent.clientX, originalEvent.clientY); + var touch = originalEvent.changedTouches && originalEvent.changedTouches.length ? originalEvent.changedTouches[0] : originalEvent; + var target = document.elementFromPoint(touch.clientX, touch.clientY); unhideGhostForTarget(); if (toSortable && !toSortable.el.contains(target)) { dispatchSortableEvent('spill'); - this.onSpill(dragEl); + this.onSpill({ + dragEl: dragEl, + putSortable: putSortable + }); } }; @@ -2869,9 +2923,16 @@ Revert.prototype = { var oldDraggableIndex = _ref2.oldDraggableIndex; this.startIndex = oldDraggableIndex; }, - onSpill: function onSpill(dragEl) { + onSpill: function onSpill(_ref3) { + var dragEl = _ref3.dragEl, + putSortable = _ref3.putSortable; this.sortable.captureAnimationState(); - var nextSibling = getChild(this.sortable.el, this.startIndex, this.sortable.options); + + if (putSortable) { + putSortable.captureAnimationState(); + } + + var nextSibling = getChild(this.sortable.el, this.startIndex, this.options); if (nextSibling) { this.sortable.el.insertBefore(dragEl, nextSibling); @@ -2880,6 +2941,10 @@ Revert.prototype = { } this.sortable.animateAll(); + + if (putSortable) { + putSortable.animateAll(); + } }, drop: drop }; @@ -2891,10 +2956,13 @@ _extends(Revert, { function Remove() {} Remove.prototype = { - onSpill: function onSpill(dragEl) { - this.sortable.captureAnimationState(); + onSpill: function onSpill(_ref4) { + var dragEl = _ref4.dragEl, + putSortable = _ref4.putSortable; + var parentSortable = putSortable || this.sortable; + parentSortable.captureAnimationState(); dragEl.parentNode && dragEl.parentNode.removeChild(dragEl); - this.sortable.animateAll(); + parentSortable.animateAll(); }, drop: drop }; @@ -2909,7 +2977,7 @@ var lastSwapEl; function SwapPlugin() { function Swap() { - this.options = { + this.defaults = { swapClass: 'sortable-swap-highlight' }; } @@ -2924,10 +2992,11 @@ function SwapPlugin() { target = _ref2.target, onMove = _ref2.onMove, activeSortable = _ref2.activeSortable, - changed = _ref2.changed; + changed = _ref2.changed, + cancel = _ref2.cancel; if (!activeSortable.options.swap) return; var el = this.sortable.el, - options = this.sortable.options; + options = this.options; if (target && target !== el) { var prevSwapEl = lastSwapEl; @@ -2945,14 +3014,15 @@ function SwapPlugin() { } changed(); - return completed(true); + completed(true); + cancel(); }, drop: function drop(_ref3) { var activeSortable = _ref3.activeSortable, putSortable = _ref3.putSortable, dragEl = _ref3.dragEl; var toSortable = putSortable || this.sortable; - var options = this.sortable.options; + var options = this.options; lastSwapEl && toggleClass(lastSwapEl, options.swapClass, false); if (lastSwapEl && (options.swap || putSortable && putSortable.options.swap)) { @@ -2971,7 +3041,7 @@ function SwapPlugin() { }; return _extends(Swap, { pluginName: 'swap', - eventOptions: function eventOptions() { + eventProperties: function eventProperties() { return { swapItem: lastSwapEl }; @@ -3028,7 +3098,7 @@ function MultiDragPlugin() { on(document, 'keydown', this._checkKeyDown); on(document, 'keyup', this._checkKeyUp); - this.options = { + this.defaults = { selectedClass: 'sortable-selected', multiDragKey: null, setData: function setData(dataTransfer, dragEl) { @@ -3058,39 +3128,42 @@ function MultiDragPlugin() { this.isMultiDrag = ~multiDragElements.indexOf(dragEl$1); }, setupClone: function setupClone(_ref2) { - var sortable = _ref2.sortable; + var sortable = _ref2.sortable, + cancel = _ref2.cancel; if (!this.isMultiDrag) return; - for (var _i = 0; _i < multiDragElements.length; _i++) { - multiDragClones.push(clone(multiDragElements[_i])); - multiDragClones[_i].sortableIndex = multiDragElements[_i].sortableIndex; - multiDragClones[_i].draggable = false; - multiDragClones[_i].style['will-change'] = ''; - toggleClass(multiDragClones[_i], sortable.options.selectedClass, false); - multiDragElements[_i] === dragEl$1 && toggleClass(multiDragClones[_i], sortable.options.chosenClass, false); + for (var i = 0; i < multiDragElements.length; i++) { + multiDragClones.push(clone(multiDragElements[i])); + multiDragClones[i].sortableIndex = multiDragElements[i].sortableIndex; + multiDragClones[i].draggable = false; + multiDragClones[i].style['will-change'] = ''; + toggleClass(multiDragClones[i], this.options.selectedClass, false); + multiDragElements[i] === dragEl$1 && toggleClass(multiDragClones[i], this.options.chosenClass, false); } sortable._hideClone(); - return true; + cancel(); }, clone: function clone(_ref3) { var sortable = _ref3.sortable, rootEl = _ref3.rootEl, - dispatchSortableEvent = _ref3.dispatchSortableEvent; + dispatchSortableEvent = _ref3.dispatchSortableEvent, + cancel = _ref3.cancel; if (!this.isMultiDrag) return; - if (!sortable.options.removeCloneOnHide) { + if (!this.options.removeCloneOnHide) { if (multiDragElements.length && multiDragSortable === sortable) { insertMultiDragClones(true, rootEl); dispatchSortableEvent('clone'); - return true; + cancel(); } } }, showClone: function showClone(_ref4) { var cloneNowShown = _ref4.cloneNowShown, - rootEl = _ref4.rootEl; + rootEl = _ref4.rootEl, + cancel = _ref4.cancel; if (!this.isMultiDrag) return; insertMultiDragClones(false, rootEl); multiDragClones.forEach(function (clone) { @@ -3098,22 +3171,25 @@ function MultiDragPlugin() { }); cloneNowShown(); clonesHidden = false; - return true; + cancel(); }, hideClone: function hideClone(_ref5) { + var _this = this; + var sortable = _ref5.sortable, - cloneNowHidden = _ref5.cloneNowHidden; + cloneNowHidden = _ref5.cloneNowHidden, + cancel = _ref5.cancel; if (!this.isMultiDrag) return; multiDragClones.forEach(function (clone) { css(clone, 'display', 'none'); - if (sortable.options.removeCloneOnHide && clone.parentNode) { + if (_this.options.removeCloneOnHide && clone.parentNode) { clone.parentNode.removeChild(clone); } }); cloneNowHidden(); clonesHidden = true; - return true; + cancel(); }, dragStartGlobal: function dragStartGlobal(_ref6) { var sortable = _ref6.sortable; @@ -3132,10 +3208,12 @@ function MultiDragPlugin() { dragStarted = true; }, dragStarted: function dragStarted(_ref7) { + var _this2 = this; + var sortable = _ref7.sortable; if (!this.isMultiDrag) return; - if (sortable.options.sort) { + if (this.options.sort) { // Capture rects, // hide multi drag elements (by positioning them absolute), // set multi drag elements rects to dragRect, @@ -3144,7 +3222,7 @@ function MultiDragPlugin() { // unset rects & remove from DOM sortable.captureAnimationState(); - if (sortable.options.animation) { + if (this.options.animation) { multiDragElements.forEach(function (multiDragElement) { if (multiDragElement === dragEl$1) return; css(multiDragElement, 'position', 'absolute'); @@ -3163,24 +3241,26 @@ function MultiDragPlugin() { folding = false; initialFolding = false; - if (sortable.options.animation) { + if (_this2.options.animation) { multiDragElements.forEach(function (multiDragElement) { unsetRect(multiDragElement); }); } // Remove all auxiliary multidrag items from el, if sorting enabled - if (sortable.options.sort) { + if (_this2.options.sort) { removeMultiDragElements(); } }); }, dragOver: function dragOver(_ref8) { var target = _ref8.target, - completed = _ref8.completed; + completed = _ref8.completed, + cancel = _ref8.cancel; if (folding && ~multiDragElements.indexOf(target)) { - return completed(false); + completed(false); + cancel(); } }, revert: function revert(_ref9) { @@ -3201,7 +3281,7 @@ function MultiDragPlugin() { fromSortable.removeAnimationState(multiDragElement); }); folding = false; - insertMultiDragElements(!sortable.options.removeCloneOnHide, rootEl); + insertMultiDragElements(!this.options.removeCloneOnHide, rootEl); } }, dragOverCompleted: function dragOverCompleted(_ref10) { @@ -3211,7 +3291,7 @@ function MultiDragPlugin() { activeSortable = _ref10.activeSortable, parentEl = _ref10.parentEl, putSortable = _ref10.putSortable; - var options = sortable.options; + var options = this.options; if (insertion) { // Clones must be hidden before folding animation to capture dragRectAbsolute properly @@ -3294,7 +3374,7 @@ function MultiDragPlugin() { putSortable = _ref12.putSortable; var toSortable = putSortable || this.sortable; if (!evt) return; - var options = sortable.options, + var options = this.options, children = parentEl.children; // Multi-drag selection if (!dragStarted) { @@ -3314,32 +3394,32 @@ function MultiDragPlugin() { originalEvt: evt }); // Modifier activated, select from last to dragEl - if ((!options.multiDragKey || this.multiDragKeyDown) && evt.shiftKey && lastMultiDragSelect && sortable.el.contains(lastMultiDragSelect)) { + if (evt.shiftKey && lastMultiDragSelect && sortable.el.contains(lastMultiDragSelect)) { var lastIndex = index(lastMultiDragSelect), currentIndex = index(dragEl$1); if (~lastIndex && ~currentIndex && lastIndex !== currentIndex) { // Must include lastMultiDragSelect (select it), in case modified selection from no selection // (but previous selection existed) - var n, _i2; + var n, i; if (currentIndex > lastIndex) { - _i2 = lastIndex; + i = lastIndex; n = currentIndex; } else { - _i2 = currentIndex; + i = currentIndex; n = lastIndex + 1; } - for (; _i2 < n; _i2++) { - if (~multiDragElements.indexOf(children[_i2])) continue; - toggleClass(children[_i2], options.selectedClass, true); - multiDragElements.push(children[_i2]); + for (; i < n; i++) { + if (~multiDragElements.indexOf(children[i])) continue; + toggleClass(children[i], options.selectedClass, true); + multiDragElements.push(children[i]); dispatchEvent({ sortable: sortable, rootEl: rootEl, name: 'select', - targetEl: children[_i2], + targetEl: children[i], originalEvt: evt }); } @@ -3440,7 +3520,7 @@ function MultiDragPlugin() { this.isMultiDrag = dragStarted = false; multiDragClones.length = 0; }, - destroy: function destroy() { + destroyGlobal: function destroyGlobal() { this._deselectMultiDrag(); off(document, 'pointerup', this._deselectMultiDrag); @@ -3454,13 +3534,13 @@ function MultiDragPlugin() { if (multiDragSortable !== this.sortable) return; // Only deselect if target is not item in this sortable - if (evt && closest(evt.target, this.sortable.options.draggable, this.sortable.el, false)) return; // Only deselect if left click + if (evt && closest(evt.target, this.options.draggable, this.sortable.el, false)) return; // Only deselect if left click if (evt && evt.button !== 0) return; while (multiDragElements.length) { var el = multiDragElements[0]; - toggleClass(el, this.sortable.options.selectedClass, false); + toggleClass(el, this.options.selectedClass, false); multiDragElements.shift(); dispatchEvent({ sortable: this.sortable, @@ -3472,12 +3552,12 @@ function MultiDragPlugin() { } }, _checkKeyDown: function _checkKeyDown(evt) { - if (evt.key === this.sortable.options.multiDragKey) { + if (evt.key === this.options.multiDragKey) { this.multiDragKeyDown = true; } }, _checkKeyUp: function _checkKeyUp(evt) { - if (evt.key === this.sortable.options.multiDragKey) { + if (evt.key === this.options.multiDragKey) { this.multiDragKeyDown = false; } } @@ -3516,8 +3596,8 @@ function MultiDragPlugin() { multiDragElements.splice(index, 1); } }, - eventOptions: function eventOptions() { - var _this = this; + eventProperties: function eventProperties() { + var _this3 = this; var oldIndicies = [], newIndicies = []; @@ -3532,7 +3612,7 @@ function MultiDragPlugin() { if (folding && multiDragElement !== dragEl$1) { newIndex = -1; } else if (folding) { - newIndex = index(multiDragElement, ':not(.' + _this.options.selectedClass + ')'); + newIndex = index(multiDragElement, ':not(.' + _this3.options.selectedClass + ')'); } else { newIndex = index(multiDragElement); } @@ -3566,7 +3646,7 @@ function MultiDragPlugin() { } function insertMultiDragElements(clonesInserted, rootEl) { - multiDragElements.forEach(function (multiDragElement) { + multiDragElements.forEach(function (multiDragElement, i) { var target = rootEl.children[multiDragElement.sortableIndex + (clonesInserted ? Number(i) : 0)]; if (target) { @@ -3584,7 +3664,7 @@ function insertMultiDragElements(clonesInserted, rootEl) { function insertMultiDragClones(elementsInserted, rootEl) { - multiDragClones.forEach(function (clone) { + multiDragClones.forEach(function (clone, i) { var target = rootEl.children[clone.sortableIndex + (elementsInserted ? Number(i) : 0)]; if (target) { diff --git a/modular/sortable.esm.js b/modular/sortable.esm.js index 286d09d27..76f8be820 100644 --- a/modular/sortable.esm.js +++ b/modular/sortable.esm.js @@ -1,5 +1,5 @@ /**! - * Sortable 1.10.0-rc3 + * Sortable 1.10.0 * @author RubaXa * @author owenm * @license MIT @@ -126,7 +126,7 @@ function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); } -var version = "1.10.0-rc3"; +var version = "1.10.0"; function userAgent(pattern) { return !! @@ -244,15 +244,19 @@ function css(el, prop, val) { function matrix(el, selfOnly) { var appliedTransforms = ''; - do { - var transform = css(el, 'transform'); + if (typeof el === 'string') { + appliedTransforms = el; + } else { + do { + var transform = css(el, 'transform'); - if (transform && transform !== 'none') { - appliedTransforms = transform + ' ' + appliedTransforms; - } - /* jshint boss:true */ + if (transform && transform !== 'none') { + appliedTransforms = transform + ' ' + appliedTransforms; + } + /* jshint boss:true */ - } while (!selfOnly && (el = el.parentNode)); + } while (!selfOnly && (el = el.parentNode)); + } var matrixFn = window.DOMMatrix || window.WebKitCSSMatrix || window.CSSMatrix; /*jshint -W056 */ @@ -367,16 +371,15 @@ function getRect(el, relativeToContainingBlock, relativeToNonStaticParent, undoS /** * Checks if a side of an element is scrolled past a side of its parents * @param {HTMLElement} el The element who's side being scrolled out of view is in question - * @param {[DOMRect]} rect Optional rect of `el` to use * @param {String} elSide Side of the element in question ('top', 'left', 'right', 'bottom') * @param {String} parentSide Side of the parent in question ('top', 'left', 'right', 'bottom') * @return {HTMLElement} The parent scroll element that the el's side is scrolled past, or null if there is no such element */ -function isScrolledPast(el, rect, elSide, parentSide) { +function isScrolledPast(el, elSide, parentSide) { var parent = getParentAutoScrollElement(el, true), - elSideVal = (rect ? rect : getRect(el))[elSide]; + elSideVal = getRect(el)[elSide]; /* jshint boss:true */ while (parent) { @@ -629,7 +632,9 @@ function AnimationStateManager() { target: child, rect: getRect(child) }); - var fromRect = getRect(child); // If animating: compensate for current animation + + var fromRect = _objectSpread({}, animationStates[animationStates.length - 1].rect); // If animating: compensate for current animation + if (child.thisAnimationDuration) { var childMatrix = matrix(child, true); @@ -678,9 +683,7 @@ function AnimationStateManager() { toRect.left -= targetMatrix.e; } - target.toRect = toRect; // If element is scrolled out of view: Do not animate - - if ((isScrolledPast(target, toRect, 'bottom', 'top') || isScrolledPast(target, toRect, 'top', 'bottom') || isScrolledPast(target, toRect, 'right', 'left') || isScrolledPast(target, toRect, 'left', 'right')) && (isScrolledPast(target, animatingRect, 'bottom', 'top') || isScrolledPast(target, animatingRect, 'top', 'bottom') || isScrolledPast(target, animatingRect, 'right', 'left') || isScrolledPast(target, animatingRect, 'left', 'right')) && (isScrolledPast(target, fromRect, 'bottom', 'top') || isScrolledPast(target, fromRect, 'top', 'bottom') || isScrolledPast(target, fromRect, 'right', 'left') || isScrolledPast(target, fromRect, 'left', 'right'))) return; + target.toRect = toRect; if (target.thisAnimationDuration) { // Could also check if animatingRect is between fromRect and toRect @@ -700,7 +703,7 @@ function AnimationStateManager() { time = _this.options.animation; } - _this.animate(target, animatingRect, time); + _this.animate(target, animatingRect, toRect, time); } if (time) { @@ -729,16 +732,15 @@ function AnimationStateManager() { animationStates = []; }, - animate: function animate(target, prev, duration) { + animate: function animate(target, currentRect, toRect, duration) { if (duration) { css(target, 'transition', ''); css(target, 'transform', ''); - var currentRect = getRect(target), - elMatrix = matrix(this.el), + var elMatrix = matrix(this.el), scaleX = elMatrix && elMatrix.a, scaleY = elMatrix && elMatrix.d, - translateX = (prev.left - currentRect.left) / (scaleX || 1), - translateY = (prev.top - currentRect.top) / (scaleY || 1); + translateX = (currentRect.left - toRect.left) / (scaleX || 1), + translateY = (currentRect.top - toRect.top) / (scaleY || 1); target.animatingX = !!translateX; target.animatingY = !!translateY; css(target, 'transform', 'translate3d(' + translateX + 'px,' + translateY + 'px,0)'); @@ -786,12 +788,17 @@ var PluginManager = { var _this = this; this.eventCanceled = false; + + evt.cancel = function () { + _this.eventCanceled = true; + }; + var eventNameGlobal = eventName + 'Global'; plugins.forEach(function (plugin) { if (!sortable[plugin.pluginName]) return; // Fire global events if it exists in this sortable if (sortable[plugin.pluginName][eventNameGlobal]) { - _this.eventCanceled = !!sortable[plugin.pluginName][eventNameGlobal](_objectSpread({ + sortable[plugin.pluginName][eventNameGlobal](_objectSpread({ sortable: sortable }, evt)); } // Only fire plugin event if plugin is enabled in this sortable, @@ -799,21 +806,22 @@ var PluginManager = { if (sortable.options[plugin.pluginName] && sortable[plugin.pluginName][eventName]) { - _this.eventCanceled = _this.eventCanceled || !!sortable[plugin.pluginName][eventName](_objectSpread({ + sortable[plugin.pluginName][eventName](_objectSpread({ sortable: sortable }, evt)); } }); }, - initializePlugins: function initializePlugins(sortable, el, defaults) { + initializePlugins: function initializePlugins(sortable, el, defaults, options) { plugins.forEach(function (plugin) { var pluginName = plugin.pluginName; if (!sortable.options[pluginName] && !plugin.initializeByDefault) return; - var initialized = new plugin(sortable, el); + var initialized = new plugin(sortable, el, sortable.options); initialized.sortable = sortable; + initialized.options = sortable.options; sortable[pluginName] = initialized; // Add default options from plugin - _extends(defaults, initialized.options); + _extends(defaults, initialized.defaults); }); for (var option in sortable.options) { @@ -825,14 +833,14 @@ var PluginManager = { } } }, - getEventOptions: function getEventOptions(name, sortable) { - var eventOptions = {}; + getEventProperties: function getEventProperties(name, sortable) { + var eventProperties = {}; plugins.forEach(function (plugin) { - if (typeof plugin.eventOptions !== 'function') return; + if (typeof plugin.eventProperties !== 'function') return; - _extends(eventOptions, plugin.eventOptions.call(sortable, name)); + _extends(eventProperties, plugin.eventProperties.call(sortable[plugin.pluginName], name)); }); - return eventOptions; + return eventProperties; }, modifyOption: function modifyOption(sortable, name, value) { var modifiedValue; @@ -862,8 +870,9 @@ function dispatchEvent(_ref) { newDraggableIndex = _ref.newDraggableIndex, originalEvent = _ref.originalEvent, putSortable = _ref.putSortable, - eventOptions = _ref.eventOptions; - sortable = sortable || rootEl[expando]; + extraEventProperties = _ref.extraEventProperties; + sortable = sortable || rootEl && rootEl[expando]; + if (!sortable) return; var evt, options = sortable.options, onName = 'on' + name.charAt(0).toUpperCase() + name.substr(1); // Support for new CustomEvent feature @@ -889,10 +898,10 @@ function dispatchEvent(_ref) { evt.originalEvent = originalEvent; evt.pullMode = putSortable ? putSortable.lastPutMode : undefined; - var allEventOptions = _objectSpread({}, eventOptions, PluginManager.getEventOptions(name, sortable)); + var allEventProperties = _objectSpread({}, extraEventProperties, PluginManager.getEventProperties(name, sortable)); - for (var option in allEventOptions) { - evt[option] = allEventOptions[option]; + for (var option in allEventProperties) { + evt[option] = allEventProperties[option]; } if (rootEl) { @@ -980,6 +989,10 @@ var dragEl, sortables = [], tapEvt, touchEvt, + lastDx, + lastDy, + tapDistanceLeft, + tapDistanceTop, moved, lastTarget, lastDirection, @@ -1026,7 +1039,7 @@ supportDraggable = !ChromeForAndroid && !IOS && 'draggable' in document.createEl return elCSS.gridTemplateColumns.split(' ').length <= 1 ? 'vertical' : 'horizontal'; } - if (child1 && firstChildCSS["float"] !== 'none') { + if (child1 && firstChildCSS["float"] && firstChildCSS["float"] !== 'none') { var touchingSideChild2 = firstChildCSS["float"] === 'left' ? 'left' : 'right'; return child2 && (secondChildCSS.clear === 'both' || secondChildCSS.clear === touchingSideChild2) ? 'vertical' : 'horizontal'; } @@ -1280,7 +1293,7 @@ Sortable.prototype = options = this.options, preventOnFilter = options.preventOnFilter, type = evt.type, - touch = evt.touches && evt.touches[0], + touch = evt.touches && evt.touches[0] || evt.pointerType && evt.pointerType === 'touch' && evt, target = (touch || evt).target, originalTarget = evt.target.shadowRoot && (evt.path && evt.path[0] || evt.composedPath && evt.composedPath()[0]) || target, filter = options.filter; @@ -1381,6 +1394,7 @@ Sortable.prototype = dragStartFn; if (target && !dragEl && target.parentNode === el) { + var dragRect = getRect(target); rootEl = el; dragEl = target; parentEl = dragEl.parentNode; @@ -1393,6 +1407,8 @@ Sortable.prototype = clientX: (touch || evt).clientX, clientY: (touch || evt).clientY }; + tapDistanceLeft = tapEvt.clientX - dragRect.left; + tapDistanceTop = tapEvt.clientY - dragRect.top; this._lastX = (touch || evt).clientX; this._lastY = (touch || evt).clientY; dragEl.style['will-change'] = 'all'; @@ -1612,8 +1628,7 @@ Sortable.prototype = scaleY = ghostEl && ghostMatrix && ghostMatrix.d, relativeScrollOffset = PositionGhostAbsolutely && ghostRelativeParent && getRelativeScrollOffset(ghostRelativeParent), dx = (touch.clientX - tapEvt.clientX + fallbackOffset.x) / (scaleX || 1) + (relativeScrollOffset ? relativeScrollOffset[0] - ghostRelativeParentInitialScroll[0] : 0) / (scaleX || 1), - dy = (touch.clientY - tapEvt.clientY + fallbackOffset.y) / (scaleY || 1) + (relativeScrollOffset ? relativeScrollOffset[1] - ghostRelativeParentInitialScroll[1] : 0) / (scaleY || 1), - translate3d = evt.touches ? 'translate3d(' + dx + 'px,' + dy + 'px,0)' : 'translate(' + dx + 'px,' + dy + 'px)'; // only set the status to dragging, when we are actually dragging + dy = (touch.clientY - tapEvt.clientY + fallbackOffset.y) / (scaleY || 1) + (relativeScrollOffset ? relativeScrollOffset[1] - ghostRelativeParentInitialScroll[1] : 0) / (scaleY || 1); // only set the status to dragging, when we are actually dragging if (!Sortable.active && !awaitingDragStarted) { if (fallbackTolerance && Math.max(Math.abs(touch.clientX - this._lastX), Math.abs(touch.clientY - this._lastY)) < fallbackTolerance) { @@ -1623,11 +1638,31 @@ Sortable.prototype = this._onDragStart(evt, true); } - touchEvt = touch; - css(ghostEl, 'webkitTransform', translate3d); - css(ghostEl, 'mozTransform', translate3d); - css(ghostEl, 'msTransform', translate3d); - css(ghostEl, 'transform', translate3d); + if (ghostEl) { + if (ghostMatrix) { + ghostMatrix.e += dx - (lastDx || 0); + ghostMatrix.f += dy - (lastDy || 0); + } else { + ghostMatrix = { + a: 1, + b: 0, + c: 0, + d: 1, + e: dx, + f: dy + }; + } + + var cssMatrix = "matrix(".concat(ghostMatrix.a, ",").concat(ghostMatrix.b, ",").concat(ghostMatrix.c, ",").concat(ghostMatrix.d, ",").concat(ghostMatrix.e, ",").concat(ghostMatrix.f, ")"); + css(ghostEl, 'webkitTransform', cssMatrix); + css(ghostEl, 'mozTransform', cssMatrix); + css(ghostEl, 'msTransform', cssMatrix); + css(ghostEl, 'transform', cssMatrix); + lastDx = dx; + lastDy = dy; + touchEvt = touch; + } + evt.cancelable && evt.preventDefault(); } }, @@ -1675,7 +1710,9 @@ Sortable.prototype = css(ghostEl, 'zIndex', '100000'); css(ghostEl, 'pointerEvents', 'none'); Sortable.ghost = ghostEl; - container.appendChild(ghostEl); + container.appendChild(ghostEl); // Set transform-origin + + css(ghostEl, 'transform-origin', tapDistanceLeft / parseInt(ghostEl.style.width) * 100 + '% ' + tapDistanceTop / parseInt(ghostEl.style.height) * 100 + '%'); } }, _onDragStart: function _onDragStart( @@ -1954,7 +1991,7 @@ Sortable.prototype = differentLevel = dragEl.parentNode !== el, differentRowCol = !_dragElInRowColumn(dragEl.animated && dragEl.toRect || dragRect, target.animated && target.toRect || targetRect, vertical), side1 = vertical ? 'top' : 'left', - scrolledPastTop = isScrolledPast(target, null, 'top', 'top') || isScrolledPast(dragEl, null, 'top', 'top'), + scrolledPastTop = isScrolledPast(target, 'top', 'top') || isScrolledPast(dragEl, 'top', 'top'), scrollBefore = scrolledPastTop ? scrolledPastTop.scrollTop : void 0; if (lastTarget !== target) { @@ -2055,7 +2092,8 @@ Sortable.prototype = newDraggableIndex = index(dragEl, options.draggable); pluginEvent('drop', this, { evt: evt - }); // Get again after plugin event + }); + parentEl = dragEl && dragEl.parentNode; // Get again after plugin event newIndex = index(dragEl); newDraggableIndex = index(dragEl, options.draggable); @@ -2214,7 +2252,7 @@ Sortable.prototype = savedInputChecked.forEach(function (el) { el.checked = true; }); - savedInputChecked.length = 0; + savedInputChecked.length = lastDx = lastDy = 0; }, handleEvent: function handleEvent( /**Event*/ @@ -2390,7 +2428,7 @@ Sortable.prototype = } if (this.options.group.revertClone) { - this._animate(dragEl, cloneEl); + this.animate(dragEl, cloneEl); } css(cloneEl, 'display', ''); @@ -2542,8 +2580,8 @@ function _saveInputCheckedState(root) { var idx = inputs.length; while (idx--) { - var _el = inputs[idx]; - _el.checked && savedInputChecked.push(_el); + var el = inputs[idx]; + el.checked && savedInputChecked.push(el); } } @@ -2581,11 +2619,21 @@ Sortable.utils = { detectDirection: _detectDirection, getChild: getChild }; +/** + * Get the Sortable instance of an element + * @param {HTMLElement} element The element + * @return {Sortable|undefined} The instance of Sortable + */ + +Sortable.get = function (element) { + return element[expando]; +}; /** * Mount a plugin to Sortable * @param {...SortablePlugin|SortablePlugin[]} plugins Plugins being mounted */ + Sortable.mount = function () { for (var _len = arguments.length, plugins = new Array(_len), _key = 0; _key < _len; _key++) { plugins[_key] = arguments[_key]; @@ -2594,7 +2642,7 @@ Sortable.mount = function () { if (plugins[0].constructor === Array) plugins = plugins[0]; plugins.forEach(function (plugin) { if (!plugin.prototype || !plugin.prototype.constructor) { - throw "Sortable: Mounted plugin must be a constructor function, not ".concat({}.toString.call(el)); + throw "Sortable: Mounted plugin must be a constructor function, not ".concat({}.toString.call(plugin)); } if (plugin.utils) Sortable.utils = _objectSpread({}, Sortable.utils, plugin.utils); @@ -2626,7 +2674,7 @@ var autoScrolls = [], function AutoScrollPlugin() { function AutoScroll() { - this.options = { + this.defaults = { scroll: true, scrollSensitivity: 30, scrollSpeed: 10, @@ -2647,7 +2695,7 @@ function AutoScrollPlugin() { if (this.sortable.nativeDraggable) { on(document, 'dragover', this._handleAutoScroll); } else { - if (this.sortable.options.supportPointer) { + if (this.options.supportPointer) { on(document, 'pointermove', this._handleFallbackAutoScroll); } else if (originalEvent.touches) { on(document, 'touchmove', this._handleFallbackAutoScroll); @@ -2660,7 +2708,7 @@ function AutoScrollPlugin() { var originalEvent = _ref2.originalEvent; // For when bubbling is canceled and using fallback (fallback 'touchmove' always reached) - if (!this.sortable.options.dragOverBubble && !originalEvent.rootEl) { + if (!this.options.dragOverBubble && !originalEvent.rootEl) { this._handleAutoScroll(originalEvent); } }, @@ -2687,8 +2735,8 @@ function AutoScrollPlugin() { _handleAutoScroll: function _handleAutoScroll(evt, fallback) { var _this = this; - var x = evt.clientX, - y = evt.clientY, + var x = (evt.touches ? evt.touches[0] : evt).clientX, + y = (evt.touches ? evt.touches[0] : evt).clientY, elem = document.elementFromPoint(x, y); touchEvt$1 = evt; // IE does not seem to have native autoscroll, // Edge's autoscroll seems too conditional, @@ -2718,7 +2766,7 @@ function AutoScrollPlugin() { } } else { // if DnD is enabled (and browser has good autoscrolling), first autoscroll will already scroll, so get parent autoscroll of first autoscroll - if (!this.sortable.options.bubbleScroll || getParentAutoScrollElement(elem, true) === getWindowScrollingElement()) { + if (!this.options.bubbleScroll || getParentAutoScrollElement(elem, true) === getWindowScrollingElement()) { clearAutoScrolls(); return; } @@ -2747,7 +2795,9 @@ function clearPointerElemChangedInterval() { var autoScroll = throttle(function (evt, options, rootEl, isFallback) { // Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=505521 if (!options.scroll) return; - var sens = options.scrollSensitivity, + var x = (evt.touches ? evt.touches[0] : evt).clientX, + y = (evt.touches ? evt.touches[0] : evt).clientY, + sens = options.scrollSensitivity, speed = options.scrollSpeed, winScroller = getWindowScrollingElement(); var scrollThisInstance = false, @@ -2792,8 +2842,8 @@ var autoScroll = throttle(function (evt, options, rootEl, isFallback) { canScrollY = height < scrollHeight && (elCSS.overflowY === 'auto' || elCSS.overflowY === 'scroll'); } - var vx = canScrollX && (Math.abs(right - evt.clientX) <= sens && scrollPosX + width < scrollWidth) - (Math.abs(left - evt.clientX) <= sens && !!scrollPosX); - var vy = canScrollY && (Math.abs(bottom - evt.clientY) <= sens && scrollPosY + height < scrollHeight) - (Math.abs(top - evt.clientY) <= sens && !!scrollPosY); + var vx = canScrollX && (Math.abs(right - x) <= sens && scrollPosX + width < scrollWidth) - (Math.abs(left - x) <= sens && !!scrollPosX); + var vy = canScrollY && (Math.abs(bottom - y) <= sens && scrollPosY + height < scrollHeight) - (Math.abs(top - y) <= sens && !!scrollPosY); if (!autoScrolls[layersOut]) { for (var i = 0; i <= layersOut; i++) { @@ -2852,12 +2902,16 @@ var drop = function drop(_ref) { unhideGhostForTarget = _ref.unhideGhostForTarget; var toSortable = putSortable || activeSortable; hideGhostForTarget(); - var target = document.elementFromPoint(originalEvent.clientX, originalEvent.clientY); + var touch = originalEvent.changedTouches && originalEvent.changedTouches.length ? originalEvent.changedTouches[0] : originalEvent; + var target = document.elementFromPoint(touch.clientX, touch.clientY); unhideGhostForTarget(); if (toSortable && !toSortable.el.contains(target)) { dispatchSortableEvent('spill'); - this.onSpill(dragEl); + this.onSpill({ + dragEl: dragEl, + putSortable: putSortable + }); } }; @@ -2869,9 +2923,16 @@ Revert.prototype = { var oldDraggableIndex = _ref2.oldDraggableIndex; this.startIndex = oldDraggableIndex; }, - onSpill: function onSpill(dragEl) { + onSpill: function onSpill(_ref3) { + var dragEl = _ref3.dragEl, + putSortable = _ref3.putSortable; this.sortable.captureAnimationState(); - var nextSibling = getChild(this.sortable.el, this.startIndex, this.sortable.options); + + if (putSortable) { + putSortable.captureAnimationState(); + } + + var nextSibling = getChild(this.sortable.el, this.startIndex, this.options); if (nextSibling) { this.sortable.el.insertBefore(dragEl, nextSibling); @@ -2880,6 +2941,10 @@ Revert.prototype = { } this.sortable.animateAll(); + + if (putSortable) { + putSortable.animateAll(); + } }, drop: drop }; @@ -2891,10 +2956,13 @@ _extends(Revert, { function Remove() {} Remove.prototype = { - onSpill: function onSpill(dragEl) { - this.sortable.captureAnimationState(); + onSpill: function onSpill(_ref4) { + var dragEl = _ref4.dragEl, + putSortable = _ref4.putSortable; + var parentSortable = putSortable || this.sortable; + parentSortable.captureAnimationState(); dragEl.parentNode && dragEl.parentNode.removeChild(dragEl); - this.sortable.animateAll(); + parentSortable.animateAll(); }, drop: drop }; @@ -2907,7 +2975,7 @@ var lastSwapEl; function SwapPlugin() { function Swap() { - this.options = { + this.defaults = { swapClass: 'sortable-swap-highlight' }; } @@ -2922,10 +2990,11 @@ function SwapPlugin() { target = _ref2.target, onMove = _ref2.onMove, activeSortable = _ref2.activeSortable, - changed = _ref2.changed; + changed = _ref2.changed, + cancel = _ref2.cancel; if (!activeSortable.options.swap) return; var el = this.sortable.el, - options = this.sortable.options; + options = this.options; if (target && target !== el) { var prevSwapEl = lastSwapEl; @@ -2943,14 +3012,15 @@ function SwapPlugin() { } changed(); - return completed(true); + completed(true); + cancel(); }, drop: function drop(_ref3) { var activeSortable = _ref3.activeSortable, putSortable = _ref3.putSortable, dragEl = _ref3.dragEl; var toSortable = putSortable || this.sortable; - var options = this.sortable.options; + var options = this.options; lastSwapEl && toggleClass(lastSwapEl, options.swapClass, false); if (lastSwapEl && (options.swap || putSortable && putSortable.options.swap)) { @@ -2969,7 +3039,7 @@ function SwapPlugin() { }; return _extends(Swap, { pluginName: 'swap', - eventOptions: function eventOptions() { + eventProperties: function eventProperties() { return { swapItem: lastSwapEl }; @@ -3026,7 +3096,7 @@ function MultiDragPlugin() { on(document, 'keydown', this._checkKeyDown); on(document, 'keyup', this._checkKeyUp); - this.options = { + this.defaults = { selectedClass: 'sortable-selected', multiDragKey: null, setData: function setData(dataTransfer, dragEl) { @@ -3056,39 +3126,42 @@ function MultiDragPlugin() { this.isMultiDrag = ~multiDragElements.indexOf(dragEl$1); }, setupClone: function setupClone(_ref2) { - var sortable = _ref2.sortable; + var sortable = _ref2.sortable, + cancel = _ref2.cancel; if (!this.isMultiDrag) return; - for (var _i = 0; _i < multiDragElements.length; _i++) { - multiDragClones.push(clone(multiDragElements[_i])); - multiDragClones[_i].sortableIndex = multiDragElements[_i].sortableIndex; - multiDragClones[_i].draggable = false; - multiDragClones[_i].style['will-change'] = ''; - toggleClass(multiDragClones[_i], sortable.options.selectedClass, false); - multiDragElements[_i] === dragEl$1 && toggleClass(multiDragClones[_i], sortable.options.chosenClass, false); + for (var i = 0; i < multiDragElements.length; i++) { + multiDragClones.push(clone(multiDragElements[i])); + multiDragClones[i].sortableIndex = multiDragElements[i].sortableIndex; + multiDragClones[i].draggable = false; + multiDragClones[i].style['will-change'] = ''; + toggleClass(multiDragClones[i], this.options.selectedClass, false); + multiDragElements[i] === dragEl$1 && toggleClass(multiDragClones[i], this.options.chosenClass, false); } sortable._hideClone(); - return true; + cancel(); }, clone: function clone(_ref3) { var sortable = _ref3.sortable, rootEl = _ref3.rootEl, - dispatchSortableEvent = _ref3.dispatchSortableEvent; + dispatchSortableEvent = _ref3.dispatchSortableEvent, + cancel = _ref3.cancel; if (!this.isMultiDrag) return; - if (!sortable.options.removeCloneOnHide) { + if (!this.options.removeCloneOnHide) { if (multiDragElements.length && multiDragSortable === sortable) { insertMultiDragClones(true, rootEl); dispatchSortableEvent('clone'); - return true; + cancel(); } } }, showClone: function showClone(_ref4) { var cloneNowShown = _ref4.cloneNowShown, - rootEl = _ref4.rootEl; + rootEl = _ref4.rootEl, + cancel = _ref4.cancel; if (!this.isMultiDrag) return; insertMultiDragClones(false, rootEl); multiDragClones.forEach(function (clone) { @@ -3096,22 +3169,25 @@ function MultiDragPlugin() { }); cloneNowShown(); clonesHidden = false; - return true; + cancel(); }, hideClone: function hideClone(_ref5) { + var _this = this; + var sortable = _ref5.sortable, - cloneNowHidden = _ref5.cloneNowHidden; + cloneNowHidden = _ref5.cloneNowHidden, + cancel = _ref5.cancel; if (!this.isMultiDrag) return; multiDragClones.forEach(function (clone) { css(clone, 'display', 'none'); - if (sortable.options.removeCloneOnHide && clone.parentNode) { + if (_this.options.removeCloneOnHide && clone.parentNode) { clone.parentNode.removeChild(clone); } }); cloneNowHidden(); clonesHidden = true; - return true; + cancel(); }, dragStartGlobal: function dragStartGlobal(_ref6) { var sortable = _ref6.sortable; @@ -3130,10 +3206,12 @@ function MultiDragPlugin() { dragStarted = true; }, dragStarted: function dragStarted(_ref7) { + var _this2 = this; + var sortable = _ref7.sortable; if (!this.isMultiDrag) return; - if (sortable.options.sort) { + if (this.options.sort) { // Capture rects, // hide multi drag elements (by positioning them absolute), // set multi drag elements rects to dragRect, @@ -3142,7 +3220,7 @@ function MultiDragPlugin() { // unset rects & remove from DOM sortable.captureAnimationState(); - if (sortable.options.animation) { + if (this.options.animation) { multiDragElements.forEach(function (multiDragElement) { if (multiDragElement === dragEl$1) return; css(multiDragElement, 'position', 'absolute'); @@ -3161,24 +3239,26 @@ function MultiDragPlugin() { folding = false; initialFolding = false; - if (sortable.options.animation) { + if (_this2.options.animation) { multiDragElements.forEach(function (multiDragElement) { unsetRect(multiDragElement); }); } // Remove all auxiliary multidrag items from el, if sorting enabled - if (sortable.options.sort) { + if (_this2.options.sort) { removeMultiDragElements(); } }); }, dragOver: function dragOver(_ref8) { var target = _ref8.target, - completed = _ref8.completed; + completed = _ref8.completed, + cancel = _ref8.cancel; if (folding && ~multiDragElements.indexOf(target)) { - return completed(false); + completed(false); + cancel(); } }, revert: function revert(_ref9) { @@ -3199,7 +3279,7 @@ function MultiDragPlugin() { fromSortable.removeAnimationState(multiDragElement); }); folding = false; - insertMultiDragElements(!sortable.options.removeCloneOnHide, rootEl); + insertMultiDragElements(!this.options.removeCloneOnHide, rootEl); } }, dragOverCompleted: function dragOverCompleted(_ref10) { @@ -3209,7 +3289,7 @@ function MultiDragPlugin() { activeSortable = _ref10.activeSortable, parentEl = _ref10.parentEl, putSortable = _ref10.putSortable; - var options = sortable.options; + var options = this.options; if (insertion) { // Clones must be hidden before folding animation to capture dragRectAbsolute properly @@ -3292,7 +3372,7 @@ function MultiDragPlugin() { putSortable = _ref12.putSortable; var toSortable = putSortable || this.sortable; if (!evt) return; - var options = sortable.options, + var options = this.options, children = parentEl.children; // Multi-drag selection if (!dragStarted) { @@ -3312,32 +3392,32 @@ function MultiDragPlugin() { originalEvt: evt }); // Modifier activated, select from last to dragEl - if ((!options.multiDragKey || this.multiDragKeyDown) && evt.shiftKey && lastMultiDragSelect && sortable.el.contains(lastMultiDragSelect)) { + if (evt.shiftKey && lastMultiDragSelect && sortable.el.contains(lastMultiDragSelect)) { var lastIndex = index(lastMultiDragSelect), currentIndex = index(dragEl$1); if (~lastIndex && ~currentIndex && lastIndex !== currentIndex) { // Must include lastMultiDragSelect (select it), in case modified selection from no selection // (but previous selection existed) - var n, _i2; + var n, i; if (currentIndex > lastIndex) { - _i2 = lastIndex; + i = lastIndex; n = currentIndex; } else { - _i2 = currentIndex; + i = currentIndex; n = lastIndex + 1; } - for (; _i2 < n; _i2++) { - if (~multiDragElements.indexOf(children[_i2])) continue; - toggleClass(children[_i2], options.selectedClass, true); - multiDragElements.push(children[_i2]); + for (; i < n; i++) { + if (~multiDragElements.indexOf(children[i])) continue; + toggleClass(children[i], options.selectedClass, true); + multiDragElements.push(children[i]); dispatchEvent({ sortable: sortable, rootEl: rootEl, name: 'select', - targetEl: children[_i2], + targetEl: children[i], originalEvt: evt }); } @@ -3438,7 +3518,7 @@ function MultiDragPlugin() { this.isMultiDrag = dragStarted = false; multiDragClones.length = 0; }, - destroy: function destroy() { + destroyGlobal: function destroyGlobal() { this._deselectMultiDrag(); off(document, 'pointerup', this._deselectMultiDrag); @@ -3452,13 +3532,13 @@ function MultiDragPlugin() { if (multiDragSortable !== this.sortable) return; // Only deselect if target is not item in this sortable - if (evt && closest(evt.target, this.sortable.options.draggable, this.sortable.el, false)) return; // Only deselect if left click + if (evt && closest(evt.target, this.options.draggable, this.sortable.el, false)) return; // Only deselect if left click if (evt && evt.button !== 0) return; while (multiDragElements.length) { var el = multiDragElements[0]; - toggleClass(el, this.sortable.options.selectedClass, false); + toggleClass(el, this.options.selectedClass, false); multiDragElements.shift(); dispatchEvent({ sortable: this.sortable, @@ -3470,12 +3550,12 @@ function MultiDragPlugin() { } }, _checkKeyDown: function _checkKeyDown(evt) { - if (evt.key === this.sortable.options.multiDragKey) { + if (evt.key === this.options.multiDragKey) { this.multiDragKeyDown = true; } }, _checkKeyUp: function _checkKeyUp(evt) { - if (evt.key === this.sortable.options.multiDragKey) { + if (evt.key === this.options.multiDragKey) { this.multiDragKeyDown = false; } } @@ -3514,8 +3594,8 @@ function MultiDragPlugin() { multiDragElements.splice(index, 1); } }, - eventOptions: function eventOptions() { - var _this = this; + eventProperties: function eventProperties() { + var _this3 = this; var oldIndicies = [], newIndicies = []; @@ -3530,7 +3610,7 @@ function MultiDragPlugin() { if (folding && multiDragElement !== dragEl$1) { newIndex = -1; } else if (folding) { - newIndex = index(multiDragElement, ':not(.' + _this.options.selectedClass + ')'); + newIndex = index(multiDragElement, ':not(.' + _this3.options.selectedClass + ')'); } else { newIndex = index(multiDragElement); } @@ -3564,7 +3644,7 @@ function MultiDragPlugin() { } function insertMultiDragElements(clonesInserted, rootEl) { - multiDragElements.forEach(function (multiDragElement) { + multiDragElements.forEach(function (multiDragElement, i) { var target = rootEl.children[multiDragElement.sortableIndex + (clonesInserted ? Number(i) : 0)]; if (target) { @@ -3582,7 +3662,7 @@ function insertMultiDragElements(clonesInserted, rootEl) { function insertMultiDragClones(elementsInserted, rootEl) { - multiDragClones.forEach(function (clone) { + multiDragClones.forEach(function (clone, i) { var target = rootEl.children[clone.sortableIndex + (elementsInserted ? Number(i) : 0)]; if (target) { diff --git a/package.json b/package.json index 81b64e8f6..37104d28c 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "sortablejs", "exportName": "Sortable", - "version": "1.10.0-rc3", + "version": "1.10.0", "devDependencies": { "@babel/core": "^7.4.4", "@babel/plugin-transform-object-assign": "^7.2.0",