隐藏拖动预览 - HTML 拖放

Question

我在我的网站上实现了拖放功能。一旦您开始拖动可拖动的div之一，就会出现被拖动元素的透明预览。这实际上妨碍了我的用户准确地放置元素，因为他们拖动的内容并不直接反映所放置的内容。

是否有方法可以删除或更改拖动预览为不同的图像？

- Kirk Logan

Answer 1

我相信你可以使用Data Transfer API的SetDragImage函数。

以下链接中提供了一些示例JavaScript，可以将事件附加到ondragstart事件上。使用DataTransfer API，您可以使用任何图像设置事件的拖动图像，甚至是不可见图像。

.dragdemo {
    width: 170px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    border-radius: 6px;
    background: green; color: #efe;
}

<div id="drag-something" class="dragdemo" draggable="true">drag me</div>
<script>
document.getElementById("drag-something").addEventListener("dragstart", function(e) {
    var crt = this.cloneNode(true);
    crt.style.backgroundColor = "red";
    crt.style.display = "none"; /* or visibility: hidden, or any of the above */
    document.body.appendChild(crt);
    e.dataTransfer.setDragImage(crt, 0, 0);
}, false);
</script>

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

希望这能帮到你。

- ctregan

---

正是我在寻找的内容。我知道这里一定有某种内置功能，只是找不到它！谢谢！ - Kirk Logan

隐藏拖动图像的另一种方法可能是使用类似于 event.dataTransfer.setDragImage(new Image(), 0, 0) 的代码。 - benvc

不确定为什么，但上面的评论对我没用；没有图像的src，拖动事件就不会触发。因此，我将src设置为透明像素。 - Ben Robinson