How can I hide (or change) the drag not allowed cursor during a dragging?

user_12575988 0
Viewed 736

hi.

I'm trying to find out how to hide the "drag not allowed" cursor during a drag operation.

I could be okay with changing it too, if removing isn't possible. I feel like I'm not getting something though, it sounds like an easy thing, doesn't it?

Here I've made a small fiddle for showing the issue: JSFiddle

box0.addEventListener('dragstart', dragStart);
box0.addEventListener('dragend', dragend);
box0.addEventListener('dragenter', dragEnter);
box0.addEventListener('dragover', dragOver);
container.addEventListener('dragenter', dragEnter);
container.addEventListener('dragover', dragOver);
container.addEventListener('dragend', dragend);

function dragStart(e) {
    e.dataTransfer.setData('text/plain', e.target.id);
    setTimeout (() => {e.target.classList.add('boxh');}, 0);}
function dragend(e) {
    e.target.classList.remove('boxh');
}
function dragEnter(e) {
    e.preventDefault();
    }
mouse-cursor drag-and-drop css html javascript
2 Answers

To hide the not-allowed cursor and make your drop zones valid you need to apply preventDefault on both dragOver and dragEnter.

Once you have a valid drop zone you can change the cursor with e.dataTransfer.dropEffect to either "copy", "move", "link", "none". (https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/dropEffect)

Unfortunately doesn't seem like there's no-cursor option.

onDragOver={e => {
    e.dataTransfer.dropEffect = "move";
    e.preventDefault()
}}
onDragEnter={e => {
    e.preventDefault()
}}
user_111602920

To prevent the forbidden cursor the preventDefault() also needs to go on the target element (!!) - preferably the entire document

document.addEventListener("dragover", (event) => {
    event.preventDefault();
});
user_2117640
Related