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/