The Ring Bearer · Drag and Drop

Two drag-and-drop exercises using native HTML5 drag events — many frameworks can't drive them without dispatching synthetic events.

One does not simply drag the ring into column B. (HTML5 DnD. You've been warned.)

Drag and Drop is a hard Mouse & Keyboard challenge on Fun UI Playground. Two drag-and-drop exercises using native HTML5 drag events — many frameworks can't drive them without dispatching synthetic events. It runs entirely in the browser, with no backend. Every interactive element carries a stable id and data-testid prefixed with “drag-and-drop-”, and the techniques it exercises are HTML5 drag events, synthetic event dispatch, sortable lists, assert order.

At a glance

Category

Mouse & Keyboard

Difficulty

hard

Teaches

HTML5 drag events · synthetic event dispatch · sortable lists · assert order

Backend

None — runs entirely in the browser

Locators

Stable id and data-testid, prefixed drag-and-drop-

Selectors on this page

Frequently asked questions

Why does my drag-and-drop test do nothing?

Because these are native HTML5 drag events and many frameworks' pointer emulation never fires them. Drag #dnd-ring between #dnd-column-a and #dnd-column-b; if the built-in drag helper fails, dispatch dragstart, dragover and drop yourself — the handlers only need the dataTransfer payload.

How do I assert a successful drop?

Assert the state the drop changed, not the pointer path: the column headers swap on a successful drop, and the marching order of ul#dnd-fellowship is mirrored into #dnd-order as comma-separated text.

More Mouse & Keyboard

• House Sigils · Hovers
• Throttle Lever · Sliders
• The Speakeasy Door · Right-Click & Double-Click
• Night at the East Wing · Tooltips
• The Consent Gauntlet · Obscured Elements
• All Mouse & Keyboard challenges

Updated 2026-09-07

Fun UI Playground — all challenges, bug hunts, getting started, glossary, about.