HTML5拖放更改图标/光标，同时拖动答案

【问题标题】：HTML5 Drag & Drop Change icon/cursor while draggingHTML5拖放更改图标/光标，同时拖动
【发布时间】：2012-04-24 13:25:29
【问题描述】：

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

谢谢！

【问题讨论】：

我正在寻找类似的东西。如果你得到这个答案，请告诉我？
未来的谷歌人：仍然没有伟大的、简单的、跨浏览器的解决方案；如果可以的话，就转移到像 Dragula 这样的 Javascript 库。
未来的谷歌员工：顺便说一句，这里没有任何东西。

标签： javascript html drag-and-drop

【解决方案1】：

你在dropEffect:

在dragstart中初始化：

event.dataTransfer.effectAllowed = "copyMove";

在 Dragenter 中更新：

event.dataTransfer.dropEffect = "copy";

【讨论】：

我将上面的 JSFiddle 更新为 jsfiddle.net/rvRhM/192 以遵循您的建议。它适用于 Chrome，但 Firefox 不会更改光标（撰写本文时的最新版本......）。无论如何感谢您的提示。

【解决方案2】：

我在这里有一个独立的跨浏览器 HTML5 拖放示例：http://jsfiddle.net/rvRhM/1/

看看 dragstart 和 dragend 事件。 dm 是被拖动的元素。

EventUtil.addHandler(dm, 'dragstart', function(e) {
    e.dataTransfer.setData(format, 'Dragme');
    e.dataTransfer.effectAllowed = effect;
    var target = EventUtil.getCurrentTarget(e);
    target.style.backgroundColor = 'blue';
    target.style.cursor = 'move'; // You can do this or use a css class to change the cursor
    return true;
});

拖动结束时一定要重置光标：

EventUtil.addHandler(dm, 'dragend', function(e) {  
    var target = EventUtil.getCurrentTarget(e);
    target.style.backgroundColor = '';
    target.style.cursor = 'default'; // Reset cursor
    return true;
});

【讨论】：

感谢您的回复！但是我需要在 dragenter/dragover 期间根据我是否可以将元素拖入其中进行更改。顺便说一句，该示例在 Chrome 18 (OS X) 中不起作用。
是的，不仅仅是 chrome，还有 safari，我不太清楚为什么，因为它是普通的旧 javascript。它适用于火狐。关于您的其他问题，您必须在可拖动元素和 dropzone 之间建立某种连接（使用 id、cssClass 等），以便您可以确定允许哪个可拖动元素进入哪个 dropzone。然后您可以相应地设置可拖动对象的样式。
只有FF支持dataTransfer。
我在 chrome 75 上试过，有时它显示移动光标，但有时它只是默认光标图标。

【解决方案3】：

添加纯 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;
    }

【讨论】：

这很好用，直到我开始拖动。然后光标就切换回默认值。
这在拖动元素时不起作用，只有在点击元素时才起作用。

【解决方案4】：

我试图达到同样的效果，但实际上找不到一个好的解决方案。我最终所做的是将图像设置为 dataTransfer 并在每次操作时更改其 src。这样，至少跨浏览器的行为是一致的。这是我用作参考的页面的链接：

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

【讨论】：

您页面上的元素不会在 Chrome 中拖动

【解决方案5】：

接受的答案当且仅当在所有更改dropEffect的事件上调用ev.preventDefault()（不要在dragstart中调用它），如MDN中所述

【讨论】：

【解决方案6】：

这对我有用：

<div class="container">
    <div draggable="true">
    <div draggable="true">
</div>

$('.container').bind('dragover', function() {
    $('body').addClass('dragging');
});
$('.container').bind('dragleave', function() {
    $('body').removeClass('dragging');
});

.container > div {
    cursor: grab;
}
body.dragging .container > div {
    cursor: grabbing;
}

https://jsfiddle.net/cLb3hxtf/1/

【讨论】：

@AMoore 似乎在 Chrome 92.0.4515.107 jsfiddle.net/cLb3hxtf/1 上为我工作
对我来说，在 Chrome 92.0.4515.131 (windows 7, sry :( ) 上它甚至不能在提供的 jsfiddle 中拖动。