Change mouse cursor when dragging a desktop document

Question

so I'm kinda stuck, When dragging an outside element like a document or folder from my desktop, I cannot change its cursor. I ve already tried changing the cursor of the whole page and the body cursor, hover effects or active. But it seems like when dragging a document from the desktop onto the web it is a completely different cursor not included in the web app.

This is the result I would like to have: here

As you can see in the picture, I am dragging an image onto my web app and while hovering the console it changes the cursor to not allowed.

That's exactly my goal.

Has anyone suceeded in changing it ?

it helps you: https://stackoverflow.com/questions/10119514/html5-drag-drop-change-icon-cursor-while-dragging/10589918 — Ehsan, Aug 30 '20 at 05:53
yes I want to change the cursor when hovering certain zones while dragging a file — Nathan Adda, Aug 30 '20 at 06:02
for this purpose i think it's better to use https://www.dropzonejs.com/. its also support react. without library it will be difficult — Ehsan, Aug 30 '20 at 06:04
thanks but the problem is that I cannot add any new library to this project hehe — Nathan Adda, Aug 30 '20 at 06:05

score 0 · Answer 1 · answered Aug 30 '20 at 06:12

0

for adding functionality, yuo should code javascript.

body{
cursor: no-drop;
}
.dropZone{
  width: 50%;
  height: 300px;
  border: 1px solid #000;
  cursor: move;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="dropZone">zone</div>

answered Aug 30 '20 at 06:12

Ehsan

766
10
17

if it can help i ve the react-smooth-dnd library installed – Nathan Adda Aug 30 '20 at 06:13
try dragging a document over the dropzone and you will the the cursor of the drag and not the one you configured. That's what I'm trying to fix – Nathan Adda Aug 30 '20 at 08:04

Change mouse cursor when dragging a desktop document

1 Answers1

Linked