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.

When to use it

Reorder a list
Move an item between groups
Place an object on a canvas
Adjust a continuous value with a handle

When NOT to use it

Make dragging the only way to complete an important task
Hide valid drop targets
Start a drag when the user intended to scroll
Move an item without confirming its new position

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