Drag

You might say

Let people drag these cards to rearrange them.

Move or reorder an item by holding and pulling itDrag interaction works for rearranging cards, moving files, and choosing a range. Show what can be grabbed, where it may be dropped, and the result before release. Provide another method for people who cannot or do not want to drag.

⠿ Task A ⠿ Task B Drop here

Drag a card and watch the shadow and drop-position feedback. Release it to return it to its original position.

Quick checkChoose the best answer

Task cards support drag reordering, but keyboard users and people with unsteady movement must also change the order. Which design is complete?

Make the whole card draggable and disable text selection and normal clicksSupport dragging only and use a stronger shadow to confirm pickupShow a drag handle and drop position, plus Move up and Move down actions

You can say this to an AI Agent

Improve task reordering with a clear drag handle, picked-up state, and drop placeholder, plus Move up and Move down actions. Do not make the whole card a drag target. Reorder the same card with mouse, touch, and keyboard and verify the final order.

When to use it

Reorder a list
Task ATask B (dragging)Task C
Move an item between groups
Task ADrop hereTask C
Place an object on a canvas
Task B↑↓Buttons can also complete sorting.
Adjust a continuous value with a handle
⠿Task B

When NOT to use it

Make dragging the only way to complete an important task
Task ATask B
Hide valid drop targets
Offering only drag-and-drop prevents keyboard users and people who cannot drag precisely from sorting.
Start a drag when the user intended to scroll
Move an item without confirming its new position
⠿The entire row is a drag target.

Anatomy

⠿ Task BTask BPut here↑↓ button replacement

It prompts "can be towed" and also delimits the hot spots for towing.

A translucent clone that follows the pointer

The place where you will fall when you let go

Buttons can do the same thing

Variants

Reorder

ABC

Drag and sort tasks and Kanban boards

Drop Zone

Drag files here

Drag files into the area to upload

Handle

⠿ Task B

Need to clearly mark where you can start dragging

Typical use cases

Kanban board

To do · 1

Integration testing

In progress · 2

Review homepage visuals

Drop in this column

Update login page

File organizer

📎 Design specs.md

⬆

Drop to upload to Project files

Design specs.md · 2.4 MB

Layout editor

⠿ Draft requirements Drop here ⠿ Review visual design ⠿ Schedule a customer call

Slider handle

Files

Preview

↔ 320 px

Want GPT or Codex?VibeHubGPT support

GPT-6 Astra

Build in 3D. Put your computer to work.