20

I want to drag a div around using my own jQuery code.

This example on jsfiddle works fine when the mouse movements are slow

http://jsfiddle.net/craic/kr7Un/

But any fast movement pulls the mouse out of the box and the tracking is lost.

jQuery UI draggable doesn't have this problem and tracks just fine regardless of how fast you move: http://jqueryui.com/demos/draggable/

But I want to roll my own simple version so that I can integrate it with Raphael, key presses, etc. I've looked at the jQuery UI draggable source but it is, for me, pretty impenetrable (800 lines).

I don't think it is an issue with event bubbling... any ideas?

craic.com
  • 3,786
  • 5
  • 22
  • 17

1 Answers1

40

There are 2 issues. One is that you are canceling the drag when the mouse leaves the element, you don't want to do that. The 2nd is that the mousemove is only on box, once the cursor is out of the box it is no longer going to execute the mousemove. You can store the element which you are dragging and then add the mousemove to the entire page instead.

EDIT: Actually, I guess the mouseup should really also be on the document just in case you release the mouse click during a fast movement and your cursor is outside the box. Updated the jsfiddle.

See here:

http://jsfiddle.net/Jjgmz/1/

var box = $('#box');

box.offset({
    left: 100,
    top: 75
});

var drag = {
    elem: null,
    x: 0,
    y: 0,
    state: false
};
var delta = {
    x: 0,
    y: 0
};

box.mousedown(function(e) {
    if (!drag.state) {
        drag.elem = this;
        this.style.backgroundColor = '#f00';
        drag.x = e.pageX;
        drag.y = e.pageY;
        drag.state = true;
    }
    return false;
});


$(document).mousemove(function(e) {
    if (drag.state) {
        drag.elem.style.backgroundColor = '#f0f';

        delta.x = e.pageX - drag.x;
        delta.y = e.pageY - drag.y;

        $('#log').text(e.pageX + ' ' + e.pageY + ' ' + delta.x + ' ' + delta.y);

        var cur_offset = $(drag.elem).offset();

        $(drag.elem).offset({
            left: (cur_offset.left + delta.x),
            top: (cur_offset.top + delta.y)
        });

        drag.x = e.pageX;
        drag.y = e.pageY;
    }
});

$(document).mouseup(function() {
    if (drag.state) {
        drag.elem.style.backgroundColor = '#808';
        drag.state = false;
    }
});​
James Montagne
  • 77,516
  • 14
  • 110
  • 130
  • 1
    Brilliant! I had tried binding mousemove to the document but I hadn't saved the box element. Thank you! (and using jsfiddle to represent example code works so nicely) – craic.com Apr 22 '11 at 18:32
  • 1
    Thanks at June, 2018. It really bothers me for 3 days. Though I wonder why lost target when mouse is too fast? – GLPease Jun 05 '18 at 07:31
  • Out of curiosity I bolted resizing onto your solution, result here: https://jsfiddle.net/fs5wnemk/1 . But if it's compatible, then resizing via pure CSS is better: https://stackoverflow.com/a/60803488/490291 – user185953 Jan 19 '21 at 16:27