HTML5拖放时更改图标/光标

小开

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

查看一下 drastart 和 draend 事件。 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;
});

小开

你的目标是下降效应:

在 dragstart 中初始化它:

event.dataTransfer.effectAllowed = "copyMove";

在 Dragenter 中更新:

event.dataTransfer.dropEffect = "copy";

小开

我也试图达到同样的效果，但却找不到一个好的解决方案。最后我所做的就是为 dataTransfer 设置一个映像，并在每个操作中更改它的 src。这样至少在不同的浏览器中行为是一致的。下面是一个我用作参考的网页链接:

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

小开

添加纯 css 解决方案，这可能对少数人有用。

.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;
}

小开

这对我很有效:

<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/

小开

如 MDN所述，在所有改变 dropEffect(不要在 dragstart中调用它)的事件上调用 如果，也只有如果 ev.preventDefault()

小开

preventDefault()需要在 目标元素上运行。这条连接到文件的线路最终为我解决了这个问题

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