Drag and drop
cursor: grab in CSS: the open hand for draggable things
grab is the open hand. It says 'you can pick this up and drag it', before the drag starts.
cursor: grab; Move your mouse over this box Cursors only appear with a mouse or trackpad. Open this page on a computer to see this one. What it shows
An open hand. macOS has a native Open hand cursor. Windows has no grab role, so Chrome, Edge and Firefox draw their own open hand.
Usage
When to use it
Use it for
- Draggable cards on kanban boards and in sortable lists, on hover before the drag.
- Carousels and sliders you can drag with the mouse.
- Maps and large canvases that you pan by dragging.
- Grip handles (the six-dot icon) on rows you can reorder.
Avoid it for
- During the drag itself. Switch to grabbing.
- On items that only open when clicked. The hand suggests dragging.
Code
Copy the snippet
.card { cursor: grab; }
.card:active { cursor: grabbing; }<div class="card">Drag me to another column</div>Support
Browsers and systems
| Browser | Support |
|---|---|
| Chrome | 68 |
| Edge | 14 |
| Firefox | 27 |
| Safari | 11 |
| Safari on iOS | no |
| Chrome on Android | 68 |
| System | Matching cursor |
|---|---|
| Windows role | none (browser-supplied) |
| Windows file | none |
| macOS | Open hand |
Watch out
Gotchas
- Older code pairs grab with -webkit-grab and -moz-grab. Unprefixed grab works in Chrome 68+, Firefox 27+ and Safari 11+.
- Chrome's prefixed open hand only gained Windows support in Chrome 22.
- If the whole card is draggable, text inside it gets the hand too, which makes selecting that text harder. Usually that is the right trade.
FAQ
Questions
- How do I switch from grab to grabbing while dragging?
- Use .card:active { cursor: grabbing; } for simple cases, or add a class on pointerdown and remove it on pointerup.
- Do I still need -webkit-grab?
- Only for browsers from before 2018. Current Chrome, Edge, Firefox and Safari all accept plain grab.
- Why does grab not show during HTML drag and drop?
- During a native drag the system controls the cursor. grab only shows on hover, before the drag begins.
More