HTML5 Drag & Drop 拖动时更改图标/光标
我想知道如何在拖动 (dragover/dragenter) 图标/光标期间更改,例如当我 dragenter 拒绝或允许部分时。当然,我可以用光标移动绝对定位的 DOM 的一部分,但我对原生 HTML5 解决方案感兴趣。
谢谢!
我想知道如何在拖动 (dragover/dragenter) 图标/光标期间更改,例如当我 dragenter 拒绝或允许部分时。当然,我可以用光标移动绝对定位的 DOM 的一部分,但我对原生 HTML5 解决方案感兴趣。
谢谢!
关闭,朕知道了
阅读 1089
阅读 157
阅读 1639
阅读 2251
阅读 1431
preventDefault()
需要继续目标元素。文档附带的这一行终于为我解决了document.addEventListener("dragover", (event) => { event.preventDefault(); });
我试图达到同样的目的,但找不到真正好的解决方案。我最后所做的是为 dataTransfer 设置一个图像,并在每次操作时更改其 src。这样,行为至少在浏览器之间是一致的。这是我用作参考的页面的链接:
https://kryogenix.org/code/browser/custom-drag-image.html
如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";
你的回答