# Drag and Drop API

The HTML Drag and Drop API enables applications to use drag-and-drop features in browsers. The user may select draggable elements with a mouse, drag them to a droppable element, and drop them by releasing the mouse button.

## 1. Making Elements Draggable

To make an element draggable, you set the `draggable` attribute to `true`.

```html
<div id="item" draggable="true">Drag me!</div>
```

## 2. Drag Events

There are several events fired during the drag-and-drop operations.

### On the Draggable Element
*   `dragstart`: Fired when the user starts dragging an element. This is where you set the data to be transferred.
*   `drag`: Fired repeatedly while the element is being dragged.
*   `dragend`: Fired when the drag operation ends (whether successful or not).

### On the Drop Target
*   `dragenter`: Fired when the dragged element enters a valid drop target.
*   `dragover`: Fired repeatedly while the dragged element is over the drop target. **Crucial:** You must call `event.preventDefault()` here to allow dropping.
*   `dragleave`: Fired when the dragged element leaves the drop target.
*   `drop`: Fired when the element is dropped on the target.

## 3. The DataTransfer Object

The `DataTransfer` object is used to hold the data that is being dragged during a drag and drop operation. It is accessible via `event.dataTransfer`.

*   `setData(format, data)`: Sets the data type and value.
*   `getData(format)`: Retrieves the data for a specific type.
*   `clearData([format])`: Removes the data.

## 4. Basic Example

```html
<div id="drag-source" draggable="true" style="border: 1px solid black; padding: 10px;">
  Drag Source
</div>

<div id="drop-target" style="border: 1px solid red; padding: 20px; margin-top: 10px;">
  Drop Target
</div>
```

```javascript
const source = document.getElementById('drag-source');
const target = document.getElementById('drop-target');

// 1. Handle Drag Start
source.addEventListener('dragstart', (event) => {
  // Store the ID of the element being dragged
  event.dataTransfer.setData('text/plain', event.target.id);
  event.dataTransfer.effectAllowed = 'move';
  console.log('Drag started');
});

// 2. Allow Drop (dragover)
target.addEventListener('dragover', (event) => {
  // Prevent default to allow drop
  event.preventDefault();
  event.dataTransfer.dropEffect = 'move';
});

// 3. Handle Drop
target.addEventListener('drop', (event) => {
  event.preventDefault();
  
  // Get the ID of the dragged element
  const data = event.dataTransfer.getData('text/plain');
  const draggedElement = document.getElementById(data);
  
  // Move the element to the drop target
  event.target.appendChild(draggedElement);
  console.log('Dropped');
});
```

## 5. Files Drag and Drop

You can also drag files from the operating system into the browser.

```javascript
target.addEventListener('drop', (event) => {
  event.preventDefault();

  if (event.dataTransfer.files.length > 0) {
    // Handle files
    const files = event.dataTransfer.files;
    console.log('Files dropped:', files);
  }
});
```

[[programming/javascript/vanilla/javascript]]
[[programming/javascript/vanilla/events]]
[[programming/javascript/vanilla/file-api]]