From 92c88d180c4360bd077fa4b6749cf0d475b2de41 Mon Sep 17 00:00:00 2001 From: kishtra Date: Mon, 30 May 2022 02:55:51 +0200 Subject: [PATCH 1/5] Fix SortableJS#1866 Swap plugin now cancels the swap when dragging an element over invalid drop targets. --- plugins/Swap/Swap.js | 75 +++++++++++++++++++++++++------------------- 1 file changed, 42 insertions(+), 33 deletions(-) diff --git a/plugins/Swap/Swap.js b/plugins/Swap/Swap.js index 3f0feb7dc..38f59c2ed 100644 --- a/plugins/Swap/Swap.js +++ b/plugins/Swap/Swap.js @@ -3,7 +3,7 @@ import { index } from '../../src/utils.js'; -let lastSwapEl; +let lastSwapValidEl; function SwapPlugin() { @@ -14,48 +14,57 @@ function SwapPlugin() { } Swap.prototype = { - dragStart({ dragEl }) { - lastSwapEl = dragEl; - }, - dragOverValid({ completed, target, onMove, activeSortable, changed, cancel }) { - if (!activeSortable.options.swap) return; + dragOver({ activeSortable, target, dragEl, onMove, completed, cancel }) { let el = this.sortable.el, options = this.options; - if (target && target !== el) { - let prevSwapEl = lastSwapEl; - if (onMove(target) !== false) { - toggleClass(target, options.swapClass, true); - lastSwapEl = target; - } else { - lastSwapEl = null; - } - - if (prevSwapEl && prevSwapEl !== lastSwapEl) { - toggleClass(prevSwapEl, options.swapClass, false); - } + + if (!activeSortable.options.swap || !target || target === el || target.contains(dragEl) || onMove(target) === false) { + lastSwapValidEl && toggleClass(lastSwapValidEl, options.swapClass, false); + lastSwapValidEl = null; + + completed(false); + cancel(); + } + }, + dragOverValid({ target, changed, completed, cancel }) { + let options = this.options; + + if (lastSwapValidEl && lastSwapValidEl !== target) { + toggleClass(lastSwapValidEl, options.swapClass, false); } + + toggleClass(target, options.swapClass, true); + lastSwapValidEl = target; + changed(); completed(true); cancel(); }, - drop({ activeSortable, putSortable, dragEl }) { - let toSortable = (putSortable || this.sortable); - let options = this.options; - lastSwapEl && toggleClass(lastSwapEl, options.swapClass, false); - if (lastSwapEl && (options.swap || putSortable && putSortable.options.swap)) { - if (dragEl !== lastSwapEl) { - toSortable.captureAnimationState(); - if (toSortable !== activeSortable) activeSortable.captureAnimationState(); - swapNodes(dragEl, lastSwapEl); - - toSortable.animateAll(); - if (toSortable !== activeSortable) activeSortable.animateAll(); - } + drop({ activeSortable, putSortable, dragEl, cancel }) { + let toSortable = putSortable || this.sortable, + options = this.options; + + if (!lastSwapValidEl) { + toggleClass(dragEl, options.ghostClass, false); + cancel(); + return + } + + toggleClass(lastSwapValidEl, options.swapClass, false); + + if (options.swap || putSortable && putSortable.options.swap) { + toSortable.captureAnimationState(); + if (toSortable !== activeSortable) activeSortable.captureAnimationState(); + + swapNodes(dragEl, lastSwapValidEl); + + toSortable.animateAll(); + if (toSortable !== activeSortable) activeSortable.animateAll(); } }, nulling() { - lastSwapEl = null; + lastSwapValidEl = null; } }; @@ -63,7 +72,7 @@ function SwapPlugin() { pluginName: 'swap', eventProperties() { return { - swapItem: lastSwapEl + swapItem: lastSwapValidEl }; } }); From a245450ec49857957cccbfc62f7675798b4aa745 Mon Sep 17 00:00:00 2001 From: kishtra Date: Tue, 31 May 2022 14:59:15 +0200 Subject: [PATCH 2/5] rename lastSwapValidEl -> swapValidEl --- plugins/Swap/Swap.js | 23 ++++++++++------------- 1 file changed, 10 insertions(+), 13 deletions(-) diff --git a/plugins/Swap/Swap.js b/plugins/Swap/Swap.js index 38f59c2ed..dc12bbb67 100644 --- a/plugins/Swap/Swap.js +++ b/plugins/Swap/Swap.js @@ -3,7 +3,7 @@ import { index } from '../../src/utils.js'; -let lastSwapValidEl; +let swapValidEl; function SwapPlugin() { @@ -19,8 +19,8 @@ function SwapPlugin() { options = this.options; if (!activeSortable.options.swap || !target || target === el || target.contains(dragEl) || onMove(target) === false) { - lastSwapValidEl && toggleClass(lastSwapValidEl, options.swapClass, false); - lastSwapValidEl = null; + swapValidEl && toggleClass(swapValidEl, options.swapClass, false); + swapValidEl = null; completed(false); cancel(); @@ -29,12 +29,9 @@ function SwapPlugin() { dragOverValid({ target, changed, completed, cancel }) { let options = this.options; - if (lastSwapValidEl && lastSwapValidEl !== target) { - toggleClass(lastSwapValidEl, options.swapClass, false); - } - + toggleClass(swapValidEl, options.swapClass, false); toggleClass(target, options.swapClass, true); - lastSwapValidEl = target; + swapValidEl = target; changed(); @@ -45,26 +42,26 @@ function SwapPlugin() { let toSortable = putSortable || this.sortable, options = this.options; - if (!lastSwapValidEl) { + if (!swapValidEl) { toggleClass(dragEl, options.ghostClass, false); cancel(); return } - toggleClass(lastSwapValidEl, options.swapClass, false); + toggleClass(swapValidEl, options.swapClass, false); if (options.swap || putSortable && putSortable.options.swap) { toSortable.captureAnimationState(); if (toSortable !== activeSortable) activeSortable.captureAnimationState(); - swapNodes(dragEl, lastSwapValidEl); + swapNodes(dragEl, swapValidEl); toSortable.animateAll(); if (toSortable !== activeSortable) activeSortable.animateAll(); } }, nulling() { - lastSwapValidEl = null; + swapValidEl = null; } }; @@ -72,7 +69,7 @@ function SwapPlugin() { pluginName: 'swap', eventProperties() { return { - swapItem: lastSwapValidEl + swapItem: swapValidEl }; } }); From 66638527a2bb923fa28a10f59370ab498330f706 Mon Sep 17 00:00:00 2001 From: kishtra Date: Tue, 31 May 2022 17:59:46 +0200 Subject: [PATCH 3/5] Add accidentally removed swapValidEl check --- plugins/Swap/Swap.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/plugins/Swap/Swap.js b/plugins/Swap/Swap.js index dc12bbb67..07d733e52 100644 --- a/plugins/Swap/Swap.js +++ b/plugins/Swap/Swap.js @@ -29,7 +29,10 @@ function SwapPlugin() { dragOverValid({ target, changed, completed, cancel }) { let options = this.options; - toggleClass(swapValidEl, options.swapClass, false); + if (swapValidEl && swapValidEl !== target) { + toggleClass(swapValidEl, options.swapClass, false); + } + toggleClass(target, options.swapClass, true); swapValidEl = target; From 89f43198da10a840282e3144d1f8672dbbc02ee1 Mon Sep 17 00:00:00 2001 From: kishtra Date: Tue, 7 Jun 2022 14:47:55 +0200 Subject: [PATCH 4/5] Remove canceling of _onDrop event --- plugins/Swap/Swap.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/plugins/Swap/Swap.js b/plugins/Swap/Swap.js index 07d733e52..928864776 100644 --- a/plugins/Swap/Swap.js +++ b/plugins/Swap/Swap.js @@ -45,11 +45,7 @@ function SwapPlugin() { let toSortable = putSortable || this.sortable, options = this.options; - if (!swapValidEl) { - toggleClass(dragEl, options.ghostClass, false); - cancel(); - return - } + if (!swapValidEl) return toggleClass(swapValidEl, options.swapClass, false); From 379459c76ef2ebfb1a3bc0aac670e35c8a89bcbc Mon Sep 17 00:00:00 2001 From: kishtra Date: Tue, 7 Jun 2022 15:26:54 +0200 Subject: [PATCH 5/5] Remove unused drop parameter Also, moved swapValidEl check at the beginning of drop event --- plugins/Swap/Swap.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/plugins/Swap/Swap.js b/plugins/Swap/Swap.js index 928864776..0ecfbb344 100644 --- a/plugins/Swap/Swap.js +++ b/plugins/Swap/Swap.js @@ -41,12 +41,12 @@ function SwapPlugin() { completed(true); cancel(); }, - drop({ activeSortable, putSortable, dragEl, cancel }) { + drop({ activeSortable, putSortable, dragEl }) { + if (!swapValidEl) return + let toSortable = putSortable || this.sortable, options = this.options; - if (!swapValidEl) return - toggleClass(swapValidEl, options.swapClass, false); if (options.swap || putSortable && putSortable.options.swap) {