隐藏拖动预览 - HTML 拖放

Question

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

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

Answer 1

我相信您可以使用作为数据传输一部分的 SetDragImage 函数 API

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

希望对您有所帮助

隐藏拖动预览 - HTML 拖放

Hide Drag Preview - HTML Drag and Drop

javascript

jquery

html

css

drag-and-drop