EXTENDED UI

Drag & Drop

Reorder, move between lists and drop files — with a mouse, a finger or the keyboard. Everything here really drags.
THEME
DENSITY
01

Playground

Sortable list — handle, ghost, indicator, axis, keyboard
Spring 27 · shoot prep10 tasks
1Confirm castingSara · Oct 20↑↓ MOVING
2Book Mývatn hotelOlivia · 3 rooms↑↓ MOVING
3Pack 2 × Profoto B10Alex · gear list↑↓ MOVING
4Weather checkJon · 48 h before↑↓ MOVING
5Print call sheetsOlivia · 8 copies↑↓ MOVING
6Shoot day 1 · lakeCrew of 5↑↓ MOVING
7Shoot day 2 · coastCrew of 5↑↓ MOVING
8Selects round 1Lena to review↑↓ MOVING
9Retouch heroesAna · 24 frames↑↓ MOVING
10Deliver finalsNov 27↑↓ MOVING
Drag by ⠿ — or focus a row and press Space, ↑ ↓, Space. Esc cancels.
ANNOUNCEDNothing yet — drag or use the keyboard.
<Sortable items={tasks} onReorder={save} activator="handle" overlay="tilt" indicator="displace" axis="y" autoScroll keyboard announcements undo />
Settings
GRAB BY
WHILE DRAGGING
DROP INDICATOR
AXIS
02

Patterns

Kanban, photos, folders, uploads, calendar and tree
Kanban4 columns · WIP limit 3 on Shoot
Brief2
Moodboard v2Oct 22
Casting shortlistOct 24
Shoot3 / 3
Day 1 · Mývatn lakeNov 10
Day 2 · black sand coastNov 11
Day 3 · studio packshotsNov 12
Post1
Retouch heroes13 / 24
Done1
Brief approvedOct 20
Photo orderfirst is the cover
COVERLake 04
COVERCoast 12
COVERMoss 07
COVERGlacier 02
COVERCrew BTS
COVERParka 17
COVERDawn 01
COVERIce 09
Drag a photo to the first slot to make it the cover
Files → foldersselect several, drag them together
📁Selects42 files
📁Finals12 files
🎬BTS8 files
🗑Trash0 files
JPGmyvatn_hero_04.jpg24 MB
ZIPcoast_selects.zip410 MB
RAWglacier_RAW_12.cr388 MB
MP4bts_cut_v1.mp4640 MB
PDFmoodboard_v2.pdf12 MB
TIFparka_17.tif212 MB
Upload zonereal files from your computer
Calendarmove to another day or hour
Mon 19Tue 20Wed 21Thu 22Fri 23
09:0010:0011:0012:0013:0014:0015:0016:00
Stand-up09:00–10:00
Nordic review11:00–13:00
Shoot · Studio A10:00–14:00
Kaya sign-off15:00–16:00
Retouch block13:00–16:00
Drag an event to another day or hour
Treebefore · inside · after
📁Projects3
📁Spring 272
🖼Selects
🖼Finals
📁Winter 261
🖼Selects
📁Kaya web
🗄Archive
Drag a folder: top third = before, middle = inside, bottom = after
03

Behaviour

Forbidden targets, cancel, saving, and a no-drag way
Allowed · forbidden · cancel🚫 bounces back · Esc or drop outside
Hero 04Coast 12Moss 07
📁 Nordic Thread · SelectsDrop photos here
🔒 Archive 2024Read-only — drops are refused
Save & roll backevery 2nd save fails
1Hero 04
2Coast 12
3Moss 07
4Glacier 02
Reorder — the 1st, 3rd… save fails
No-drag alternative↑ ↓ buttons and “Move to…”
1Hero 04
2Coast 12
3Moss 07
4Glacier 02
04

Rules & a11y

Markup, checklist and which pattern when
Markup
<ul role="list" aria-label="Shoot prep tasks">
  <li tabindex="0" aria-roledescription="sortable item"
      aria-describedby="dnd-help">Confirm casting</li>
</ul>
<p id="dnd-help">Space to pick up, arrows to move, Space to drop.</p>
<div aria-live="assertive" class="sr-only">
  Moved “Retouch heroes” to position 3 of 6.
</div>
ChecklistReady to ship ✓
DRAGOrder or position is the point and people do it often.Kanban, photo order, calendar
MOVE TO…Destination is far away or in a long list.File into a deep folder
↑ ↓ BUTTONSSmall lists, precise steps, touch or keyboard.Reorder 4 invoice lines
SELECT + ACTIONMany items, one destination.Archive 20 projects
DO✓Lift the item — shadow and a slight tilt✓Show exactly where it will land✓Let Esc and dropping outside cancel✓Offer Undo after every drop✓Give keyboard and touch their own way
DON’T✕Make drag the only way to do something✕Start a drag on a simple click✕Hide forbidden targets until the drop fails✕Reorder optimistically without a rollback✕Use tiny handles on touch screens
Nothing yet — drag or use the keyboard.