Back to Dictionary
Action Feedback
●●○Customize
Drag & Drop Ghost
When dragging an item, the original item remains lowered in opacity as a "placeholder", while a slightly scaled-up, shadowed "ghost" follows the cursor.
Live Demo
What It Is
When dragging an item, the original item remains lowered in opacity as a "placeholder", while a slightly scaled-up, shadowed "ghost" follows the cursor.
✓When to Use
- Kanban boards (like Trello/Linear)
- Reorderable lists
- File upload drop zones
✕When NOT to Use
- Non-draggable items
Configuration Tips
- 01Scale the dragged ghost up to exactly 1.05 and add a strong drop-shadow (shadow-xl)
- 02Give the placeholder left behind a light dashed border and 30-50% opacity
You've Seen It In
LinearNotionTrello
Prompt Templates
Copy and paste these prompts into your AI coding assistant.
Create a draggable list item that lifts up with a shadow when I drag it.
Code Example (Tailwind CSS)
export function DragDropGhostDemo() {}