flexible drag/drop with jquery (like this javascript)

Question

I'm trying to understand how this drag/drop javascript example would be done in jquery. I'm guessing the jquery version will be cleaner, more efficient, and easier to understand.

Answer 1

Check out jQueryUI. They have a lot of cool stuff, including drag/drop, that's really easy to use.

Answer 2

Take a look on this from Jquery ui

Answer 3

Check out http://jqueryui.com/demos/draggable/ . you can view the source. You'll need to link to jquery and to jquery ui.

Answer 4

This is how i do it w/o using jQuery UI. Assumes you've styled .draggable to also be position: absolute:

var $draggable = null, startX, startY;

$('.draggable').live('mousedown', function(ev) {
    $draggable = $(this);
    var pos = $draggable.position();
    startX = ev.pageX - pos.left;
    startY = ev.pageY - pos.top;
    return false;
});

$(document).bind('mousemove', function(ev) {
    if ($draggable) {
        $draggable.css({ left: ev.pageX - startX, top: ev.pageY - startY});
        return false;
    }
});

$(document).bind('mouseup', function(ev) {
    if ($draggable) {
        $draggable = null;
        return false;
    }
});