гибкое перетаскивание с jquery (как этот JavaScript)

Question

Я пытаюсь понять, как этот пример перетаскивания javascript будет выполнен в jquery Я предполагаю, что версия 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

Взгляните на это из JQuery UI

Answer 3

Выезд http://jqueryui.com/demos/draggable/.Вы можете просмотреть источник.Вам нужно будет связаться с jquery и jquery ui.

Answer 4

Проверить jQueryUI . У них есть много интересных вещей, включая перетаскивание, которые действительно просты в использовании.