我想知道如何在拖动 (dragover/dragenter) 图标/光标期间更改,例如当我 dragenter 拒绝或允许部分时。当然,我可以用光标移动绝对定位的 DOM 的一部分,但我对原生 HTML5 解决方案感兴趣。
谢谢!
我想知道如何在拖动 (dragover/dragenter) 图标/光标期间更改,例如当我 dragenter 拒绝或允许部分时。当然,我可以用光标移动绝对定位的 DOM 的一部分,但我对原生 HTML5 解决方案感兴趣。
谢谢!
我试图达到同样的目的,但找不到真正好的解决方案。我最后所做的是为 dataTransfer 设置一个图像,并在每次操作时更改其 src。这样,行为至少在浏览器之间是一致的。这是我用作参考的页面的链接:
如MDN中所述,当且仅当 ev.preventDefault()
对所有更改dropEffect
(不要调用它dragstart
)的事件调用时,接受的答案才有效
添加纯 css 解决方案,这可能对少数人有用。在 html 元素上使用此类。
.grab {
cursor: move;
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab;
.thumbnails-list{
cursor: pointer;
}
}
.grab:active {
cursor: grabbing;
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
}
你在dropEffect之后:
在 dragstart 中初始化它:
event.dataTransfer.effectAllowed = "copyMove";
在 dragenter 中更新它:
event.dataTransfer.dropEffect = "copy";
preventDefault()
需要继续目标元素。文档附带的这一行终于为我解决了document.addEventListener("dragover", (event) => { event.preventDefault(); });