我的一个网站具有拖放功能。一旦您开始拖动我的可拖动 div 之一,就会出现所拖动元素的透明预览。这实际上妨碍了我的用户准确放置元素的方式,因为他们拖动的内容并不直接反映删除的内容。
有没有办法删除或更好地将拖动预览更改为不同的图像?
我相信您可以使用 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
希望这可以帮助
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)