Enable Drag

<div draggable="true">Drag me</div>
Attribute Purpose
draggable Enables native drag behavior
Default Only applies to <img>, <a>, selected text

Drag Events (source)

Event When it fires
dragstart When dragging starts
drag While dragging (fires frequently)
dragend When dragging ends (regardless of drop success) 
function handleDragStart(e: DragEvent) {
  e.dataTransfer.setData('text/plain', 'hello');
}

Drop Events (target)

Event When it fires
dragenter A draggable enters a valid drop target
dragover A draggable is over a drop target
dragleave Leaves drop target
drop Released inside drop target

Important: dragover must call e.preventDefault() to allow drop.

dataTransfer API

Used to store and retrieve data during a drag operation.

// Set data (dragstart)
e.dataTransfer.setData('text/plain', 'someData');

// Get data (drop)
const data = e.dataTransfer.getData('text/plain');
Method Description
setData(type, value) Save data during drag
getData(type) Retrieve data on drop
types Array of available MIME types
files List of dragged files (FileList)

React Example (Text Drag & Drop)

function DragSource() {
  return (
    <div
      draggable
      onDragStart={(e) => e.dataTransfer.setData('text/plain', 'hello')}
    >
      Drag me
    </div>
  );
}

function DropTarget() {
  function handleDrop(e: React.DragEvent) {
    e.preventDefault();
    const value = e.dataTransfer.getData('text/plain');
    console.log('Dropped value:', value);
  }

  return (
    <div
      onDrop={handleDrop}
      onDragOver={(e) => e.preventDefault()}
      className="border p-4"
    >
      Drop here
    </div>
  );
}