CODEWITHSUNDEEP
javascripthtmlcssfirefox
Jeanluca Scaljeri
Jeanluca Scaljeri

Reputation: 29109

css: dragging image doesn't work in Firefox

I'm trying to move an image around when the user clicks the image and starts moving: DEMO It works in Chrome, but has strange behaviour in FF

HTML: 

<div id="parent">
    <img .... >
</div>

And I handle the javascript as follows

JS: 

var move = false, prevX;
$('img').on('mousedown', function(e) {
   move = true;
   prevX = e.pageX;
})
  .on('mousemove', function(e) {
      if (move === true) {
          var x = parseInt($(this).css('left')) + e.pageX - prevX;
          $(this).css('left', x);
          prevX = e.pageX;
      }
})
  .on('mouseup', function(e) {
      move = false;
});

(In my own code I do a little bit more because you are not allowed to move the image outside certain boundaries)

I don't know why, but in Firefox you can select the image and then it doesn't work anymore. Any suggestions how to fix this in FF ?

Upvotes: 5

Views: 197

Answers (2)

SW4
SW4

Reputation: 71150

Add

$(document).on("dragstart", function() {
     return false;
});

To the top of your Javascript, this intercepts and prevents the default drag behaviour in the browser, whilst allowing you to override it later to suit your needs. The net effect being the default image ghosting you see on drag in Firefox is prevented by default.

FIDDLE

Upvotes: 2

dfsq
dfsq

Reputation: 193261

You need to return false in your mousedown handler to prevent default browser behavior:

$('img').on('mousedown', function(e) {
    move = true;
    prevX = e.pageX;
    return false;
})

http://jsfiddle.net/7Lhf3/5/

Upvotes: 6

Related Questions