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();
}
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()
}}