Skip to content

Commit

Permalink
#1472: Added oldDraggableIndex + newDraggableIndex
Browse files Browse the repository at this point in the history
  • Loading branch information
@MGelinas1 @owen-m1
MGelinas1 authored and owen-m1 committed Apr 8, 2019
1 parent 4836502 commit 4ca519e
Show file tree
Hide file tree
Showing 2 changed files with 49 additions and 23 deletions.
4 changes: 4 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,6 +146,8 @@ var sortable = new Sortable(el, {
evt.from; // previous list
evt.oldIndex; // element's old index within old parent
evt.newIndex; // element's new index within new parent
evt.oldDraggableIndex; // element's old index within old parent, only counting draggable elements
evt.newDraggableIndex; // element's new index within new parent, only counting draggable elements
evt.clone // the clone element
evt.pullMode; // when item is in another sortable: `"clone"` if cloning, `true` if moving
},
Expand Down Expand Up @@ -531,6 +533,8 @@ Demo: https://jsbin.com/becavoj/edit?js,output
- clone:`HTMLElement`
- oldIndex:`Number|undefined` — old index within parent
- newIndex:`Number|undefined` — new index within parent
- oldDraggableIndex: `Number|undefined` — old index within parent, only counting draggable elements
- newDraggableIndex: `Number|undefined` — new index within parent, only counting draggable elements
- pullMode:`String|Boolean|undefined` — Pull mode if dragging into another sortable (`"clone"`, `true`, or `false`), otherwise undefined


Expand Down
68 changes: 45 additions & 23 deletions Sortable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,8 @@

oldIndex,
newIndex,
oldDraggableIndex,
newDraggableIndex,

activeGroup,
putSortable,
Expand Down Expand Up @@ -633,7 +635,8 @@
target = (touch || evt).target,
originalTarget = evt.target.shadowRoot && ((evt.path && evt.path[0]) || (evt.composedPath && evt.composedPath()[0])) || target,
filter = options.filter,
startIndex;
startIndex,
startDraggableIndex;

_saveInputCheckedState(el);

Expand All @@ -660,12 +663,13 @@
}

// Get the index of the dragged element within its parent
startIndex = _index(target, options.draggable);
startIndex = _index(target);
startDraggableIndex = _index(target, options.draggable);

// Check filter
if (typeof filter === 'function') {
if (filter.call(this, evt, target, this)) {
_dispatchEvent(_this, originalTarget, 'filter', target, el, el, startIndex);
_dispatchEvent(_this, originalTarget, 'filter', target, el, el, startIndex, undefined, startDraggableIndex);
preventOnFilter && evt.cancelable && evt.preventDefault();
return; // cancel dnd
}
Expand All @@ -675,7 +679,7 @@
criteria = _closest(originalTarget, criteria.trim(), el, false);

if (criteria) {
_dispatchEvent(_this, criteria, 'filter', target, el, el, startIndex);
_dispatchEvent(_this, criteria, 'filter', target, el, el, startIndex, undefined, startDraggableIndex);
return true;
}
});
Expand All @@ -691,7 +695,7 @@
}

// Prepare `dragstart`
this._prepareDragStart(evt, touch, target, startIndex);
this._prepareDragStart(evt, touch, target, startIndex, startDraggableIndex);
},


Expand Down Expand Up @@ -747,7 +751,7 @@
}
},

_prepareDragStart: function (/** Event */evt, /** Touch */touch, /** HTMLElement */target, /** Number */startIndex) {
_prepareDragStart: function (/** Event */evt, /** Touch */touch, /** HTMLElement */target, /** Number */startIndex, /** Number */startDraggableIndex) {
var _this = this,
el = _this.el,
options = _this.options,
Expand All @@ -762,6 +766,7 @@
lastDownEl = target;
activeGroup = options.group;
oldIndex = startIndex;
oldDraggableIndex = startDraggableIndex;

tapEvt = {
target: dragEl,
Expand Down Expand Up @@ -790,7 +795,7 @@
_this._triggerDragStart(evt, touch);

// Drag start event
_dispatchEvent(_this, rootEl, 'choose', dragEl, rootEl, rootEl, oldIndex);
_dispatchEvent(_this, rootEl, 'choose', dragEl, rootEl, rootEl, oldIndex, undefined, oldDraggableIndex);

// Chosen item
_toggleClass(dragEl, options.chosenClass, true);
Expand Down Expand Up @@ -914,7 +919,7 @@
fallback && this._appendGhost();

// Drag start event
_dispatchEvent(this, rootEl, 'start', dragEl, rootEl, rootEl, oldIndex, undefined, evt);
_dispatchEvent(this, rootEl, 'start', dragEl, rootEl, rootEl, oldIndex, undefined, oldDraggableIndex, undefined, evt);
} else {
this._nulling();
}
Expand Down Expand Up @@ -1189,7 +1194,7 @@

// Call when dragEl has been inserted
function changed() {
_dispatchEvent(_this, rootEl, 'change', target, el, rootEl, oldIndex, _index(dragEl, options.draggable), evt);
_dispatchEvent(_this, rootEl, 'change', target, el, rootEl, oldIndex, _index(dragEl), oldDraggableIndex, _index(dragEl, options.draggable), evt);
}


Expand All @@ -1203,7 +1208,7 @@
target = _closest(target, options.draggable, el, true);

// target is dragEl or target is animated
if (!!_closest(evt.target, null, dragEl, true) || target.animated) {
if (dragEl.contains(evt.target) || target.animated) {
return completed(false);
}

Expand Down Expand Up @@ -1493,34 +1498,36 @@
_toggleClass(dragEl, this.options.chosenClass, false);

// Drag stop event
_dispatchEvent(this, rootEl, 'unchoose', dragEl, parentEl, rootEl, oldIndex, null, evt);
_dispatchEvent(this, rootEl, 'unchoose', dragEl, parentEl, rootEl, oldIndex, null, oldDraggableIndex, null, evt);

if (rootEl !== parentEl) {
newIndex = _index(dragEl, options.draggable);
newIndex = _index(dragEl);
newDraggableIndex = _index(dragEl, options.draggable);

if (newIndex >= 0) {
// Add event
_dispatchEvent(null, parentEl, 'add', dragEl, parentEl, rootEl, oldIndex, newIndex, evt);
_dispatchEvent(null, parentEl, 'add', dragEl, parentEl, rootEl, oldIndex, newIndex, oldDraggableIndex, newDraggableIndex, evt);

// Remove event
_dispatchEvent(this, rootEl, 'remove', dragEl, parentEl, rootEl, oldIndex, newIndex, evt);
_dispatchEvent(this, rootEl, 'remove', dragEl, parentEl, rootEl, oldIndex, newIndex, oldDraggableIndex, newDraggableIndex, evt);

// drag from one list and drop into another
_dispatchEvent(null, parentEl, 'sort', dragEl, parentEl, rootEl, oldIndex, newIndex, evt);
_dispatchEvent(this, rootEl, 'sort', dragEl, parentEl, rootEl, oldIndex, newIndex, evt);
_dispatchEvent(null, parentEl, 'sort', dragEl, parentEl, rootEl, oldIndex, newIndex, oldDraggableIndex, newDraggableIndex, evt);
_dispatchEvent(this, rootEl, 'sort', dragEl, parentEl, rootEl, oldIndex, newIndex, oldDraggableIndex, newDraggableIndex, evt);
}

putSortable && putSortable.save();
}
else {
if (dragEl.nextSibling !== nextEl) {
// Get the index of the dragged element within its parent
newIndex = _index(dragEl, options.draggable);
newIndex = _index(dragEl);
newDraggableIndex = _index(dragEl, options.draggable);

if (newIndex >= 0) {
// drag & drop within the same list
_dispatchEvent(this, rootEl, 'update', dragEl, parentEl, rootEl, oldIndex, newIndex, evt);
_dispatchEvent(this, rootEl, 'sort', dragEl, parentEl, rootEl, oldIndex, newIndex, evt);
_dispatchEvent(this, rootEl, 'update', dragEl, parentEl, rootEl, oldIndex, newIndex, oldDraggableIndex, newDraggableIndex, evt);
_dispatchEvent(this, rootEl, 'sort', dragEl, parentEl, rootEl, oldIndex, newIndex, oldDraggableIndex, newDraggableIndex, evt);
}
}
}
Expand All @@ -1529,8 +1536,9 @@
/* jshint eqnull:true */
if (newIndex == null || newIndex === -1) {
newIndex = oldIndex;
newDraggableIndex = oldDraggableIndex;
}
_dispatchEvent(this, rootEl, 'end', dragEl, parentEl, rootEl, oldIndex, newIndex, evt);
_dispatchEvent(this, rootEl, 'end', dragEl, parentEl, rootEl, oldIndex, newIndex, oldDraggableIndex, newDraggableIndex, evt);

// Save sorting
this.save();
Expand Down Expand Up @@ -1763,7 +1771,8 @@
if (
selector != null &&
(
selector[0] === '>' && el.parentNode === ctx && _matches(el, selector.substring(1)) ||
selector[0] === '>' ?
el.parentNode === ctx && _matches(el, selector) :
_matches(el, selector)
) ||
includeCTX && el === ctx
Expand Down Expand Up @@ -1881,7 +1890,13 @@



function _dispatchEvent(sortable, rootEl, name, targetEl, toEl, fromEl, startIndex, newIndex, originalEvt) {
function _dispatchEvent(
sortable, rootEl, name,
targetEl, toEl, fromEl,
startIndex, newIndex,
startDraggableIndex, newDraggableIndex,
originalEvt
) {
sortable = (sortable || rootEl[expando]);
var evt,
options = sortable.options,
Expand All @@ -1905,6 +1920,9 @@
evt.oldIndex = startIndex;
evt.newIndex = newIndex;

evt.oldDraggableIndex = startDraggableIndex;
evt.newDraggableIndex = newDraggableIndex;

evt.originalEvent = originalEvt;
evt.pullMode = putSortable ? putSortable.lastPutMode : undefined;

Expand Down Expand Up @@ -2149,7 +2167,7 @@
}

while (el && (el = el.previousElementSibling)) {
if ((el.nodeName.toUpperCase() !== 'TEMPLATE') && el !== cloneEl) {
if ((el.nodeName.toUpperCase() !== 'TEMPLATE') && el !== cloneEl && (!selector || _matches(el, selector))) {
index++;
}
}
Expand All @@ -2158,6 +2176,10 @@
}

function _matches(/**HTMLElement*/el, /**String*/selector) {
if (!selector) return;

selector[0] === '>' && (selector = selector.substring(1));

if (el) {
try {
if (el.matches) {
Expand Down

0 comments on commit 4ca519e

Please sign in to comment.