Add distance option

Author: owen-m1

src/Draggable/Draggable.js

@@ -48,6 +48,7 @@ export const defaultOptions = {
   draggable: '.draggable-source',
   handle: null,
   delay: 100,
+  distance: 0,
   placedTimeout: 800,
   plugins: [],
   sensors: [],

src/Draggable/README.md

@@ -80,6 +80,10 @@ on the entire element. Default: `null`
 If you want to delay a drag start you can specify delay in milliseconds. This can be useful
 for draggable elements within scrollable containers. Default: `100`
 
+**`distance {Number}`**  
+The distance you want the pointer to have moved before drag starts. This can be useful
+for clickable draggable elements, such as links. Default: `0`
+
 **`plugins {Plugin[]}`**  
 Plugins add behaviour to Draggable by hooking into its life cycle, e.g. one of the default
 plugins controls the mirror movement. Default: `[]`

src/Draggable/Sensors/DragSensor/DragSensor.js

@@ -161,6 +161,8 @@ export default class DragSensor extends Sensor {
     this.trigger(container, dragStopEvent);
 
     this.dragging = false;
+    this.delayOver = false;
+    this.startEvent = null;
 
     this[reset]();
   }
@@ -205,7 +207,10 @@ export default class DragSensor extends Sensor {
       return;
     }
 
+    this.startEvent = event;
+
     this.mouseDownTimeout = setTimeout(() => {
+      this.delayOver = true;
       target.draggable = true;
       this.draggableElement = target;
     }, this.options.delay);

src/Draggable/Sensors/DragSensor/README.md

@@ -28,7 +28,7 @@ This value will delay touch start
 ### Known issues
 
 The drag sensor uses the native Drag and Drop API and therefor Draggable does not create
-a mirror. This means there is less control over the mirror
+a mirror. This means there is less control over the mirror.
 
 ### Example
 
@@ -42,3 +42,7 @@ const draggable = new Draggable(containers, {
 // Remove default mouse sensor
 draggable.removeSensor(Sensors.MouseSensor);
 ```
+
+### Caveats
+
+- The `distance` option will not work with this sensor.

src/Draggable/Sensors/MouseSensor/MouseSensor.js

@@ -1,11 +1,13 @@
-import {closest} from 'shared/utils';
+import {closest, distance} from 'shared/utils';
 import Sensor from '../Sensor';
 import {DragStartSensorEvent, DragMoveSensorEvent, DragStopSensorEvent} from '../SensorEvent';
 
 const onContextMenuWhileDragging = Symbol('onContextMenuWhileDragging');
 const onMouseDown = Symbol('onMouseDown');
 const onMouseMove = Symbol('onMouseMove');
 const onMouseUp = Symbol('onMouseUp');
+const startDrag = Symbol('startDrag');
+const onDistanceChange = Symbol('onDistanceChange');
 
 /**
  * This sensor picks up native browser mouse events and dictates drag operations
@@ -23,31 +25,19 @@ export default class MouseSensor extends Sensor {
   constructor(containers = [], options = {}) {
     super(containers, options);
 
-    /**
-     * Indicates if mouse button is still down
-     * @property mouseDown
-     * @type {Boolean}
-     */
-    this.mouseDown = false;
-
     /**
      * Mouse down timer which will end up triggering the drag start operation
      * @property mouseDownTimeout
      * @type {Number}
      */
     this.mouseDownTimeout = null;
 
-    /**
-     * Indicates if context menu has been opened during drag operation
-     * @property openedContextMenu
-     * @type {Boolean}
-     */
-    this.openedContextMenu = false;
-
     this[onContextMenuWhileDragging] = this[onContextMenuWhileDragging].bind(this);
     this[onMouseDown] = this[onMouseDown].bind(this);
     this[onMouseMove] = this[onMouseMove].bind(this);
     this[onMouseUp] = this[onMouseUp].bind(this);
+    this[startDrag] = this[startDrag].bind(this);
+    this[onDistanceChange] = this[onDistanceChange].bind(this);
   }
 
   /**
@@ -74,43 +64,67 @@ export default class MouseSensor extends Sensor {
       return;
     }
 
+    this.startEvent = event;
+
     document.addEventListener('mouseup', this[onMouseUp]);
+    document.addEventListener('mousemove', this[onDistanceChange]);
 
-    const target = document.elementFromPoint(event.clientX, event.clientY);
-    const container = closest(target, this.containers);
+    const container = closest(event.target, this.containers);
 
     if (!container) {
       return;
     }
 
     document.addEventListener('dragstart', preventNativeDragStart);
 
-    this.mouseDown = true;
-
-    clearTimeout(this.mouseDownTimeout);
+    this.currentContainer = container;
     this.mouseDownTimeout = setTimeout(() => {
-      if (!this.mouseDown) {
+      this.delayOver = true;
+      if (this.distance < this.options.distance) {
         return;
       }
+      this[startDrag]();
+    }, this.options.delay);
+  }
+
+  /**
+   * Start the drag
+   * @private
+   */
+  [startDrag]() {
+    const startEvent = this.startEvent;
+    const container = this.currentContainer;
+
+    const dragStartEvent = new DragStartSensorEvent({
+      clientX: startEvent.clientX,
+      clientY: startEvent.clientY,
+      target: startEvent.target,
+      container,
+      originalEvent: startEvent,
+    });
 
-      const dragStartEvent = new DragStartSensorEvent({
-        clientX: event.clientX,
-        clientY: event.clientY,
-        target,
-        container,
-        originalEvent: event,
-      });
+    this.trigger(this.currentContainer, dragStartEvent);
 
-      this.trigger(container, dragStartEvent);
+    this.dragging = !dragStartEvent.canceled();
 
-      this.currentContainer = container;
-      this.dragging = !dragStartEvent.canceled();
+    if (this.dragging) {
+      document.addEventListener('contextmenu', this[onContextMenuWhileDragging], true);
+      document.addEventListener('mousemove', this[onMouseMove]);
+    }
+  }
 
-      if (this.dragging) {
-        document.addEventListener('contextmenu', this[onContextMenuWhileDragging]);
-        document.addEventListener('mousemove', this[onMouseMove]);
-      }
-    }, this.options.delay);
+  /**
+   * Detect change in distance
+   * @private
+   * @param {Event} event - Mouse move event
+   */
+  [onDistanceChange](event) {
+    if (this.dragging) return;
+    this.distance = distance(this.startEvent.pageX, this.startEvent.pageY, event.pageX, event.pageY);
+
+    if (this.delayOver && this.distance >= this.options.distance) {
+      this[startDrag]();
+    }
   }
 
   /**
@@ -142,15 +156,15 @@ export default class MouseSensor extends Sensor {
    * @param {Event} event - Mouse up event
    */
   [onMouseUp](event) {
-    this.mouseDown = Boolean(this.openedContextMenu);
+    clearTimeout(this.mouseDownTimeout);
 
-    if (this.openedContextMenu) {
-      this.openedContextMenu = false;
+    if (event.button !== 0) {
       return;
     }
 
     document.removeEventListener('mouseup', this[onMouseUp]);
     document.removeEventListener('dragstart', preventNativeDragStart);
+    document.removeEventListener('mousemove', this[onDistanceChange]);
 
     if (!this.dragging) {
       return;
@@ -168,11 +182,14 @@ export default class MouseSensor extends Sensor {
 
     this.trigger(this.currentContainer, dragStopEvent);
 
-    document.removeEventListener('contextmenu', this[onContextMenuWhileDragging]);
+    document.removeEventListener('contextmenu', this[onContextMenuWhileDragging], true);
     document.removeEventListener('mousemove', this[onMouseMove]);
 
     this.currentContainer = null;
     this.dragging = false;
+    this.distance = 0;
+    this.delayOver = false;
+    this.startEvent = null;
   }
 
   /**
@@ -182,7 +199,6 @@ export default class MouseSensor extends Sensor {
    */
   [onContextMenuWhileDragging](event) {
     event.preventDefault();
-    this.openedContextMenu = true;
   }
 }
 

src/Draggable/Sensors/Sensor/Sensor.js

@@ -38,6 +38,27 @@ export default class Sensor {
      * @type {HTMLElement}
      */
     this.currentContainer = null;
+
+    /**
+     * The distance moved from the first pointer down location, no longer updated after the drag has started
+     * @property distance
+     * @type {Number}
+     */
+    this.distance = 0;
+
+    /**
+     * Indicates whether the delay has ended
+     * @property delayOver
+     * @type {Boolean}
+     */
+    this.delayOver = false;
+
+    /**
+     * The event of the initial sensor down
+     * @property startEvent
+     * @type {Event}
+     */
+    this.startEvent = null;
   }
 
   /**