Merge pull request #525 from hnrq/master

Make `drag:stop` cancellable

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;
 }
 
 /**

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
 

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'));

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', () => {

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();
     }
   }
 

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 () => {

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', () => {

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', () => {

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', () => {

src/Draggable/tests/Draggable.test.js

@@ -37,7 +37,7 @@ describe('Draggable', () => {
   });
 
   afterEach(() => {
-    sandbox.parentNode.removeChild(sandbox);
+    sandbox.remove();
   });
 
   describe('.Plugins', () => {

src/Droppable/tests/Droppable.test.js

@@ -47,7 +47,7 @@ describe('Droppable', () => {
 
   afterEach(() => {
     droppable.destroy();
-    sandbox.parentNode.removeChild(sandbox);
+    sandbox.remove();
   });
 
   describe('triggers', () => {

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 () => {

src/Sortable/tests/Sortable.test.js

@@ -58,7 +58,7 @@ describe('Sortable', () => {
 
   afterEach(() => {
     sortable.destroy();
-    sandbox.parentNode.removeChild(sandbox);
+    sandbox.remove();
   });
 
   it('triggers events', () => {

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) {

src/Swappable/tests/Swappable.test.js

@@ -58,7 +58,7 @@ describe('Swappable', () => {
 
   afterEach(() => {
     swappable.destroy();
-    sandbox.parentNode.removeChild(sandbox);
+    sandbox.remove();
   });
 
   it('triggers events', () => {

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', () => {