Use moveBefore when available to preserve DOM state

plugins/MultiDrag/MultiDrag.js

@@ -10,7 +10,8 @@ import {
 	setRect,
 	unsetRect,
 	matrix,
-	expando
+	expando,
+	insertOrMoveBefore
 } from '../../src/utils.js';
 
 import dispatchEvent from '../../src/EventDispatcher.js';
@@ -421,7 +422,7 @@ function MultiDragPlugin() {
 
 						multiDragElements.forEach(multiDragElement => {
 							if (children[multiDragIndex]) {
-								parentEl.insertBefore(multiDragElement, children[multiDragIndex]);
+								insertOrMoveBefore(parentEl, multiDragElement, children[multiDragIndex]);
 							} else {
 								parentEl.appendChild(multiDragElement);
 							}
@@ -600,7 +601,7 @@ function insertMultiDragElements(clonesInserted, rootEl) {
 	multiDragElements.forEach((multiDragElement, i) => {
 		let target = rootEl.children[multiDragElement.sortableIndex + (clonesInserted ? Number(i) : 0)];
 		if (target) {
-			rootEl.insertBefore(multiDragElement, target);
+			insertOrMoveBefore(rootEl, multiDragElement, target);
 		} else {
 			rootEl.appendChild(multiDragElement);
 		}
@@ -616,7 +617,7 @@ function insertMultiDragClones(elementsInserted, rootEl) {
 	multiDragClones.forEach((clone, i) => {
 		let target = rootEl.children[clone.sortableIndex + (elementsInserted ? Number(i) : 0)];
 		if (target) {
-			rootEl.insertBefore(clone, target);
+			insertOrMoveBefore(rootEl, clone, target);
 		} else {
 			rootEl.appendChild(clone);
 		}

plugins/OnSpill/OnSpill.js

@@ -1,4 +1,7 @@
-import { getChild } from '../../src/utils.js';
+import {
+	getChild,
+	insertOrMoveBefore
+} from '../../src/utils.js';
 
 
 const drop = function({
@@ -37,7 +40,7 @@ Revert.prototype = {
 		let nextSibling = getChild(this.sortable.el, this.startIndex, this.options);
 
 		if (nextSibling) {
-			this.sortable.el.insertBefore(dragEl, nextSibling);
+			insertOrMoveBefore(this.sortable.el, dragEl, nextSibling);
 		} else {
 			this.sortable.el.appendChild(dragEl);
 		}

plugins/Swap/Swap.js

@@ -1,6 +1,7 @@
 import {
 	toggleClass,
-	index
+	index,
+	insertOrMoveBefore
 } from '../../src/utils.js';
 
 let lastSwapEl;
@@ -83,8 +84,8 @@ function swapNodes(n1, n2) {
 	if (p1.isEqualNode(p2) && i1 < i2) {
 		i2++;
 	}
-	p1.insertBefore(n2, p1.children[i1]);
-	p2.insertBefore(n1, p2.children[i2]);
+	insertOrMoveBefore(p1, n2, p1.children[i1]);
+	insertOrMoveBefore(p2, n1, p2.children[i2]);
 }
 
 export default SwapPlugin;

src/Sortable.js

@@ -36,7 +36,8 @@ import {
 	clone,
 	expando,
 	getChildContainingRectFromElement,
-	getParentOrHost
+	getParentOrHost,
+	insertOrMoveBefore
 } from './utils.js';
 
 
@@ -957,7 +958,7 @@ Sortable.prototype = /** @lends Sortable.prototype */ {
 			if (Sortable.eventCanceled) return;
 
 			if (!_this.options.removeCloneOnHide) {
-				rootEl.insertBefore(cloneEl, dragEl);
+				insertOrMoveBefore(rootEl, cloneEl, dragEl);
 			}
 			_this._hideClone();
 
@@ -1176,7 +1177,7 @@ Sortable.prototype = /** @lends Sortable.prototype */ {
 
 				if (!Sortable.eventCanceled) {
 					if (nextEl) {
-						rootEl.insertBefore(dragEl, nextEl);
+						insertOrMoveBefore(rootEl, dragEl, nextEl);
 					} else {
 						rootEl.appendChild(dragEl);
 					}
@@ -1207,7 +1208,7 @@ Sortable.prototype = /** @lends Sortable.prototype */ {
 				if (onMove(rootEl, el, dragEl, dragRect, target, targetRect, evt, !!target) !== false) {
 					capture();
 					if (elLastChild && elLastChild.nextSibling) { // the last draggable element is not the last node
-						el.insertBefore(dragEl, elLastChild.nextSibling);
+						insertOrMoveBefore(el, dragEl, elLastChild.nextSibling);
 					}
 					else {
 						el.appendChild(dragEl);
@@ -1229,7 +1230,7 @@ Sortable.prototype = /** @lends Sortable.prototype */ {
 
 				if (onMove(rootEl, el, dragEl, dragRect, target, targetRect, evt, false) !== false) {
 					capture();
-					el.insertBefore(dragEl, firstChild);
+					insertOrMoveBefore(el, dragEl, firstChild);
 					parentEl = el; // actualization
 
 					changed();
@@ -1304,7 +1305,7 @@ Sortable.prototype = /** @lends Sortable.prototype */ {
 					if (after && !nextSibling) {
 						el.appendChild(dragEl);
 					} else {
-						target.parentNode.insertBefore(dragEl, after ? nextSibling : target);
+						insertOrMoveBefore(target.parentNode, dragEl, after ? nextSibling : target);
 					}
 
 					// Undo chrome's scroll adjustment (has no effect on other browsers)
@@ -1739,9 +1740,9 @@ Sortable.prototype = /** @lends Sortable.prototype */ {
 
 			// show clone at dragEl or original position
 			if (dragEl.parentNode == rootEl && !this.options.group.revertClone) {
-				rootEl.insertBefore(cloneEl, dragEl);
+				insertOrMoveBefore(rootEl, cloneEl, dragEl);
 			} else if (nextEl) {
-				rootEl.insertBefore(cloneEl, nextEl);
+				insertOrMoveBefore(rootEl, cloneEl, nextEl);
 			} else {
 				rootEl.appendChild(cloneEl);
 			}

src/utils.js

@@ -561,6 +561,17 @@ function getChildContainingRectFromElement(container, options, ghostEl) {
 
 const expando = 'Sortable' + (new Date).getTime();
 
+function insertOrMoveBefore(rootNode, movedNode, referenceNode) {
+	if (rootNode['moveBefore']) {
+		try {
+			rootNode.moveBefore(movedNode, referenceNode)
+		} catch (e) { // Could throw a HierarchyRequestError in some cases https://developer.mozilla.org/en-US/docs/Web/API/Element/moveBefore#movebefore_constraints
+			rootNode.insertBefore(movedNode, referenceNode)
+		}
+	} else {
+		rootNode.insertBefore(movedNode, referenceNode)
+	}
+}
 
 export {
 	on,
@@ -591,5 +602,6 @@ export {
 	unsetRect,
 	getContentRect,
 	getChildContainingRectFromElement,
-	expando
+	expando,
+	insertOrMoveBefore
 };