Is it possible to change cursor icon while dragging, with HTML5 native drag and drop

2
votes

I'm using the native HTML5 drag & drop and I'm trying to change the cursor icon while dragging.

I noticed while dragging that there are only 2 types of icons. First is when you move item over dropable area (default cursor with small rectangle at the bottom ) and when you are not over that kind of area (forbidden icon)

Is it possible to change the cursor icons? For example I want hand cursor while I'm over droppable area. Also I read about DataTransfer.dropEffect and DataTransfer.effectAllowed, but neither of these solved my issue.

Also it is not CSS issue because I try

* {cursor: crosshair!important}

and there was no effect, the cursor did not change.

2
csshtmldrag-and-dropdraggable

2 Answers

0
votes

I don't think you can change the cursor to something like the grabbing cursor but instead are limited to predefined dropEffects like copy, move and link.

-1
votes

try this

:global {
body.dragging,
body.dragging * {
    cursor: url('./assets/cursors/grabbing.cur'), move !important;
}
}