CODEWITHSUNDEEP
javascripthtmlcss
darKnight
darKnight

Reputation: 6481

Prevent Image dragging in Firefox

I have a link with background image which is in a carousel. The problem is that whenever the user drags the carousel, the image get dragged instead with a ghost image visible when dragging. This causes inconsistent dragging behaviour for the carousel. I tried using user-select : none, but it only works in Chrome and Edge. How do I disable image dragging in Firefox? Adding draggable="false" on anchor tag also doesn't work

Run below code in Firefox to test. Try to drag the image and observe the behaviour.

.disable-dragging  {
  display: block;
  width: 200px;
  height: 200px;
  background-image: url("https://homepages.cae.wisc.edu/~ece533/images/fruits.png");
  background-size: cover;
  background-color: #cccccc;
  user-select: none;
}
<a href="#" class="disable-dragging" draggable="false"></a>

Upvotes: 0

Views: 1340

Answers (2)

VnoitKumar
VnoitKumar

Reputation: 1426

You have missed the = in the HTML attribute

<a href="#" class="disable-dragging" draggable="false"></a>

And remove user-select: none;

Full working code

.disable-dragging {
  display: block;
  width: 200px;
  height: 200px;
  background-image: url('https://homepages.cae.wisc.edu/~ece533/images/fruits.png');
  background-size: cover;
  background-color: #cccccc;
  /* user-select: none; */
}
<a href="https://google.com" class="disable-dragging" draggable="false"></a>

Update:

As @kaiido said in the comment user-select has an influence here.

And is an open issue in firefox - https://bugzilla.mozilla.org/show_bug.cgi?id=1376369

Upvotes: 4

Muhammed Sidan
Muhammed Sidan

Reputation: 331

You can prevent default action on mousedown event for the image

<img src="test.png" onmousedown="if (event.preventDefault) event.preventDefault()">

You can disable this for all image using

window.onload = function (e) {
    var evt = e || window.event, imgs, i;
  
    if (evt.preventDefault) {
        imgs = document.getElementsByTagName('img');
        for (i = 0; i < imgs.length; i++) {
            imgs[i].onmousedown = disableDragging;
        }
    }
};
 
function disableDragging(e) {
    e.preventDefault();
}

In your case you can replace the tag

Upvotes: 1

Related Questions