隐藏拖动预览 - HTML拖放 [英] Hide Drag Preview - HTML Drag and Drop

问题描述

我在我的某个网站上拖放了功能。一旦你开始拖动我的一个可拖动的div，就会有一个透明的拖动元素预览。这实际上是我的用户准确地放置元素的方式，因为它们拖动的内容并不直接反映丢弃的内容。

有没有一种方法可以删除，或者更好的方式是将拖放预览更改为不同的图像？

解决方案

我相信你可以使用SetDragImage函数，它是Data Transfer API的一部分。

下面的链接有一些示例Javascript，它附加ondragstart事件的事件。使用DataTransfer API，您可以使用任何想要的图像来设置事件的拖动图像，甚至是不可见的图像。

.dragdemo {width ：170px; height：100px; line-height：100px; text-align：center; border-radius：6px;背景：绿色;颜色：#efe;}

< div id =拖动东西class =dragdemodraggable =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; / *或可见性：隐藏或上述任何* / document.body.appendChild（crt） ; e.dataTransfer.setDragImage（crt，0,0）;}，false）;< / script>

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

希望这会有所帮助

I have drag and drop functionality on one of my sites. Once you start dragging one of my dragable divs, there is a transparent preview of the dragged element. This is actually in the way of my users placing the element accurately, as what they are dragging does not directly reflect what is dropped.

Is there a way to remove, or better yet, change the drag preview to a different image?

解决方案

I believe you can use the SetDragImage function which is part of the Data Transfer API

The following link has some sample Javascript which attaches an event to the ondragstart event. Using the DataTransfer API you can then set the Drag Image of the event with any Image you want, even an invisible image.

.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

Hope this helps

这篇关于隐藏拖动预览 - HTML拖放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！