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


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

// As a jQuery method: $('#myImage').attr('draggable', false);
document.getElementById('myImage').draggable = false;
<img id="myImage" src="http://placehold.it/150x150">

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

Try it:

img{pointer-events: none;}

and try to avoid

*{pointer-events: none;}

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

img{-webkit-user-drag: none;}

Handle the dragstart event and return false.


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.


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

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>

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.


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

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.


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;

You can set the image that is shown when an item is dragged. Tested with Chrome.

setDragImage

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.


Need Your Help

Does it make sense to have a non static method which does not use an instance variable?

java methods static instance non-static

The compiler does not let a static method call a non static method. I understand it does this because a not static method usually ends up using an instance variable.

Concise Explanation of Core.logic

clojure scheme logic-programming minikanren clojure-core.logic

I want to use Clojure's Core.logic. However, I want to also understand how it works. Is there a concise explanation of it somewhere? (Like implementing a metacircular evaluator?)