Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add option for reverting DOM modifications #2195

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Add option for reverting DOM modifications #2195

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fccf6e6
Add option for reverting DOM modifications
roy-mdr Aug 29, 2022
cee2ee7
Add MultiDrag Plugin support
roy-mdr Sep 10, 2022
279b5ff
Merge branch 'SortableJS:master' into master
roy-mdr Oct 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 6 additions & 3 deletions src/EventDispatcher.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]));
Expand All @@ -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;

Expand All @@ -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) {
Expand Down
143 changes: 129 additions & 14 deletions src/Sortable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,7 @@ function _dispatchEvent(info) {
oldDraggableIndex,
newIndex,
newDraggableIndex,
originalAllEventProperties,
...info
});
}
Expand All @@ -110,6 +111,8 @@ let dragEl,
activeGroup,
putSortable,

originalAllEventProperties,

awaitingDragStarted = false,
ignoreNextClick = false,
sortables = [],
Expand Down Expand Up @@ -358,6 +361,7 @@ function Sortable(el, options) {

let defaults = {
group: null,
revertDOM: false,
sort: true,
disabled: false,
store: null,
Expand Down Expand Up @@ -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
});

Expand All @@ -1440,42 +1503,94 @@ 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();
} else {
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
});

_dispatchEvent({
sortable: this,
name: 'sort',
toEl: parentEl,
toSortable: parentEl[expando],
originalEvent: evt
});
}
Expand Down