diff --git a/src/Sortable/Sortable.js b/src/Sortable/Sortable.js index 6ff1b3d..a6ad067 100644 --- a/src/Sortable/Sortable.js +++ b/src/Sortable/Sortable.js @@ -41,15 +41,25 @@ export default class Sortable { return this; } + index(element) { + return [...element.parentNode.children].filter((childElement) => { + return childElement !== this.originalSource && childElement !== this.mirror; + }).indexOf(element); + } + _onDragStart(event) { - this.startIndex = index(event.source); + this.mirror = event.mirror; + this.originalSource = event.originalSource; + this.startContainer = event.source.parentNode; + this.startIndex = this.index(event.source); const sortableStartEvent = new SortableStartEvent({ dragEvent: event, startIndex: this.startIndex, + startContainer: this.startContainer, }); - this.draggable.trigger(sortableStartEvent); + this.draggable.triggerEvent(sortableStartEvent); if (sortableStartEvent.canceled()) { event.cancel(); @@ -61,15 +71,24 @@ export default class Sortable { return; } - const moves = move(event.source, event.over, event.overContainer); + const {source, over, overContainer} = event; + const oldIndex = this.index(source); + + const moves = move(source, over, overContainer); if (!moves) { return; } + const {oldContainer, newContainer} = moves; + const newIndex = this.index(event.source); + const sortableSortedEvent = new SortableSortedEvent({ dragEvent: event, - moves, + oldIndex, + newIndex, + oldContainer, + newContainer, }); this.draggable.triggerEvent(sortableSortedEvent); @@ -80,15 +99,24 @@ export default class Sortable { return; } - const moves = move(event.source, event.over, event.overContainer); + const {source, over, overContainer} = event; + const oldIndex = this.index(source); + + const moves = move(source, over, overContainer); if (!moves) { return; } + const {oldContainer, newContainer} = moves; + const newIndex = this.index(source); + const sortableSortedEvent = new SortableSortedEvent({ dragEvent: event, - moves, + oldIndex, + newIndex, + oldContainer, + newContainer, }); this.draggable.triggerEvent(sortableSortedEvent); @@ -98,13 +126,17 @@ export default class Sortable { const sortableStopEvent = new SortableStopEvent({ dragEvent: event, oldIndex: this.startIndex, - newIndex: index(event.source), + newIndex: this.index(event.source), + oldContainer: this.startContainer, + newContainer: event.source.parentNode, }); this.draggable.triggerEvent(sortableStopEvent); this.startIndex = null; - this.offset = null; + this.startContainer = null; + this.originalSource = null; + this.mirror = null; } } @@ -130,11 +162,10 @@ function move(source, over, overContainer) { function moveInsideEmptyContainer(source, overContainer) { const oldContainer = source.parentNode; - const oldIndex = index(source); overContainer.appendChild(source); - return {oldIndex, newIndex: index(source), oldContainer, newContainer: overContainer}; + return {oldContainer, newContainer: overContainer}; } function moveWithinContainer(source, over) { @@ -147,15 +178,13 @@ function moveWithinContainer(source, over) { source.parentNode.insertBefore(source, over); } - return {oldIndex, newIndex, oldContainer: source.parentNode, newContainer: source.parentNode}; + return {oldContainer: source.parentNode, newContainer: source.parentNode}; } function moveOutsideContainer(source, over) { const oldContainer = source.parentNode; - const oldIndex = index(source); - const newIndex = index(over); over.parentNode.insertBefore(source, over); - return {oldIndex, newIndex, oldContainer, newContainer: source.parentNode}; + return {oldContainer, newContainer: source.parentNode}; } diff --git a/src/Sortable/SortableEvent/SortableEvent.js b/src/Sortable/SortableEvent/SortableEvent.js index 4f63b67..ee5bd74 100644 --- a/src/Sortable/SortableEvent/SortableEvent.js +++ b/src/Sortable/SortableEvent/SortableEvent.js @@ -12,6 +12,10 @@ export class SortableStartEvent extends SortableEvent { get startIndex() { return this.data.startIndex; } + + get startContainer() { + return this.data.startContainer; + } } export class SortableSortedEvent extends SortableEvent { @@ -20,6 +24,22 @@ export class SortableSortedEvent extends SortableEvent { get moves() { return this.data.moves; } + + get oldIndex() { + return this.data.oldIndex; + } + + get newIndex() { + return this.data.newIndex; + } + + get oldContainer() { + return this.data.oldContainer; + } + + get newContainer() { + return this.data.newContainer; + } } export class SortableStopEvent extends SortableEvent { @@ -32,4 +52,12 @@ export class SortableStopEvent extends SortableEvent { get newIndex() { return this.data.newIndex; } + + get oldContainer() { + return this.data.oldContainer; + } + + get newContainer() { + return this.data.newContainer; + } }