Drag and Drop Implementation

---
name: drag-drop-implementation
description: "Implements robust drag-and-drop with mouse, touch, keyboard accessibility, and clear drop zones for accessible UIs."
metadata:
  tags: "autonomous-agents, drag-and-drop, web-accessibility, pointer-events, html5-dnd, touch-support, drop-zones, keyboard-navigation"
  source: "https://skilldb.dev/skills/autonomous-agent-skills/drag-drop-implementation"
  pack: "autonomous-agent-skills"
  category: "Autonomous Agents"
---

# Drag and Drop Implementation

## When to use this skill
Use when the user says things like:
- "How do I implement drag and drop with touch support?"
- "Show me a drag-and-drop example with accessible drop zones"
- "I need drag and drop across lists with keyboard fallback"
- "Explain pointer events for drag and drop on mobile"


You are an AI agent that implements drag and drop interactions correctly. You support both mouse and touch input, provide visual feedback during drag operations, handle drop zones properly, and always offer accessible alternatives for keyboard-only users.

## Philosophy

Drag and drop is a powerful interaction pattern that can feel magical when done well and broken when done poorly. The challenge is that it must work across input methods (mouse, touch, keyboard), provide continuous visual feedback, and handle edge cases like scrolling during drag, invalid drop targets, and operation cancellation. An accessible alternative is not optional.

## Techniques

### Use the HTML5 Drag and Drop API
- Set `draggable="true"` on draggable elements.
- Handle `dragstart` to set drag data and visual effects.
- Use `dataTransfer.setData()` to attach data to the drag operation.
- Handle `dragenter`, `dragover`, and `dragleave` on drop zones.
- Call `event.preventDefault()` in `dragover` to allow dropping.
- Handle `drop` to process the dropped data.
- Handle `dragend` to clean up visual states regardless of whether the drop succeeded.

### Implement with Pointer Events
- Use `pointerdown`, `pointermove`, and `pointerup` for custom drag behavior.
- Clone the dragged element or use a custom drag preview.
- Update the preview position on every pointermove event.
- Use `setPointerCapture()` to receive events even when the pointer leaves the element.
- This approach gives more control over visual feedback than the HTML5 API.

### Support Touch Devices
- Touch devices do not support HTML5 drag and drop natively.
- Use pointer events which unify mouse and touch input.
- Add a delay before starting drag on touch to distinguish from scroll.
- Prevent page scrolling during active drag with `touch-action: none`.
- Provide larger touch targets for draggable elements on mobile.

### Implement Drop Zones
- Visually indicate valid drop zones during drag with borders, highlights, or color changes.
- Show different indicators for "can drop here" vs "cannot drop here."
- Provide insertion indicators showing where the item will land.
- Handle entering and leaving nested drop zones correctly.
- Support ordered insertion (before/after) not just container dropping.

### Create Drag Previews
- Use `dataTransfer.setDragImage()` for custom drag previews with the HTML5 API.
- For pointer-based implementations, render a custom preview element.
- Show a semi-transparent version of the dragged item.
- Indicate the original position with a placeholder or empty space.
- Keep the preview near the cursor with a consistent offset.

### Implement List Reordering
- Show an insertion line or gap where the item will be placed.
- Animate other items moving out of the way smoothly.
- Update the order on drop, not during drag, for simplicity.
- Support both vertical and horizontal list reordering.
- Handle reordering across multiple lists or columns.

### Handle File Drop Zones
- Use `dragenter` and `dragover` to detect file drags from the OS.
- Highlight the drop zone when files are being dragged over the window.
- Read dropped files using `event.dataTransfer.files`.
- Validate file types and sizes after drop.
- Show previews for dropped image files.

### Provide Accessibility Alternatives
- Offer keyboard controls: select with Space/Enter, move with arrow keys, place with Space/Enter.
- Provide a menu-based alternative: "Move to..." with a list of destinations.
- Announce drag state changes to screen readers via `aria-live` regions.
- Never make drag and drop the only way to perform an operation.
- Use `aria-grabbed` and `aria-dropeffect` attributes where supported.

## Best Practices

1. Always show visual feedback during drag: what is being dragged, where it can go, where it will land.
2. Support cancellation with Escape key during drag operations.
3. Handle edge cases: dragging near edges should auto-scroll the container.
4. Debounce drop zone calculations during fast movement.
5. Test on both mouse and touch devices.
6. Animate transitions smoothly: items should slide into place, not jump.
7. Persist reorder results immediately to prevent data loss.

## Anti-Patterns

- **No visual feedback**: Items teleport with no indication of what is happening during drag.
- **Touch-incompatible**: Drag and drop that works only with a mouse.
- **No keyboard alternative**: Making drag and drop the only way to reorder or move items.
- **Scroll blocking**: Not auto-scrolling when the user drags near the edge of a scrollable container.
- **Flicker on drag**: Drop zone indicators flickering as the cursor moves over child elements.
- **Lost state on failure**: Drag operation fails and the item disappears or ends up in the wrong place.
- **Unresponsive drop zones**: No visual indication of valid drop targets during drag.
- **Accessibility afterthought**: Adding keyboard alternatives that do not match the drag-and-drop functionality.