Question

如何在拖动图像时删除重影图像。我们尝试过代码，它在Firefox和Chrome中工作，但在Safari中无法运行。请任何人帮助我的代码有什么错误。 https://jsfiddle.net/rajamsr/Lfuq5qb6/

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

Answer 1

您可以通过显示空/透明图像来阻止显示幻影预览：

document.addEventListener("dragstart", function( event ) {
    var img = new Image();
    img.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=';
    event.dataTransfer.setDragImage(img, 0, 0);
}, false);

Answer 2

您的代码导致内存问题。

相反使用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;
}

Answer 3

不要将event.target用作setDragImage的参数，这可能会导致内存问题。

您始终可以添加自定义图像，图像也可以是透明的PNG。

以下是一个例子。

＆＃13;

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";

＆＃13;

#drag-me {
  width: 100px;
  height: 100px;
  background-color: black;
  line-height: 100px;
  text-align: center;
}

#drag-me > img {
  vertical-align: middle;
}

＆＃13;

<div id="drag-me">
  <img src="https://jsfiddle.net/img/logo.png" draggable="true" />
</div>

＆＃13;

另一个选择是克隆节点元素并将其visibility设置为hidden。但是要使此选项起作用，必须将克隆元素添加到DOM中。

克隆节点的示例可能如下所示。我没有完全隐藏节点，所以你可以看到发生了什么。

＆＃13;

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);

＆＃13;

#drag-me {
  width: 100px;
  height: 100px;
  background-color: black;
  line-height: 100px;
  text-align: center;
}

#drag-me > img {
  vertical-align: middle;
}

＆＃13;

<div id="drag-me">
  <img src="https://jsfiddle.net/img/logo.png" draggable="true" />
</div>

＆＃13;

Answer 4

您可以只使用event.target并使用窗口的outerWidth和outerHeight

定位它

document.addEventListener("dragstart", function( event ) {
  event.dataTransfer.setDragImage(event.target, window.outerWidth, window.outerHeight);
}, false);

Answer 5

您可以将img draggable属性设置为false。

  <img id="" src="..." draggable="false">

要禁用图像选择，您可以使用

 <style>

img{
    user-drag: none; 
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
 } 

</style>

Answer 6

function removeGhosting(event) {
    if(!(event instanceof MouseEvent)) {
        console.info("Parameters must be of type MouseEvent!")
        return;
    }
    let dragIcon = document.createElement('img');
    dragIcon.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',
    dragIcon.width = 0;
    dragIcon.height = 0;
    dragIcon.opacity = 0;
    if(event.dataTransfer) {
        event.dataTransfer.setDragImage(dragIcon,0, 0);
    }
}

enter link description here

如何删除拖动（Ghost）图像？

6 个答案: