CSS /JS to prevent dragging of ghost image?
JavascriptHtmlCssJavascript Problem Overview
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
Javascript Solutions
Solution 1 - Javascript
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">
Solution 2 - Javascript
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;
}
Solution 3 - Javascript
Try it:
img {
pointer-events: none;
}
and try to avoid
* {
pointer-events: none;
}
Solution 4 - Javascript
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.
Solution 5 - Javascript
You can use a CSS property to disable images in webkit browsers.
img{-webkit-user-drag: none;}
Solution 6 - Javascript
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="" />
Solution 7 - Javascript
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)
Solution 8 - Javascript
<img src="myimage.jpg" ondragstart="return false;" />
Solution 9 - Javascript
Handle the dragstart
event and return false
.
Solution 10 - Javascript
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);
}
});
Solution 11 - Javascript
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>
Solution 12 - Javascript
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.
Solution 13 - Javascript
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);
Solution 14 - Javascript
There is a much easier solution here than adding empty event listeners.
Just set pointer-events: none
to your image. If you still need it to be clickable, add a container around it which triggers the event.
Solution 15 - Javascript
When Firefox does not appreciate your draggable attribute (when set to false) or none of your user-drag CSS rules in your link/anchor or image element:
And you want to keep pointer-events as they are, you may use the big guns for that ghostly "translucent image generated from the drag target (the element the dragstart event is fired at)" as described in MDN setDragImage. Simply use:
if (/(firefox)/i.test(navigator.userAgent)) {
document.querySelector('.my-non-draggable').addEventListener('dragstart',
e => e.preventDefault()
);
// or jQuery: $('.my-non-draggable').on('dragstart', e => e.preventDefault());
}
Solution 16 - Javascript
Tested on Firefox: removing and putting back the image works! And it's transparent at the execution, too. For instance,
$('.imageContainerClass').mousedown(function() {
var id = $(this).attr('id');
$('#'+id).remove();
$('#'+id).append('Image tag code');
});
EDIT: This works only on IE and on Firefox, strangely. I also added draggable = false
on each image. Still a ghost with Chrome and Safari.
EDIT 2: The background-image solution is genuinely the best one. The only subtlety is that the background-size
property has to be redefined every time the background-image is changed! Or so, that's what it looked like from my side. Better still, I had an issue with normal img
tags under IE, where IE failed to resize the images. Now, the images have the correct dimensions. Simple:
$(id).css( 'background-image', url('blah.png') );
$(id).css( 'background-size', '40px');
Also, perhaps consider those:
background-Repeat:no-repeat;
background-Position: center center;
Solution 17 - Javascript
You can set the image that is shown when an item is dragged. Tested with Chrome.
use
onclick = myFunction();
myFunction(e) {
e.dataTransfer.setDragImage(someImage, xOffset, yOffset);
}
Alternatively, as already mentioned in the answers, you can set draggable="false"
on the HTML element, if not being able to drag the element at all is no issue.
Solution 18 - Javascript
You can use "Empty Img Element".
Empty Img Element - document.createElement("img")
[HTML Code]
<div id="hello" draggable="true">Drag!!!</div>
[JavaScript Code]
var block = document.querySelector('#hello');
block.addEventListener('dragstart', function(e){
var img = document.createElement("img");
e.dataTransfer.setDragImage(img, 0, 0);
})
Solution 19 - Javascript
This work for me, i use some lightbox scripts
.nodragglement {
transform: translate(0px, 0px)!important;
}