¿Cómo eliminar la imagen de arrastre (fantasma)?

Cómo eliminar la imagen fantasma al arrastrar la imagen. Hemos probado el código, funciona en Firefox y Chrome pero no funciona en Safari. Por favor, alguien que me ayude, ¿cuál es el error de mi código?
https://jsfiddle.net/rajamsr/Lfuq5qb6/

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

Puede evitar mostrar la vista previa fantasma mostrando una imagen vacía/transparente:

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

No use el event.target como argumento para setDragImageesto probablemente esté causando los problemas de memoria aquí.

Siempre puede agregar una imagen personalizada, la imagen también podría ser un PNG transparente.

Aquí hay un ejemplo de cómo va eso.

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>

Otra opción sería simplemente clonar el elemento del nodo y establecer su visibility a hidden. Pero para que esta opción funcione es necesario agregar el elemento clonado al DOM.

Un ejemplo con el nodo clonado podría verse así. No estoy ocultando el nodo por completo, para que pueda ver lo que está sucediendo.

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>

Podrías simplemente usar el event.target y colóquelo usando la ventana outerWidth y outerHeight

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

Su código está causando problemas de memoria.

En su lugar, use css para detener el arrastre/selección del usuario, esto funciona en la mayoría de los navegadores, pero parece que hay un error en Firefox que no funciona, así que agregue ondragstart="return false;" a img etiquetas para arreglar esto ver 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);
    }
}

ingrese la descripción del enlace aquí

Puede establecer el atributo arrastrable de img en falso.

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

Y para deshabilitar la selección de imágenes, puede usar

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