Add an option to disable bindings for broken drags per draggable

[katywings]

Is

Bindings for broken drags specified via (https://github.com/atlassian/pragmatic-drag-and-drop/blob/26ded573f3b54002e74a32ad943eb3436100c3b4/packages/core/src/util/detect-broken-drag.ts#L1C17-L1C42) make it impossible to simulate native dragging, which is needed for certain use cases and ui testing.

Should

Add an option to draggable that allows to disable the broken drag bindings.

Workaround

The patch below implements a new cancelBrokenDrags option for draggable. If it is explicitly set to false, the bindings for broken drags will be disabled for that specific draggable instance.

diff --git a/dist/esm/adapter/element-adapter.js b/dist/esm/adapter/element-adapter.js
index 41e9eec36d3f7ae0f8d5a64679c315f064de957f..14d895760a4cd1f3bbe534d4299bd3907be17df7 100644
--- a/dist/esm/adapter/element-adapter.js
+++ b/dist/esm/adapter/element-adapter.js
@@ -217,6 +217,7 @@ var adapter = makeAdapter({
         };
         api.start({
           event: event,
+          cancelBrokenDrags: entry.cancelBrokenDrags,
           dragType: dragType
         });
       }
diff --git a/dist/esm/ledger/lifecycle-manager.js b/dist/esm/ledger/lifecycle-manager.js
index ee8f1213d89c206a3da5d6101f45fcacf3c09318..45363375c5baaebdb739555c3ccc78b7d5c4c925 100644
--- a/dist/esm/ledger/lifecycle-manager.js
+++ b/dist/esm/ledger/lifecycle-manager.js
@@ -282,7 +282,7 @@ function start(_ref2) {
       };
       cancel();
     }
-  }].concat(_toConsumableArray(getBindingsForBrokenDrags({
+  }].concat(_ref2.cancelBrokenDrags === false ? []: _toConsumableArray(getBindingsForBrokenDrags({
     onDragEnd: cancel
   }))),
   // Once we have started a managed drag operation it is important that we see / own all drag events
diff --git a/dist/esm/make-adapter/make-adapter.js b/dist/esm/make-adapter/make-adapter.js
index 428d2c6e2c12bee9e982d01c27c5e3d906f2fb88..c317f5e7e83ae50c1569e5627f66ef07a77b139e 100644
--- a/dist/esm/make-adapter/make-adapter.js
+++ b/dist/esm/make-adapter/make-adapter.js
@@ -31,6 +31,7 @@ export function makeAdapter(_ref) {
       dragType = _ref2.dragType;
     lifecycle.start({
       event: event,
+      cancelBrokenDrags: _ref2.cancelBrokenDrags,
       dragType: dragType,
       getDropTargetsOver: dropTargetAPI.getIsOver,
       dispatchEvent: dispatchEvent
diff --git a/dist/types/adapter/element-adapter.d.ts b/dist/types/adapter/element-adapter.d.ts
index 12ccfd4032ffb516b3264d147e5dec609a54d596..b05cab7641f294609f33398e321ab02ac36220f8 100644
--- a/dist/types/adapter/element-adapter.d.ts
+++ b/dist/types/adapter/element-adapter.d.ts
@@ -20,6 +20,8 @@ type DraggableArgs = {
      * can have a "draggable" attribute
      */
     element: HTMLElement;
+    /** Detect and cancel broken dragging */
+    cancelBrokenDrags?: boolean;
     /** The part of a draggable `element` that you want to use to control the dragging of the whole `element` */
     dragHandle?: Element;
     /** Conditionally allow a drag to occur */

Refs

• This option might also be needed as a base to implement custom drag start press timeouts for mobile devices (draggable element isnt working on touchscreen #204)