如何刪除拖動（重影）圖像？

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

你可以只使用event.target並使用窗口的outerWidth和outerHeight來定位它

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

Answer 3

不要使用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>

Answer 4

您的代碼導致內存問題。

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

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

在此處輸入鏈接描述

Answer 6

JSfiddle 不再打開，所以我不明白上下文，但在 Chrome 中對我有用

const canvas = document.createElement('canvas');
event.dataTransfer.setDragImage(canvas, 0, 0);
canvas.remove();

Answer 7

您可以將 img 可拖動屬性設置為 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>