Prevent HTML Drag and Drop events while sensor is active

clauderic · Nov 14, 2021 · d973cc6 · d973cc6
1 parent a3b7192
commit d973cc6
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 0 deletions.
diff --git a/.changeset/prevent-html-drag.md b/.changeset/prevent-html-drag.md
@@ -0,0 +1,5 @@
+---
+'@dnd-kit/core': patch
+---
+
+Sensors that extend the `AbstractPointerSensor` now prevent [HTML Drag and Drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API) events from being triggered while the sensor is activated.
diff --git a/packages/core/src/sensors/events.ts b/packages/core/src/sensors/events.ts
@@ -1,5 +1,6 @@
 export enum EventName {
   Click = 'click',
+  DragStart = 'dragstart',
   Keydown = 'keydown',
   ContextMenu = 'contextmenu',
   Resize = 'resize',

diff --git a/packages/core/src/sensors/pointer/AbstractPointerSensor.ts b/packages/core/src/sensors/pointer/AbstractPointerSensor.ts
@@ -102,6 +102,7 @@ export class AbstractPointerSensor implements SensorInstance {
     this.listeners.add(events.move.name, this.handleMove, {passive: false});
     this.listeners.add(events.end.name, this.handleEnd);
     this.windowListeners.add(EventName.Resize, this.handleCancel);
+    this.windowListeners.add(EventName.DragStart, preventDefault);
     this.windowListeners.add(EventName.VisibilityChange, this.handleCancel);
     this.windowListeners.add(EventName.ContextMenu, preventDefault);
     this.documentListeners.add(EventName.Keydown, this.handleKeydown);