HTML5 Drag & Drop 拖动时更改图标/光标

仲羽 · 11月30日

我想知道如何在拖动 (dragover/dragenter) 图标/光标期间更改,例如当我 dragenter 拒绝或允许部分时。当然,我可以用光标移动绝对定位的 DOM 的一部分,但我对原生 HTML5 解决方案感兴趣。

谢谢!

回答(5)
时间
樱小胖Mandy
5 · 2022-11-30 17:54:55

preventDefault()需要继续目标元素文档附带的这一行终于为我解决了

document.addEventListener("dragover", (event) => {
    event.preventDefault();
});
小胖Gil
4 · 2022-11-30 17:54:55

我试图达到同样的目的,但找不到真正好的解决方案。我最后所做的是为 dataTransfer 设置一个图像,并在每次操作时更改其 src。这样,行为至少在浏览器之间是一致的。这是我用作参考的页面的链接:

https://kryogenix.org/code/browser/custom-drag-image.html

十刃
3 · 2022-11-30 17:54:55

如MDN中所述,当且仅当 ev.preventDefault()对所有更改dropEffect(不要调用它dragstart)的事件调用时,接受的答案才有效

朔风
2 · 2022-11-30 17:54:55

添加纯 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;
    }
番长
1 · 2022-11-30 17:54:55

你在dropEffect之后:

在 dragstart 中初始化它:

event.dataTransfer.effectAllowed = "copyMove";

在 dragenter 中更新它:

event.dataTransfer.dropEffect = "copy";

你的回答

加载中...
⌘+Return 发表
发表

温馨提示:登录后可发表评论或回复

关闭,朕知道了

扫码关注微信公众号或小程序