如何在拖动过程中隐藏（或更改）不允许的拖动 cursor？

Question

你好。

我试图找出如何在拖动操作期间隐藏“不允许拖动”cursor。

如果无法删除，我也可以更改它。 我觉得我没有得到什么，这听起来很容易，不是吗？

在这里，我做了一个小小提琴来展示这个问题： 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();
    }

Answer 1

要隐藏不允许的光标并使拖放区有效，您需要在 dragOver 和 dragEnter 上应用 preventDefault。

一旦你有一个有效的拖放区，你可以用 e.dataTransfer.dropEffect 将光标更改为“复制”、“移动”、“链接”、“无”。 ( https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/dropEffect )

不幸的是，似乎没有无光标选项。

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

Answer 2

为了防止被禁止的 cursor 的preventDefault()还需要 go 在目标元素（!!） - 最好是整个文档

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