From c7a18c5785ea475827569c041803bbc828e0ec8c Mon Sep 17 00:00:00 2001 From: Henrique Ramos Date: Sun, 26 Jun 2022 15:49:56 -0300 Subject: [PATCH 1/2] feat: make dragStopEvent cancellable --- src/Draggable/DragEvent/DragEvent.js | 1 + src/Draggable/DragEvent/README.md | 14 +++++++------- src/Draggable/Draggable.js | 14 +++++++------- 3 files changed, 15 insertions(+), 14 deletions(-) diff --git a/src/Draggable/DragEvent/DragEvent.js b/src/Draggable/DragEvent/DragEvent.js index 289c675..899ca23 100644 --- a/src/Draggable/DragEvent/DragEvent.js +++ b/src/Draggable/DragEvent/DragEvent.js @@ -224,6 +224,7 @@ export class DragPressureEvent extends DragEvent { */ export class DragStopEvent extends DragEvent { static type = 'drag:stop'; + static cancelable = true; } /** diff --git a/src/Draggable/DragEvent/README.md b/src/Draggable/DragEvent/README.md index f6fc0ac..64bee29 100644 --- a/src/Draggable/DragEvent/README.md +++ b/src/Draggable/DragEvent/README.md @@ -156,13 +156,13 @@ Read-only property for pressure applied on a draggable element. Value ranges fro `DragStopEvent` gets triggered after `DragStartEvent`, once drag interactions have completed. -| | | -| ----------------- | --------------- | -| **Specification** | `DragEvent` | -| **Interface** | `DragStopEvent` | -| **Cancelable** | false | -| **Cancel action** | - | -| **type** | `drag:stop` | +| | | +| ----------------- | -------------------------------------------------- | +| **Specification** | `DragEvent` | +| **Interface** | `DragStopEvent` | +| **Cancelable** | true | +| **Cancel action** | Prevent item from being added where it was dropped | +| **type** | `drag:stop` | ## DragStoppedEvent diff --git a/src/Draggable/Draggable.js b/src/Draggable/Draggable.js index 1fd39ca..f0913ea 100644 --- a/src/Draggable/Draggable.js +++ b/src/Draggable/Draggable.js @@ -420,19 +420,19 @@ export default class Draggable { this.originalSource.parentNode.insertBefore(this.source, this.originalSource); this.originalSource.style.display = 'none'; - const dragEvent = new DragStartEvent({ + const dragStartEvent = new DragStartEvent({ source: this.source, originalSource: this.originalSource, sourceContainer: container, sensorEvent, }); - this.trigger(dragEvent); + this.trigger(dragStartEvent); - this.dragging = !dragEvent.canceled(); + this.dragging = !dragStartEvent.canceled(); - if (dragEvent.canceled()) { - this.source.parentNode.removeChild(this.source); + if (dragStartEvent.canceled()) { + this.source.remove(); this.originalSource.style.display = null; return; } @@ -575,8 +575,8 @@ export default class Draggable { this.trigger(dragStopEvent); - this.source.parentNode.insertBefore(this.originalSource, this.source); - this.source.parentNode.removeChild(this.source); + if (!dragStopEvent.canceled()) this.source.parentNode.insertBefore(this.originalSource, this.source); + this.source.remove(); this.originalSource.style.display = ''; this.source.classList.remove(...this.getClassNamesFor('source:dragging')); From 6492a00f605e6be9ed9e1d1f1d01aa0082043924 Mon Sep 17 00:00:00 2001 From: Henrique Ramos Date: Sun, 26 Jun 2022 15:50:41 -0300 Subject: [PATCH 2/2] chore: replace Node.parentNode.removeChildren(Node) by Node.remove() --- src/Draggable/Plugins/Focusable/tests/Focusable.test.js | 2 +- src/Draggable/Plugins/Mirror/Mirror.js | 2 +- src/Draggable/Plugins/Mirror/tests/Mirror.test.js | 2 +- src/Draggable/Sensors/DragSensor/tests/DragSensor.test.js | 2 +- src/Draggable/Sensors/MouseSensor/tests/MouseSensor.test.js | 2 +- src/Draggable/Sensors/TouchSensor/tests/TouchSensor.test.js | 2 +- src/Draggable/tests/Draggable.test.js | 2 +- src/Droppable/tests/Droppable.test.js | 2 +- src/Plugins/ResizeMirror/tests/ResizeMirror.test.js | 2 +- src/Sortable/tests/Sortable.test.js | 2 +- src/Swappable/Swappable.js | 2 +- src/Swappable/tests/Swappable.test.js | 2 +- src/shared/utils/closest/tests/closest.test.js | 2 +- 13 files changed, 13 insertions(+), 13 deletions(-) diff --git a/src/Draggable/Plugins/Focusable/tests/Focusable.test.js b/src/Draggable/Plugins/Focusable/tests/Focusable.test.js index 718ec5c..e58a711 100644 --- a/src/Draggable/Plugins/Focusable/tests/Focusable.test.js +++ b/src/Draggable/Plugins/Focusable/tests/Focusable.test.js @@ -27,7 +27,7 @@ describe('Focusable', () => { afterEach(() => { draggable.destroy(); - sandbox.parentNode.removeChild(sandbox); + sandbox.remove(); }); it('is included by default', () => { diff --git a/src/Draggable/Plugins/Mirror/Mirror.js b/src/Draggable/Plugins/Mirror/Mirror.js index 21febd9..1809f5e 100644 --- a/src/Draggable/Plugins/Mirror/Mirror.js +++ b/src/Draggable/Plugins/Mirror/Mirror.js @@ -258,7 +258,7 @@ export default class Mirror extends AbstractPlugin { this.draggable.trigger(mirrorDestroyEvent); if (!mirrorDestroyEvent.canceled()) { - this.mirror.parentNode.removeChild(this.mirror); + this.mirror.remove(); } } diff --git a/src/Draggable/Plugins/Mirror/tests/Mirror.test.js b/src/Draggable/Plugins/Mirror/tests/Mirror.test.js index a3d78c4..974f49a 100644 --- a/src/Draggable/Plugins/Mirror/tests/Mirror.test.js +++ b/src/Draggable/Plugins/Mirror/tests/Mirror.test.js @@ -45,7 +45,7 @@ describe('Mirror', () => { afterEach(() => { draggable.destroy(); - sandbox.parentNode.removeChild(sandbox); + sandbox.remove(); }); it('creates mirror element on `drag:start`', async () => { diff --git a/src/Draggable/Sensors/DragSensor/tests/DragSensor.test.js b/src/Draggable/Sensors/DragSensor/tests/DragSensor.test.js index 0b8336a..6ec64e0 100644 --- a/src/Draggable/Sensors/DragSensor/tests/DragSensor.test.js +++ b/src/Draggable/Sensors/DragSensor/tests/DragSensor.test.js @@ -43,7 +43,7 @@ describe('DragSensor', () => { function teardown() { dragSensor.detach(); - sandbox.parentNode.removeChild(sandbox); + sandbox.remove(); } describe('common', () => { diff --git a/src/Draggable/Sensors/MouseSensor/tests/MouseSensor.test.js b/src/Draggable/Sensors/MouseSensor/tests/MouseSensor.test.js index 4edab90..57e9b60 100644 --- a/src/Draggable/Sensors/MouseSensor/tests/MouseSensor.test.js +++ b/src/Draggable/Sensors/MouseSensor/tests/MouseSensor.test.js @@ -42,7 +42,7 @@ describe('MouseSensor', () => { function teardown() { mouseSensor.detach(); - sandbox.parentNode.removeChild(sandbox); + sandbox.remove(); } describe('common', () => { diff --git a/src/Draggable/Sensors/TouchSensor/tests/TouchSensor.test.js b/src/Draggable/Sensors/TouchSensor/tests/TouchSensor.test.js index 38642a8..efd3dfb 100644 --- a/src/Draggable/Sensors/TouchSensor/tests/TouchSensor.test.js +++ b/src/Draggable/Sensors/TouchSensor/tests/TouchSensor.test.js @@ -34,7 +34,7 @@ describe('TouchSensor', () => { function teardown() { touchSensor.detach(); - sandbox.parentNode.removeChild(sandbox); + sandbox.remove(); } describe('common', () => { diff --git a/src/Draggable/tests/Draggable.test.js b/src/Draggable/tests/Draggable.test.js index 196cb36..255fa75 100644 --- a/src/Draggable/tests/Draggable.test.js +++ b/src/Draggable/tests/Draggable.test.js @@ -37,7 +37,7 @@ describe('Draggable', () => { }); afterEach(() => { - sandbox.parentNode.removeChild(sandbox); + sandbox.remove(); }); describe('.Plugins', () => { diff --git a/src/Droppable/tests/Droppable.test.js b/src/Droppable/tests/Droppable.test.js index 38a93b3..0f84c38 100644 --- a/src/Droppable/tests/Droppable.test.js +++ b/src/Droppable/tests/Droppable.test.js @@ -47,7 +47,7 @@ describe('Droppable', () => { afterEach(() => { droppable.destroy(); - sandbox.parentNode.removeChild(sandbox); + sandbox.remove(); }); describe('triggers', () => { diff --git a/src/Plugins/ResizeMirror/tests/ResizeMirror.test.js b/src/Plugins/ResizeMirror/tests/ResizeMirror.test.js index 4d9d7b9..6d34be2 100644 --- a/src/Plugins/ResizeMirror/tests/ResizeMirror.test.js +++ b/src/Plugins/ResizeMirror/tests/ResizeMirror.test.js @@ -62,7 +62,7 @@ describe('ResizeMirror', () => { afterEach(() => { draggable.destroy(); - sandbox.parentNode.removeChild(sandbox); + sandbox.remove(); }); it('resizes mirror based on over element', async () => { diff --git a/src/Sortable/tests/Sortable.test.js b/src/Sortable/tests/Sortable.test.js index dfcc4d1..95f1e78 100644 --- a/src/Sortable/tests/Sortable.test.js +++ b/src/Sortable/tests/Sortable.test.js @@ -58,7 +58,7 @@ describe('Sortable', () => { afterEach(() => { sortable.destroy(); - sandbox.parentNode.removeChild(sandbox); + sandbox.remove(); }); it('triggers events', () => { diff --git a/src/Swappable/Swappable.js b/src/Swappable/Swappable.js index aa9206a..a24ec14 100644 --- a/src/Swappable/Swappable.js +++ b/src/Swappable/Swappable.js @@ -153,7 +153,7 @@ export default class Swappable extends Draggable { function withTempElement(callback) { const tmpElement = document.createElement('div'); callback(tmpElement); - tmpElement.parentNode.removeChild(tmpElement); + tmpElement.remove(); } function swap(source, over) { diff --git a/src/Swappable/tests/Swappable.test.js b/src/Swappable/tests/Swappable.test.js index ad7b737..50b9c5a 100644 --- a/src/Swappable/tests/Swappable.test.js +++ b/src/Swappable/tests/Swappable.test.js @@ -58,7 +58,7 @@ describe('Swappable', () => { afterEach(() => { swappable.destroy(); - sandbox.parentNode.removeChild(sandbox); + sandbox.remove(); }); it('triggers events', () => { diff --git a/src/shared/utils/closest/tests/closest.test.js b/src/shared/utils/closest/tests/closest.test.js index b0ee774..583be27 100644 --- a/src/shared/utils/closest/tests/closest.test.js +++ b/src/shared/utils/closest/tests/closest.test.js @@ -19,7 +19,7 @@ describe('utils', () => { }); afterEach(() => { - sandbox.parentNode.removeChild(sandbox); + sandbox.remove(); }); it('should return null when no element specified', () => {