diff --git a/plugins/MultiDrag/MultiDrag.js b/plugins/MultiDrag/MultiDrag.js index 672a38aef..aec3eafdb 100644 --- a/plugins/MultiDrag/MultiDrag.js +++ b/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); } diff --git a/plugins/OnSpill/OnSpill.js b/plugins/OnSpill/OnSpill.js index e8c6439d9..df87e09ee 100644 --- a/plugins/OnSpill/OnSpill.js +++ b/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); } diff --git a/plugins/Swap/Swap.js b/plugins/Swap/Swap.js index 3f0feb7dc..b70746a11 100644 --- a/plugins/Swap/Swap.js +++ b/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; diff --git a/src/Sortable.js b/src/Sortable.js index 47761808e..9481c268a 100644 --- a/src/Sortable.js +++ b/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); } diff --git a/src/utils.js b/src/utils.js index 43112a4d3..580269ac3 100644 --- a/src/utils.js +++ b/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 };