我如何在拖动期间隐藏（或更改）“不允许拖动”的指针？

Question

你好。

我正在尝试找出如何在拖动操作期间隐藏“不允许拖动”光标。

如果无法删除，更改它也可以。但我感觉自己缺少了什么，这听起来很简单，不是吗？

在这里我为展示此问题创建了一个小的 JSFiddle: 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();
    }

- Dlofud

---

这个回答解决了你的问题吗？如何在按住鼠标时更改光标？ - Esszed

@Esszed，感谢您的建议，尽管我认为这并没有解决我的问题。我想避免使用JQuery，而且:hover只在鼠标移动到某个位置时起作用，而不是在拖动过程中，嗯。我不确定我能否传达这个问题... - Dlofud

光标变化只适用于灰色目标容器内还是在其外部也适用？ - Esszed

@Esszed 当我拖动光标时（仅通过拖动，而不是放置），它会在灰色容器内外以及基本上任何地方变成“禁止拖动”图标，而我只想完全没有光标。 - Dlofud

嗯，我明白了。你能给我指一些关于这个问题的 JQuery 代码吗？ - Dlofud

Answer 1

为了防止出现禁用鼠标的情况，preventDefault() 方法还需要应用于目标元素(!!)（最好是整个文档）。

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

- Rob Hoff

Answer 2

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

一旦您有了一个有效的拖放区域，您可以使用e.dataTransfer.dropEffect将光标更改为“copy”，“move”，“link”，“none”。 (https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/dropEffect)

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

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

- lilpostloo