CODEWITHSUNDEEP
javascripthtmlcss
user885355
user885355

Reputation: 3619

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

Upvotes: 266

Views: 297670

Answers (23)

Emin Temiz
Emin Temiz

Reputation: 101

Here are three different ways to prevent dragging of ghost image:

HTML

<img draggable="false" src="img/example.jpg">

JavaScript

document.querySelector('img').addEventListener('dragstart', (event) => {
  event.preventDefault();
});

CSS

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

References

There is currently no unprefixed user-drag or other version of the property implemented in browsers or on a standards track as the HTML draggable attribute/property is the preferred solution.

It's a Webkit-specific property. Here's what the WebKit documentation says about it:

Making an Element Draggable

WebKit provides automatic support to let users drag common items, such as images, links, and selected text. You can extend this support to include specific elements on an HTML page. For example, you could mark a particular div or span tag as draggable.

To mark an arbitrary element as draggable, add the -webkit-user-drag attribute to the style definition of the element. Because -webkit-user-drag is a cascading style sheet (CSS) attribute, you can include it as part of a style definition, or as an inline style attribute on the element tag. The values for this attribute are listed in Table 4-1.

Values for -webkit-user-drag attribute:

  • none: Do not allow this element to be dragged.

  • element: Allow this element to be dragged.

  • auto: Use the default logic for determining whether the element should be dragged. (Images, links, and text selections are the only elements that can be dragged.) This is the default value.

It's supported by all browsers using the WebKit rendering engine, so Chrome, newer versions of Opera, Safari, etc. Support in mobile browsers using WebKit may vary depending on the mobile OS.

Upvotes: 8

XPD
XPD

Reputation: 1215

You can wrap the img inside another div and apply pointer-events:none; to that div. So that the img will not be able to drag. But this should be utilized only if you are not intending to add any other behaviour to the image you are targeting.

.wrapper {
  pointer-events: none;
}
<div>
  <div class="wrapper">
    <img class="image" src="https://images.unsplash.com/photo-1575936123452-b67c3203c357?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60"/>
  </div>
</div>

Upvotes: 4

PowerKuu
PowerKuu

Reputation: 63

document.querySelectorAll("*").forEach((elem) => {
    elem.setAttribute('draggable', false)
    elem.addEventListener('dragstart', (event) => {
        event.preventDefault()
    })
})

This disables drag on all elements.

Upvotes: 1

BoltClock
BoltClock

Reputation: 723498

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="https://cdn.sstatic.net/Sites/stackoverflow/Img/apple-touch-icon.png">

Or direclty with HTML:

<img id="myImage" src="https://link-to-your.image.com/image.png" draggable="false">

Note that draggable="false" can also used on other HTML elements than img.

Upvotes: 336

Pankaj
Pankaj

Reputation: 131

//disable image dragging

$(document).on("dragstart", function (e) {
  e.preventDefault();
});

This requires jQuery. This prevent dragging of anything text or img. Replace document with your any element you want to prevented from dragging.

Upvotes: 0

CPHPython
CPHPython

Reputation: 13709

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:

Firefox user-drag CSS rules rejected

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

Upvotes: 2

MD SHAYON
MD SHAYON

Reputation: 8055

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="" />

Upvotes: 21

HongJiseong
HongJiseong

Reputation: 3

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

Upvotes: 0

Wilson Delgado
Wilson Delgado

Reputation: 3

This work for me, i use some lightbox scripts

.nodragglement {
    transform: translate(0px, 0px)!important;
}

Upvotes: -3

lubosdz
lubosdz

Reputation: 4500

<img src="myimage.jpg" ondragstart="return false;" />

Upvotes: 11

Justin
Justin

Reputation: 1059

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)

Upvotes: 13

Max
Max

Reputation: 1573

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

Upvotes: 154

Erik Rybalkin
Erik Rybalkin

Reputation: 1251

Try it:

img {
  pointer-events: none;
}

and try to avoid

* {
  pointer-events: none;
}

Upvotes: 60

Thibauld Nuyten
Thibauld Nuyten

Reputation: 29

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.

Upvotes: 0

Micros
Micros

Reputation: 6340

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.

Upvotes: 1

Beejor
Beejor

Reputation: 9378

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.

Upvotes: 30

Derek Wade
Derek Wade

Reputation: 746

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

Upvotes: 1

Ashwani
Ashwani

Reputation: 303

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

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

Upvotes: 25

Tama Yoshi
Tama Yoshi

Reputation: 313

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;

Upvotes: 0

dijipiji
dijipiji

Reputation: 3109

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.

Upvotes: 3

louisinhongkong
louisinhongkong

Reputation: 561

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

Upvotes: 4

SLaks
SLaks

Reputation: 887305

Handle the dragstart event and return false.

Upvotes: 10

Michael Jasper
Michael Jasper

Reputation: 8058

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>

Upvotes: 3

Related Questions