fix(sensor): return early when the target isn't in handle or draggable

elements

Author: zjffun

jsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./src/"
+  }
+}

src/Draggable/Draggable.js

@@ -387,7 +387,7 @@ export default class Draggable {
    */
   [onDragStart](event) {
     const sensorEvent = getSensorEvent(event);
-    const {target, container} = sensorEvent;
+    const {target, container, originalSource} = sensorEvent;
 
     if (!this.containers.includes(container)) {
       return;
@@ -398,15 +398,9 @@ export default class Draggable {
       return;
     }
 
-    // Find draggable source element
-    this.originalSource = closest(target, this.options.draggable);
+    this.originalSource = originalSource;
     this.sourceContainer = container;
 
-    if (!this.originalSource) {
-      sensorEvent.cancel();
-      return;
-    }
-
     if (this.lastPlacedSource && this.lastPlacedContainer) {
       clearTimeout(this.placedTimeoutID);
       this.lastPlacedSource.classList.remove(...this.getClassNamesFor('source:placed'));

src/Draggable/Sensors/DragSensor/DragSensor.js

@@ -80,16 +80,17 @@ export default class DragSensor extends Sensor {
     event.dataTransfer.effectAllowed = this.options.type;
 
     const target = document.elementFromPoint(event.clientX, event.clientY);
-    this.currentContainer = closest(event.target, this.containers);
+    const originalSource = this.draggableElement;
 
-    if (!this.currentContainer) {
+    if (!originalSource) {
       return;
     }
 
     const dragStartEvent = new DragStartSensorEvent({
       clientX: event.clientX,
       clientY: event.clientY,
       target,
+      originalSource,
       container: this.currentContainer,
       originalEvent: event,
     });
@@ -187,6 +188,23 @@ export default class DragSensor extends Sensor {
       return;
     }
 
+    const target = event.target;
+    this.currentContainer = closest(target, this.containers);
+
+    if (!this.currentContainer) {
+      return;
+    }
+
+    if (this.options.handle && target && !closest(target, this.options.handle)) {
+      return;
+    }
+
+    const originalSource = closest(target, this.options.draggable);
+
+    if (!originalSource) {
+      return;
+    }
+
     const nativeDraggableElement = closest(event.target, (element) => element.draggable);
 
     if (nativeDraggableElement) {
@@ -200,17 +218,11 @@ export default class DragSensor extends Sensor {
     document.addEventListener('dragend', this[onDragEnd], false);
     document.addEventListener('drop', this[onDrop], false);
 
-    const target = closest(event.target, this.options.draggable);
-
-    if (!target) {
-      return;
-    }
-
     this.startEvent = event;
 
     this.mouseDownTimeout = setTimeout(() => {
-      target.draggable = true;
-      this.draggableElement = target;
+      originalSource.draggable = true;
+      this.draggableElement = originalSource;
     }, this.delay.drag);
   }
 

src/Draggable/Sensors/DragSensor/README.md

@@ -22,6 +22,9 @@ Detaches sensors to the DOM
 
 ### Options
 
+**`draggable {String}`**  
+A css selector for draggable elements within the `containers` specified.
+
 **`delay {Number}`**  
 This value will delay touch start