如何清除拖影（幻影）图像？

如何在拖动图像时删除幻影图像。我们已经尝试过代码，它在Firefox和Chrome中工作，但不能在Safari中工作。请任何人帮助我的代码的错误。 https://jsfiddle.net/rajamsr/Lfuq5qb6/如何清除拖影（幻影）图像？

document.addEventListener("dragstart", function(event) { 
     dragged = event.target; 
     event.dataTransfer.setDragImage(dragged, 11111110, 10); 
}, false);

来源

2016-07-29 Shanmuga Kumar

这里是跳跃我的记忆时，我开始拖动图像100％的代码，是应该做的，你要隐藏的图像拖为什么？ – madalinivascu

您的代码导致内存问题。

而是使用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; 
}

错误

来源

2016-07-29 10:24:18 Bosc

它只是停止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>

来源

2016-07-29 11:48:15 DavidDomain

如何清除拖影（幻影）图像？

回答

相关问题