我有一个简单的 html，例如:
<!DOCTYPE HTML>
<html>
<head>
<style>
.drag-icon{height: 100px; width: 100px; background-color: red}
</style>
<script>
function drag(ev) {
var drag_icon = document.createElement("div")
drag_icon.className = "drag-icon"
ev.dataTransfer.setData("text/html", drag_icon);
}
</script>
</head>
<body>
<div style="height: 100px; width: 100px; background-color: #CCC" draggable="true" ondragstart="drag(event)">
Hellooww world
</div>
</body>
</html>
这里当我拖动div的时候，一边拖动我的div一边被拖动。
我想要的是当我拖动 div 时，拖动的 div 应该更改为 drag_icon。
我该怎么做？
最佳答案
你应该使用dataTransfer.setDragImage而不是setData，你还需要将元素附加到DOM，否则你将无法在拖动时看到元素。
拖动开始事件应该像这样改变:
var drag = function(e,node) {
var drag_icon = document.createElement("div")
drag_icon.className = "drag-icon";
drag_icon.style.position = "absolute";
drag_icon.style.top = "-100px";
drag_icon.style.right = "0px";
document.body.appendChild(drag_icon);
e.dataTransfer.setDragImage(drag_icon, 0, 0);
}
请记住，您应该将该元素附加到用户不可见的屏幕部分，因此将其放置在窗口的外面，首先我将其放置在最右边但它会导致主体滚动，因此隐藏 overflow-x没关系。
body{
overflow-x:hidden;
}
然后我把位置改到最上面，用这种方法不需要改变体型
有一个工作 fiddle Here
有关更多信息和完整演练，请查看 Setting a custom ghost image when using HTML5 drag and drop
关于javascript - html5 拖动更改拖动图像或图标，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37958394/