diff --git a/src/EventDispatcher.js b/src/EventDispatcher.js index e47cb5809..cc7ee4310 100644 --- a/src/EventDispatcher.js +++ b/src/EventDispatcher.js @@ -5,10 +5,11 @@ import PluginManager from './PluginManager.js'; export default function dispatchEvent( { sortable, rootEl, name, - targetEl, cloneEl, toEl, fromEl, + targetEl, cloneEl, toEl, toSortable, fromEl, fromSortable, oldIndex, newIndex, oldDraggableIndex, newDraggableIndex, - originalEvent, putSortable, extraEventProperties + originalEvent, putSortable, extraEventProperties, + originalAllEventProperties } ) { sortable = (sortable || (rootEl && rootEl[expando])); @@ -29,7 +30,9 @@ export default function dispatchEvent( } evt.to = toEl || rootEl; + evt.toSortable = toSortable || undefined; evt.from = fromEl || rootEl; + evt.fromSortable = fromSortable || undefined; evt.item = targetEl || rootEl; evt.clone = cloneEl; @@ -44,7 +47,7 @@ export default function dispatchEvent( let allEventProperties = { ...extraEventProperties, ...PluginManager.getEventProperties(name, sortable) }; for (let option in allEventProperties) { - evt[option] = allEventProperties[option]; + evt[option] = originalAllEventProperties ? originalAllEventProperties[option] : allEventProperties[option]; } if (rootEl) { diff --git a/src/Sortable.js b/src/Sortable.js index 7a8c779b8..a9cc7a275 100644 --- a/src/Sortable.js +++ b/src/Sortable.js @@ -87,6 +87,7 @@ function _dispatchEvent(info) { oldDraggableIndex, newIndex, newDraggableIndex, + originalAllEventProperties, ...info }); } @@ -110,6 +111,8 @@ let dragEl, activeGroup, putSortable, + originalAllEventProperties, + awaitingDragStarted = false, ignoreNextClick = false, sortables = [], @@ -358,6 +361,7 @@ function Sortable(el, options) { let defaults = { group: null, + revertDOM: false, sort: true, disabled: false, store: null, @@ -1422,16 +1426,75 @@ Sortable.prototype = /** @lends Sortable.prototype */ { originalEvent: evt }); + const allEventProperties = PluginManager.getEventProperties(null, rootEl[expando]); + originalAllEventProperties = allEventProperties; if (rootEl !== parentEl) { if (newIndex >= 0) { + // drag from one list and drop into another + + /* ----- */ + + if (allEventProperties.hasOwnProperty("items") && allEventProperties.items.length > 0) { + // Multidrag Plugin + + if (parentEl[expando].options.revertDOM) { + // Remove added elements in new list + for (const el of allEventProperties.items) { + if (parentEl.contains(el)) { + parentEl.removeChild(el); + } + } + } + + if (rootEl[expando].options.revertDOM) { + // Return items back to original list + if (putSortable.lastPutMode === 'clone') { + for (const cl of allEventProperties.clones) { + if (rootEl.contains(cl)) { + rootEl.removeChild(cl); + } + } + } + + for (let m = 0; m < allEventProperties.items.length; m++) { + const multEl = allEventProperties.items[m]; + const prevIx = allEventProperties.oldIndicies[m].index; + if (!parentEl.contains(multEl)) { + rootEl.insertBefore(multEl, rootEl.children[prevIx]); + } + Sortable.utils.deselect(multEl); + } + } + + } else { + // Normal Sortable (Not Multidrag Plugin) + + if (parentEl[expando].options.revertDOM) { + // Remove added elements in new list + parentEl.removeChild(dragEl); + } + + if (rootEl[expando].options.revertDOM) { + // Return items back to original list + if (putSortable.lastPutMode === 'clone') { + rootEl.removeChild(cloneEl); + } + rootEl.insertBefore(dragEl, rootEl.children[oldIndex]); + } + } + + /* ----- */ + // Add event _dispatchEvent({ rootEl: parentEl, name: 'add', toEl: parentEl, + toSortable: parentEl[expando], fromEl: rootEl, + fromSortable: rootEl[expando], originalEvent: evt }); @@ -1440,24 +1503,31 @@ Sortable.prototype = /** @lends Sortable.prototype */ { sortable: this, name: 'remove', toEl: parentEl, + toSortable: parentEl[expando], originalEvent: evt }); - // drag from one list and drop into another - _dispatchEvent({ - rootEl: parentEl, - name: 'sort', - toEl: parentEl, - fromEl: rootEl, - originalEvent: evt - }); + if (!parentEl[expando].options.revertDOM) { + _dispatchEvent({ + rootEl: parentEl, + name: 'sort', + toEl: parentEl, + toSortable: parentEl[expando], + fromEl: rootEl, + fromSortable: rootEl[expando], + originalEvent: evt + }); + } - _dispatchEvent({ - sortable: this, - name: 'sort', - toEl: parentEl, - originalEvent: evt - }); + if (!rootEl[expando].options.revertDOM) { + _dispatchEvent({ + sortable: this, + name: 'sort', + toEl: parentEl, + toSortable: parentEl[expando], + originalEvent: evt + }); + } } putSortable && putSortable.save(); @@ -1465,10 +1535,54 @@ Sortable.prototype = /** @lends Sortable.prototype */ { if (newIndex !== oldIndex) { if (newIndex >= 0) { // drag & drop within the same list + + /* ----- */ + + if (allEventProperties.hasOwnProperty("items") && allEventProperties.items.length > 0) { + // Multidrag Plugin + + if (parentEl[expando].options.revertDOM) { + // Remove added elements in new list + for (const el of allEventProperties.items) { + if (parentEl.contains(el)) { + parentEl.removeChild(el); + } + } + } + + if (rootEl[expando].options.revertDOM) { + // Return items back to original list + for (let m = 0; m < allEventProperties.items.length; m++) { + const multEl = allEventProperties.items[m]; + const prevIx = allEventProperties.oldIndicies[m].index; + if (!parentEl.contains(multEl)) { + rootEl.insertBefore(multEl, rootEl.children[prevIx]); + } + Sortable.utils.deselect(multEl); + } + } + + } else { + // Normal Sortable (Not Multidrag Plugin) + + if (parentEl[expando].options.revertDOM) { + // Remove added elements in new list + parentEl.removeChild(dragEl); + } + + if (rootEl[expando].options.revertDOM) { + // Return items back to original list + rootEl.insertBefore(dragEl, rootEl.children[oldIndex]); + } + } + + /* ----- */ + _dispatchEvent({ sortable: this, name: 'update', toEl: parentEl, + toSortable: parentEl[expando], originalEvent: evt }); @@ -1476,6 +1590,7 @@ Sortable.prototype = /** @lends Sortable.prototype */ { sortable: this, name: 'sort', toEl: parentEl, + toSortable: parentEl[expando], originalEvent: evt }); }