如何清除拖影(幻影)图像?
如何在拖动图像时删除幻影图像。我们已经尝试过代码,它在Firefox和Chrome中工作,但不能在Safari中工作。请任何人帮助我的代码的错误。 https://jsfiddle.net/rajamsr/Lfuq5qb6/如何清除拖影(幻影)图像?
document.addEventListener("dragstart", function(event) {
dragged = event.target;
event.dataTransfer.setDragImage(dragged, 11111110, 10);
}, false);
您的代码导致内存问题。
而是使用CSS来阻止用户拖动/选择,这在大多数浏览器,但也似乎在Firefox,它不工作,从而增加ondragstart="return false;"
到img
标签来解决这个问题看https://jsfiddle.net/Lfuq5qb6/1/
<img class="normal-logo hidden-xs" src="..." alt="logo" ondragstart="return false;"/>
img{
user-drag: none;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
}
错误
它只是停止draging。我们需要工作拖动功能。只是隐藏拖动或删除图像 –
啊你确定在你的问题不清楚,你仍然希望IMG拖动发生只是隐藏的轮廓/鬼影图像 – Bosc
不要使用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>
这里是跳跃我的记忆时,我开始拖动图像100%的代码,是应该做的,你要隐藏的图像拖为什么? – madalinivascu