ドラッグ（ゴースト）画像を削除するには？

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

あなたのコードは、メモリの問題を引き起こしています。

代わりに、これはほとんどのブラウザで動作しますが、それ、これは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; 
} 

を参照してください修正する ondragstart="return false;" imgにタグを追加するように動作しないことFirefoxのようでバグがあり、選択/ユーザードラッグを停止するには、CSSを使用

Answer 2

setDragImageの引数としてevent.targetを使用しないでください。これはメモリの問題を引き起こしている可能性があります。

いつでもカスタム画像を追加できます。画像は透明な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>

別のオプションは、単にノード要素のクローンを作成し、そのvisibilityhiddenに設定することです。しかし、このオプションを機能させるには、クローンされた要素を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>