8

I'm trying to do a simple drag script. The idea is to save the position when the mouse is down, update the view while the mouse is moving, and stop when mouse is up. Problem, mouseup event isn't working properly.

See the code:

var target = $('a')
var pos = 0;
var dragging = false;

$(document).mousedown(function(e) { pos=e.pageX; dragging = true })
$(document).mouseup(function() { dragging = false })
$(document).mousemove(function(e) {
    if(dragging){ 
        target.css('left', e.pageX-pos);
    }
})  ​

Why mouseup works with a "a" tag: http://jsfiddle.net/leyou/c3TrG/1/

And why mouseup doesn't work with a "img" tag: http://jsfiddle.net/leyou/eNwzv/

Just try to drag them horizontally.

Same probleme on ie9, ff and chrome. Windows7

leyou
  • 806
  • 1
  • 13
  • 25

1 Answers1

29

Just add e.preventDefault() to your mousedown handler, like this:

var target = $('img')
var pos = 0;
var dragging = false;

$(document).mousedown(function(e) { e.preventDefault(); pos=e.pageX; dragging = true })
$(document).mouseup(function() { dragging = false })
$(document).mousemove(function(e) {
    if(dragging){ 
        target.css('left', e.pageX-pos);
    }
})

See working demo .

The rationale for the fix is, that the browser was also doing his own native image drag-and-drop (like when eg. you drag an image out of the browser to drop it in an external application) so you need to cancel that default native drag-and-drop with .preventDefault() .

Nelson
  • 49,283
  • 8
  • 68
  • 81
  • Can you explain why don't we have to use `preventDefault` in `mousemove` event? The drag-drop problem appears while the image is being dragged. – user31782 Jun 26 '16 at 12:48
  • Have similar issue, and I found mouseup not work because of text selection. When I add e.preventDefault, there is no text selection anymore. – degr Aug 21 '19 at 07:44