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

如何在拖動圖像時刪除幻影圖像。我們已經嘗試過代碼，它在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

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

回答

相關問題