CSS /JS to prevent dragging of ghost image?

Is there a way to prevent the user from seeing a ghost of the image they are trying to drag (not concern about security of the images, but the experience).

I've tried this which fixes the problem with the blue selection on text and images but not the ghost image:

img {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}


(I also tried nesting the image inside a div with the same rules applied to the div). Thanks

Answers

Very simple don't make it complicated with lots of logic use simple attribute draggable and make it false

<img draggable="false" src="img/magician.jpg" alt="" />
Posted on by MD SHAYON
<img src="myimage.jpg" ondragstart="return false;" />
Posted on by lubosdz

The be-all-end-all, for no selecting or dragging, with all browser prefixes:

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
-ms-user-select: none;
user-select: none;

-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
-ms-user-drag: none;
user-drag: none;



You can also set the draggable attribute to false. You can do this with inline HTML: draggable="false", with Javascript: elm.draggable = false, or with jQuery: elm.attr('draggable', false).

You can also handle the onmousedown function to return false. You can do this with inline HTML: onmousedown="return false", with Javascript: elm.onmousedown=()=>return false;, or with jQuery: elm.mousedown(()=>return false)

Posted on by Justin

I think you can change your

img {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

into a

img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}
Posted on by Anonymous

Try it:

img {
  pointer-events: none;
}

and try to avoid

* {
  pointer-events: none;
}
Posted on by Erik Rybalkin

You can set the draggable attribute to false in either the markup or JavaScript code.

// As a jQuery method: $('#myImage').attr('draggable', false);
document.getElementById('myImage').setAttribute('draggable', false);


<img id="myImage" src="http://placehold.it/150x150">


Posted on by BoltClock

There is a much easier solution here than adding empty event listeners. Just set pointer-events: noneto your image. If you still need it to be clickable, add a container around it which triggers the event.

Posted on by Micros

This will disable dragging for an image in all browsers, while preserving other events such as click and hover. Works as long as any of HTML5, JS, or CSS are available.

<img draggable="false" onmousedown="return false" style="user-drag: none" />

If you're confident the user will have JS, you only need to use the JS attribute, etc. For more flexibility, look into ondragstart, onselectstart, and some WebKit tap/touch CSS.

Posted on by Beejor

I found that for IE, you must add the draggable="false" attribute to images and anchors to prevent dragging. the CSS options work for all other browsers. I did this in jQuery:

$("a").attr('draggable', false); 
$("img").attr('draggable', false);
Posted on by Derek Wade

You can use a CSS property to disable images in webkit browsers.

img{-webkit-user-drag: none;}
Posted on by Ashwani

For Firefox you need to go a little deeper with this:

var imgs = document.getElementsByTagName('img');

    // loop through fetched images
    for (i = 0; i < imgs.length; i++) {
        // and define onmousedown event handler
        imgs[i].onmousedown = disableDragging;
    }

function disableDragging(e) {
	    e.preventDefault();
	}

Enjoy.

Posted on by dijipiji

You can assign an alternate ghost image if you really need to use drag events and can't set draggable=false. So just assign a blank png like so:

    $('#img').bind({
	    dragstart: function(e) {
	    	var dragIcon = document.createElement('img');
	    	dragIcon.src = 'blank.png';
	    	dragIcon.width = 100;
	    	e.dataTransfer.setDragImage(dragIcon, -10, -10);
	    }
    });
Posted on by Anonymous

Handle the dragstart event and return false.

Posted on by SLaks

Place the image as a background of an empty div, or under a transparent element. When the user clicks on the image to drag, they are clicking on a div.

See http://www.flickr.com/photos/thefella/5878724253/?f=hp

<div id="photo-drag-proxy"></div>


Posted on by Michael Jasper

Relevant tags