如何删除拖动(重影)图像？
如何删除拖动(重影)图像？
提问于 2016-07-29 18:01:44
如何在拖动图像时删除重影图像。我们已经尝试过代码，它在Firefox和chrome中工作，但在Safari中不起作用。请任何人帮助我的代码的错误是什么。https://jsfiddle.net/rajamsr/Lfuq5qb6/
document.addEventListener("dragstart", function( event ) {
dragged = event.target;
event.dataTransfer.setDragImage(dragged, 11111110, 10);
}, false);回答 6
Stack Overflow用户
发布于 2018-03-28 21:03:54
您可以通过显示空/透明图像来阻止显示重影预览：
document.addEventListener("dragstart", function( event ) {
var img = new Image();
img.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=';
event.dataTransfer.setDragImage(img, 0, 0);
}, false);Stack Overflow用户
发布于 2019-06-03 16:41:36
您只需使用event.target并使用窗口的outerWidth和outerHeight对其进行定位
document.addEventListener("dragstart", function( event ) {
event.dataTransfer.setDragImage(event.target, window.outerWidth, window.outerHeight);
}, false);Stack Overflow用户
发布于 2016-07-29 19:48:16
不要将event.target用作setDragImage的参数，这可能会导致此处的内存问题。
您可以随时添加自定义图像，该图像也可以是透明的PNG。
下面是一个如何实现的示例。
var dragMe = document.getElementById("drag-me"),
img = new Image();
img.onload = function () {
dragMe.addEventListener("dragstart", function(e) {
e.dataTransfer.setDragImage(img, 0, 0);
}, false);
}
img.src = "http://placehold.it/150/000000/ffffff?text=GHOST";#drag-me {
width: 100px;
height: 100px;
background-color: black;
line-height: 100px;
text-align: center;
}
#drag-me > img {
vertical-align: middle;
}<div id="drag-me">
<img src="https://jsfiddle.net/img/logo.png" draggable="true" />
</div>
另一种选择是只克隆节点元素，并将其visibility设置为hidden。但是为了让这个选项起作用，有必要将克隆的元素添加到DOM中。
克隆节点的示例可能如下所示。我没有完全隐藏节点，所以您可以看到发生了什么。
var dragMe = document.getElementById("drag-me");
dragMe.addEventListener("dragstart", function(e) {
var clone = this.cloneNode(true);
clone.style.opacity = 0.1; // use opacity or
//clone.style.visibility = "hidden"; // visibility or
//clone.style.display = "none"; // display rule
document.body.appendChild(clone);
e.dataTransfer.setDragImage(clone, 0, 0);
}, false);#drag-me {
width: 100px;
height: 100px;
background-color: black;
line-height: 100px;
text-align: center;
}
#drag-me > img {
vertical-align: middle;
}<div id="drag-me">
<img src="https://jsfiddle.net/img/logo.png" draggable="true" />
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38655964
复制相关文章
相似问题
腾讯云开发者
