CODEWITHSUNDEEP
cssreactjscss-selectors
Atrag
Atrag

Reputation: 743

Change not-allowed cursor on drag in React

When I drag an image in react that has draggable set to true, I get not-allowed / no-drop cursor. I can't figure out how to target it with CSS to overwrite. The way I handle the drag is onDragStart then onDragEnd.

Upvotes: 1

Views: 6816

Answers (2)

Roshan Kanwar
Roshan Kanwar

Reputation: 271

I faced the same issue back when I was working on one of my React projects, so I did some research and tested several methods that I found, but nothing worked for me. You see there is a property named DataTransfer.effectAllowed that specifies the effect that is allowed for drag operation, and there is a limitation to this API as you can read here -

https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/effectAllowed

Changing the styles or attaching an eventListener won't work, you have to use a different backend for this. Use react-dnd and react-dnd-touch-backend or react-dnd-html5-backend npm packages as a custom backend.

https://www.npmjs.com/package/react-dnd
https://www.npmjs.com/package/react-dnd-touch-backend
https://www.npmjs.com/package/react-dnd-html5-backend

Upvotes: 0

biberman
biberman

Reputation: 5767

Without some reproducable code i just can try a shot in the dark: You have to call at the beginning of your drag handler e.preventDefault();.

Upvotes: 0

Related Questions