使用jquery灵活拖放（像这个javascript）

Question

我正在尝试了解如何在jquery中完成 this drag/drop javascript example 。我猜测jquery版本会更干净，更高效，更容易理解。

Answer 1

这是我如何使用jQuery UI做的。假设您的样式.draggable也是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;
    }
});

Answer 2

结帐jQueryUI。它们有很多很酷的东西，包括拖放，这很容易使用。

Answer 3

从Jquery ui

查看此内容

Answer 4

结帐http://jqueryui.com/demos/draggable/。你可以查看来源。你需要链接到jquery和jquery ui。