Skip to content

Commit 4ca519e

Browse files
MGelinas1owen-m1
MGelinas1
authored and
owen-m1
committed
#1472: Added oldDraggableIndex + newDraggableIndex
1 parent 4836502 commit 4ca519e

File tree

2 files changed

+49
-23
lines changed

2 files changed

+49
-23
lines changed

‎README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -146,6 +146,8 @@ var sortable = new Sortable(el, {
146146
evt.from; // previous list
147147
evt.oldIndex; // element's old index within old parent
148148
evt.newIndex; // element's new index within new parent
149+
evt.oldDraggableIndex; // element's old index within old parent, only counting draggable elements
150+
evt.newDraggableIndex; // element's new index within new parent, only counting draggable elements
149151
evt.clone // the clone element
150152
evt.pullMode; // when item is in another sortable: `"clone"` if cloning, `true` if moving
151153
},
@@ -531,6 +533,8 @@ Demo: https://jsbin.com/becavoj/edit?js,output
531533
- clone:`HTMLElement`
532534
- oldIndex:`Number|undefined` — old index within parent
533535
- newIndex:`Number|undefined` — new index within parent
536+
- oldDraggableIndex: `Number|undefined` — old index within parent, only counting draggable elements
537+
- newDraggableIndex: `Number|undefined` — new index within parent, only counting draggable elements
534538
- pullMode:`String|Boolean|undefined` — Pull mode if dragging into another sortable (`"clone"`, `true`, or `false`), otherwise undefined
535539

536540

‎Sortable.js‎

Lines changed: 45 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,8 @@
4141

4242
oldIndex,
4343
newIndex,
44+
oldDraggableIndex,
45+
newDraggableIndex,
4446

4547
activeGroup,
4648
putSortable,
@@ -633,7 +635,8 @@
633635
target = (touch || evt).target,
634636
originalTarget = evt.target.shadowRoot && ((evt.path && evt.path[0]) || (evt.composedPath && evt.composedPath()[0])) || target,
635637
filter = options.filter,
636-
startIndex;
638+
startIndex,
639+
startDraggableIndex;
637640

638641
_saveInputCheckedState(el);
639642

@@ -660,12 +663,13 @@
660663
}
661664

662665
// Get the index of the dragged element within its parent
663-
startIndex = _index(target, options.draggable);
666+
startIndex = _index(target);
667+
startDraggableIndex = _index(target, options.draggable);
664668

665669
// Check filter
666670
if (typeof filter === 'function') {
667671
if (filter.call(this, evt, target, this)) {
668-
_dispatchEvent(_this, originalTarget, 'filter', target, el, el, startIndex);
672+
_dispatchEvent(_this, originalTarget, 'filter', target, el, el, startIndex, undefined, startDraggableIndex);
669673
preventOnFilter && evt.cancelable && evt.preventDefault();
670674
return; // cancel dnd
671675
}
@@ -675,7 +679,7 @@
675679
criteria = _closest(originalTarget, criteria.trim(), el, false);
676680

677681
if (criteria) {
678-
_dispatchEvent(_this, criteria, 'filter', target, el, el, startIndex);
682+
_dispatchEvent(_this, criteria, 'filter', target, el, el, startIndex, undefined, startDraggableIndex);
679683
return true;
680684
}
681685
});
@@ -691,7 +695,7 @@
691695
}
692696

693697
// Prepare `dragstart`
694-
this._prepareDragStart(evt, touch, target, startIndex);
698+
this._prepareDragStart(evt, touch, target, startIndex, startDraggableIndex);
695699
},
696700

697701

@@ -747,7 +751,7 @@
747751
}
748752
},
749753

750-
_prepareDragStart: function (/** Event */evt, /** Touch */touch, /** HTMLElement */target, /** Number */startIndex) {
754+
_prepareDragStart: function (/** Event */evt, /** Touch */touch, /** HTMLElement */target, /** Number */startIndex, /** Number */startDraggableIndex) {
751755
var _this = this,
752756
el = _this.el,
753757
options = _this.options,
@@ -762,6 +766,7 @@
762766
lastDownEl = target;
763767
activeGroup = options.group;
764768
oldIndex = startIndex;
769+
oldDraggableIndex = startDraggableIndex;
765770

766771
tapEvt = {
767772
target: dragEl,
@@ -790,7 +795,7 @@
790795
_this._triggerDragStart(evt, touch);
791796

792797
// Drag start event
793-
_dispatchEvent(_this, rootEl, 'choose', dragEl, rootEl, rootEl, oldIndex);
798+
_dispatchEvent(_this, rootEl, 'choose', dragEl, rootEl, rootEl, oldIndex, undefined, oldDraggableIndex);
794799

795800
// Chosen item
796801
_toggleClass(dragEl, options.chosenClass, true);
@@ -914,7 +919,7 @@
914919
fallback && this._appendGhost();
915920

916921
// Drag start event
917-
_dispatchEvent(this, rootEl, 'start', dragEl, rootEl, rootEl, oldIndex, undefined, evt);
922+
_dispatchEvent(this, rootEl, 'start', dragEl, rootEl, rootEl, oldIndex, undefined, oldDraggableIndex, undefined, evt);
918923
} else {
919924
this._nulling();
920925
}
@@ -1189,7 +1194,7 @@
11891194

11901195
// Call when dragEl has been inserted
11911196
function changed() {
1192-
_dispatchEvent(_this, rootEl, 'change', target, el, rootEl, oldIndex, _index(dragEl, options.draggable), evt);
1197+
_dispatchEvent(_this, rootEl, 'change', target, el, rootEl, oldIndex, _index(dragEl), oldDraggableIndex, _index(dragEl, options.draggable), evt);
11931198
}
11941199

11951200

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

12051210
// target is dragEl or target is animated
1206-
if (!!_closest(evt.target, null, dragEl, true) || target.animated) {
1211+
if (dragEl.contains(evt.target) || target.animated) {
12071212
return completed(false);
12081213
}
12091214

@@ -1493,34 +1498,36 @@
14931498
_toggleClass(dragEl, this.options.chosenClass, false);
14941499

14951500
// Drag stop event
1496-
_dispatchEvent(this, rootEl, 'unchoose', dragEl, parentEl, rootEl, oldIndex, null, evt);
1501+
_dispatchEvent(this, rootEl, 'unchoose', dragEl, parentEl, rootEl, oldIndex, null, oldDraggableIndex, null, evt);
14971502

14981503
if (rootEl !== parentEl) {
1499-
newIndex = _index(dragEl, options.draggable);
1504+
newIndex = _index(dragEl);
1505+
newDraggableIndex = _index(dragEl, options.draggable);
15001506

15011507
if (newIndex >= 0) {
15021508
// Add event
1503-
_dispatchEvent(null, parentEl, 'add', dragEl, parentEl, rootEl, oldIndex, newIndex, evt);
1509+
_dispatchEvent(null, parentEl, 'add', dragEl, parentEl, rootEl, oldIndex, newIndex, oldDraggableIndex, newDraggableIndex, evt);
15041510

15051511
// Remove event
1506-
_dispatchEvent(this, rootEl, 'remove', dragEl, parentEl, rootEl, oldIndex, newIndex, evt);
1512+
_dispatchEvent(this, rootEl, 'remove', dragEl, parentEl, rootEl, oldIndex, newIndex, oldDraggableIndex, newDraggableIndex, evt);
15071513

15081514
// drag from one list and drop into another
1509-
_dispatchEvent(null, parentEl, 'sort', dragEl, parentEl, rootEl, oldIndex, newIndex, evt);
1510-
_dispatchEvent(this, rootEl, 'sort', dragEl, parentEl, rootEl, oldIndex, newIndex, evt);
1515+
_dispatchEvent(null, parentEl, 'sort', dragEl, parentEl, rootEl, oldIndex, newIndex, oldDraggableIndex, newDraggableIndex, evt);
1516+
_dispatchEvent(this, rootEl, 'sort', dragEl, parentEl, rootEl, oldIndex, newIndex, oldDraggableIndex, newDraggableIndex, evt);
15111517
}
15121518

15131519
putSortable && putSortable.save();
15141520
}
15151521
else {
15161522
if (dragEl.nextSibling !== nextEl) {
15171523
// Get the index of the dragged element within its parent
1518-
newIndex = _index(dragEl, options.draggable);
1524+
newIndex = _index(dragEl);
1525+
newDraggableIndex = _index(dragEl, options.draggable);
15191526

15201527
if (newIndex >= 0) {
15211528
// drag & drop within the same list
1522-
_dispatchEvent(this, rootEl, 'update', dragEl, parentEl, rootEl, oldIndex, newIndex, evt);
1523-
_dispatchEvent(this, rootEl, 'sort', dragEl, parentEl, rootEl, oldIndex, newIndex, evt);
1529+
_dispatchEvent(this, rootEl, 'update', dragEl, parentEl, rootEl, oldIndex, newIndex, oldDraggableIndex, newDraggableIndex, evt);
1530+
_dispatchEvent(this, rootEl, 'sort', dragEl, parentEl, rootEl, oldIndex, newIndex, oldDraggableIndex, newDraggableIndex, evt);
15241531
}
15251532
}
15261533
}
@@ -1529,8 +1536,9 @@
15291536
/* jshint eqnull:true */
15301537
if (newIndex == null || newIndex === -1) {
15311538
newIndex = oldIndex;
1539+
newDraggableIndex = oldDraggableIndex;
15321540
}
1533-
_dispatchEvent(this, rootEl, 'end', dragEl, parentEl, rootEl, oldIndex, newIndex, evt);
1541+
_dispatchEvent(this, rootEl, 'end', dragEl, parentEl, rootEl, oldIndex, newIndex, oldDraggableIndex, newDraggableIndex, evt);
15341542

15351543
// Save sorting
15361544
this.save();
@@ -1763,7 +1771,8 @@
17631771
if (
17641772
selector != null &&
17651773
(
1766-
selector[0] === '>' && el.parentNode === ctx && _matches(el, selector.substring(1)) ||
1774+
selector[0] === '>' ?
1775+
el.parentNode === ctx && _matches(el, selector) :
17671776
_matches(el, selector)
17681777
) ||
17691778
includeCTX && el === ctx
@@ -1881,7 +1890,13 @@
18811890

18821891

18831892

1884-
function _dispatchEvent(sortable, rootEl, name, targetEl, toEl, fromEl, startIndex, newIndex, originalEvt) {
1893+
function _dispatchEvent(
1894+
sortable, rootEl, name,
1895+
targetEl, toEl, fromEl,
1896+
startIndex, newIndex,
1897+
startDraggableIndex, newDraggableIndex,
1898+
originalEvt
1899+
) {
18851900
sortable = (sortable || rootEl[expando]);
18861901
var evt,
18871902
options = sortable.options,
@@ -1905,6 +1920,9 @@
19051920
evt.oldIndex = startIndex;
19061921
evt.newIndex = newIndex;
19071922

1923+
evt.oldDraggableIndex = startDraggableIndex;
1924+
evt.newDraggableIndex = newDraggableIndex;
1925+
19081926
evt.originalEvent = originalEvt;
19091927
evt.pullMode = putSortable ? putSortable.lastPutMode : undefined;
19101928

@@ -2149,7 +2167,7 @@
21492167
}
21502168

21512169
while (el && (el = el.previousElementSibling)) {
2152-
if ((el.nodeName.toUpperCase() !== 'TEMPLATE') && el !== cloneEl) {
2170+
if ((el.nodeName.toUpperCase() !== 'TEMPLATE') && el !== cloneEl && (!selector || _matches(el, selector))) {
21532171
index++;
21542172
}
21552173
}
@@ -2158,6 +2176,10 @@
21582176
}
21592177

21602178
function _matches(/**HTMLElement*/el, /**String*/selector) {
2179+
if (!selector) return;
2180+
2181+
selector[0] === '>' && (selector = selector.substring(1));
2182+
21612183
if (el) {
21622184
try {
21632185
if (el.matches) {

0 commit comments

Comments
 (0)