# Drag And Drop

> Implement drag-and-drop in LWC using HTML5 Drag and Drop API, keyboard alternatives, and accessible announcements. NOT for kanban migration from legacy Lightning.

- Skill: `banibratachatterjee/drag-and-drop` (Agent Skill, multi-file: 7 files)
- Install (CLI): `npx skillmds@latest add banibratachatterjee/drag-and-drop`
- Raw SKILL.md: https://api.skillmd.com/api/skills/banibratachatterjee/drag-and-drop/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Integrations & APIs
- Author: BanibrataChatterjee (https://skillmd.com/u/banibratachatterjee)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/banibratachatterjee/drag-and-drop

---


# LWC Drag and Drop

Native HTML5 Drag and Drop works in LWC — no library needed. The tricky parts are (1) preventing default on dragover, (2) carrying item identity via dataTransfer, and (3) providing a keyboard-accessible alternative (focus + arrow keys). This skill lays out the template, the JS handlers, and the ARIA live-region announcements.

## When to Use

Any reordering UI (priority list, board columns, file drop zones). Not for complex trees (use a specialized library behind an LWC wrapper).

Typical trigger phrases that should route to this skill: `lwc drag drop`, `reorder list lwc`, `drag file into lwc`, `kanban drag and drop lwc`.

## Recommended Workflow

1. Template: add `draggable="true"`, `@dragstart`, `@dragover` (with preventDefault), `@drop` on source/target elements.
2. Pass identity via `event.dataTransfer.setData('text/plain', itemId)`.
3. Keyboard alternative: `@keydown` on item, arrow keys reorder with the same handler logic.
4. Announce drag start/drop via a `role="status"` aria-live region.
5. Jest test: simulate dragstart/drop; assert reorder + announcement.

## Key Considerations

- `dragover` must call `event.preventDefault()` or `drop` never fires.
- Touch devices don't fire drag events — detect and show reorder buttons.
- dataTransfer is cleared after drop — capture any data synchronously in dragstart.
- aria-grabbed is deprecated; announce via live region instead.

## Worked Examples (see `references/examples.md`)

- *Priority list reorder* — Case priority list
- *File drop zone* — Attachments upload

## Common Gotchas (see `references/gotchas.md`)

- **Missing preventDefault** — Drop never fires; silent bug.
- **Touch devices** — Mobile users can't reorder.
- **No keyboard path** — A11y audit fails.

## Top LLM Anti-Patterns (full list in `references/llm-anti-patterns.md`)

- Using an external drag library for simple lists
- Skipping keyboard support
- No aria-live announcement

## Official Sources Used

- Lightning Web Components Developer Guide — https://developer.salesforce.com/docs/platform/lwc/guide/
- Lightning Data Service — https://developer.salesforce.com/docs/platform/lwc/guide/data-wire-service-about.html
- LWC Recipes — https://github.com/trailheadapps/lwc-recipes
- SLDS 2 — https://www.lightningdesignsystem.com/2e/