隐藏拖动预览 - HTML 拖放

Question

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

有没有办法删除或更好地将拖动预览更改为不同的图像？

Answer 1

我相信您可以使用 SetDragImage 函数，它是数据传输 API 的一部分

以下链接有一些示例 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

希望这有帮助