Skip to main content

draganddrop

Attaches drag-and-drop event listeners for file drops, text drops, and draggable elements using the native HTML Drag and Drop API.

Import: @rtorcato/browser-common/draganddrop

📖 MDN: HTML Drag and Drop API

Browser support​

APIChromeEdgeFirefoxSafariiOS SafariBaseline
DataTransfer✅ 3+✅ 12+✅ 3.5+ [1]✅ 4+✅ 3.2+Widely available
HTMLElement.draggable✅ 4+✅ 12+✅ 2+✅ 5+✅ 4+Widely available
  1. Firefox: As of Firefox 52, the DataTransfer.types property returns a frozen array of DOMStrings as per spec, rather than a DOMStringList.

✅ supported · ◐ partial · ❌ not supported · [n] see note. Generated from MDN browser-compat-data and web-features. caniuse: DataTransfer · HTMLElement.draggable

Example​

import { enableFileDrop, makeDraggable, disableDragAndDrop } from '@rtorcato/browser-common/draganddrop'

enableFileDrop(dropzone, (files) => upload(files))
makeDraggable(card, 'card-42')

// later:
disableDragAndDrop(dropzone)

Exports​

  • enableFileDrop(element, onDrop) — makes an element a drop target for files
  • makeDraggable(element, data, effectAllowed?) — makes an element draggable with a data payload
  • enableTextDrop(element, onDrop) — makes an element a drop target for plain text
  • disableDragAndDrop(element) — removes drag-and-drop listeners by cloning and replacing the element

See the API reference for full signatures.