Javascript HTML5 拖放 拖动时更改图标/光标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10119514/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 Drag & Drop Change icon/cursor while dragging
提问by Alex Ivasyuv
I'm wondering how to change during dragging (dragover/dragenter) icon/cursor when I dragenter for example to deny or allow section. Of course, I can move with cursor a part of DOM positioned absolutely, but I'm interested in native HTML5 solution.
我想知道如何在拖动 (dragover/dragenter) 图标/光标时更改，例如当我 dragenter 拒绝或允许部分。当然，我可以用光标移动绝对定位的 DOM 的一部分，但我对原生 HTML5 解决方案感兴趣。
Thanks!
谢谢！
回答by zupa
You are after dropEffect:
你在dropEffect之后：
Initialize it in dragstart:
在 dragstart 中初始化它：
event.dataTransfer.effectAllowed = "copyMove";
Update it in dragenter:
在 dragenter 中更新它：
event.dataTransfer.dropEffect = "copy";
回答by TJ.
I have a standalone crossbrowser HTML5 drag and drop example here: http://jsfiddle.net/rvRhM/1/
我在这里有一个独立的跨浏览器 HTML5 拖放示例：http: //jsfiddle.net/rvRhM/1/
Have a look at the dragstart and dragend events. dmis the element being dragged.
看看 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;
});
Be sure the reset the cursor when dragging ends:
确保在拖动结束时重置光标：
EventUtil.addHandler(dm, 'dragend', function(e) {
var target = EventUtil.getCurrentTarget(e);
target.style.backgroundColor = '';
target.style.cursor = 'default'; // Reset cursor
return true;
});
回答by Kurkula
Adding pure css solution, which may be useful for few folks. Use this class on the html element.
添加纯 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;
}
回答by eduedu87
I was trying to achieve the same and couldn't really find a nice solution. What I did in the end was setting an image to the dataTransfer and change its src with every action. That way the behavior is consistent across browsers at least. Here's a link to a page that I used as a reference:
我试图实现相同的目标，但无法真正找到一个好的解决方案。我最后所做的是将图像设置到 dataTransfer 并在每次操作时更改其 src。这样，行为至少在浏览器之间是一致的。这是我用作参考的页面的链接：
回答by zyrup
This worked for me:
这对我有用：
<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;
}
