Drag and drop
cursor: no-drop in CSS: you cannot drop here
no-drop says 'you cannot drop the thing you are dragging here'. It belongs to drag and drop, unlike not-allowed, which covers any action.
cursor: no-drop; 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
The idea is an arrow or hand with a small no-entry sign. In practice Chrome, Edge and Firefox on Windows and macOS show exactly the same circle with a slash as not-allowed (Windows Unavailable, aero_unavail.cur).
Usage
When to use it
Use it for
- Drop zones that reject the item being dragged, such as a folder that does not accept that file type, in a drag you build with pointer events.
- The gaps between valid drop targets on a board, to say 'let go here and nothing happens'.
- Locked regions of a design canvas while an element is dragged over them.
Avoid it for
- Disabled buttons and links. That is not-allowed.
- During native HTML drag and drop. CSS is ignored there; leave dropEffect as 'none' instead.
Code
Copy the snippet
.folder.is-locked { cursor: no-drop; }<div class="folder is-locked">Archive (read only)</div>Support
Browsers and systems
| Browser | Support |
|---|---|
| Chrome | 1 |
| Edge | 12 |
| Firefox | 1.5 |
| Safari | 3 |
| Safari on iOS | no |
| Chrome on Android | 18 |
| System | Matching cursor |
|---|---|
| Windows role | No |
| Windows file | aero_unavail.cur |
| macOS | Operation not allowed |
Watch out
Gotchas
- no-drop and not-allowed usually look identical, so pick the one that matches what your code means; users will not see a difference.
- Firefox bug 275173 records that on Windows and macOS no-drop is drawn as not-allowed.
FAQ
Questions
- What is the difference between no-drop and not-allowed?
- no-drop is for drag and drop: you cannot drop here. not-allowed is for any action that will not happen. Most browsers draw them the same way.
- How do I show no-drop with the Drag and Drop API?
- Do not call preventDefault in dragover for that target, or set dropEffect to 'none'. The system then shows its own no-drop cursor.
- Which Windows cursor does no-drop use?
- Unavailable, stored in the No registry value. It is the same circle with a slash used for not-allowed.