CODEWITHSUNDEEP
javascriptjquerycss
Shanmuga Kumar
Shanmuga Kumar

Reputation: 301

How to remove drag(Ghost) image?

How to remove ghost image when drag the image. We have tried code, its working in Firefox and chrome but not working in Safari. Please any one help what is the mistake of my code. https://jsfiddle.net/rajamsr/Lfuq5qb6/

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

Upvotes: 30

Views: 32959

Answers (7)

letUser
letUser

Reputation: 201

JSfiddle no longer opens so I don't understand the context but works for me in Chrome

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

Upvotes: 0

bojue
bojue

Reputation: 52

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

enter link description here

Upvotes: -1

Abhishek Kashyap
Abhishek Kashyap

Reputation: 41

You can set img draggable attribute to false.

  <img id="" src="..." draggable="false">

And to disable selection on images, you can use

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

Upvotes: -6

Rannie Aguilar Peralta
Rannie Aguilar Peralta

Reputation: 1742

You could just use the event.target and position it using the window's outerWidth and outerHeight

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

Upvotes: 6

Walid Ajaj
Walid Ajaj

Reputation: 578

You can prevent showing the ghost preview by showing empty/transparent image:

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

Upvotes: 38

DavidDomain
DavidDomain

Reputation: 15293

Do not use the event.target as an argument to setDragImage, this is probably causing the memory issues here.

You can always add a custom image, the image could as well be a transparent PNG.

Here is an example how that goes.

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>

Another option would be to just clone the node element and set its visibility to hidden. But for this option to work it is necessary to add the cloned element to the DOM.

An example with the cloned node could look like this. I am not hiding the node completely, so you can see what is happening. 

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>

Upvotes: 4

Bosc
Bosc

Reputation: 1509

Your code is causing memory issues.

Instead use css to stop user-drag/select, this works in most browsers but there is a bug it seems in firefox that it doesn't work so add ondragstart="return false;" to img tags to fix this see 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;
}

Upvotes: -1

Related Questions