我在我的网站上实现了拖放功能。一旦您开始拖动可拖动的div之一,就会出现被拖动元素的透明预览。这实际上妨碍了我的用户准确地放置元素,因为他们拖动的内容并不直接反映所放置的内容。
是否有方法可以删除或更改拖动预览为不同的图像?
我在我的网站上实现了拖放功能。一旦您开始拖动可拖动的div之一,就会出现被拖动元素的透明预览。这实际上妨碍了我的用户准确地放置元素,因为他们拖动的内容并不直接反映所放置的内容。
是否有方法可以删除或更改拖动预览为不同的图像?
我相信你可以使用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
希望这能帮到你。
event.dataTransfer.setDragImage(new Image(), 0, 0)
的代码。 - benvc