Wie entferne ich ein Drag-(Ghost-)Bild?

So entfernen Sie Geisterbilder, wenn Sie das Bild ziehen. Wir haben Code ausprobiert, er funktioniert in Firefox und Chrome, aber nicht in Safari. Bitte helfen Sie mir, was der Fehler in meinem Code ist.
https://jsfiddle.net/rajamsr/Lfuq5qb6/

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

Sie können die Anzeige der Geistervorschau verhindern, indem Sie ein leeres/transparentes Bild anzeigen:

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

Benutzen Sie das nicht event.target als Argument dafür setDragImagedies ist wahrscheinlich die Ursache für die Speicherprobleme hier.

Sie können jederzeit ein benutzerdefiniertes Bild hinzufügen. Das Bild könnte auch ein transparentes PNG sein.

Hier ist ein Beispiel, wie das geht.

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>

Eine andere Möglichkeit wäre, einfach das Knotenelement zu klonen und festzulegen visibility Zu hidden. Damit diese Option funktioniert, ist es jedoch erforderlich, das geklonte Element zum DOM hinzuzufügen.

Ein Beispiel mit dem geklonten Knoten könnte so aussehen. Ich verstecke den Knoten nicht vollständig, damit Sie sehen können, was passiert.

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>

Du könntest einfach das verwenden event.target und positionieren Sie es mithilfe des Fensters outerWidth Und outerHeight

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

JSfiddle öffnet sich nicht mehr, daher verstehe ich den Kontext nicht, funktioniert aber bei mir in Chrome

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

Ihr Code verursacht Speicherprobleme.

Verwenden Sie stattdessen CSS, um das Ziehen/Auswählen durch den Benutzer zu stoppen. Dies funktioniert in den meisten Browsern, aber es gibt anscheinend einen Fehler in Firefox, der dazu führt, dass es nicht funktioniert, also fügen Sie es hinzu ondragstart="return false;" Zu img Tags, um dieses Problem zu beheben, siehe https://jsfiddle.net/Lfuq5qb6/1/

<img class="normal-logo hidden-xs" src="https://stackoverflow.com/questions/38655964/..." 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;
}

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

Geben Sie hier die Linkbeschreibung ein

Sie können das Attribut „img Draggable“ auf „false“ setzen.

  <img id="" src="https://stackoverflow.com/questions/38655964/..." draggable="false">

Und um die Auswahl für Bilder zu deaktivieren, können Sie verwenden

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