jquery - 没有 jQuery UI 的可拖动 div

Question

我试图在不使用 jQuery UI 的情况下使 div 可拖动。

但是，我坚持使用下面的代码。我知道我应该使用相对于容器 div 的鼠标位置(div 将被拖动)并且我应该设置 div 相对于这些值的偏移量。

我就是不知道怎么办。有什么线索吗？

这是(当然)不起作用的代码:

var X, Y;

$(this).mousedown(function() {
    $(this).offset({ 
        left: X, 
        top: Y
    });
});

$("#containerDiv").mousemove(function(event) {
    X = event.pageX;
    Y = event.pageY;
});

Answer 1

这是一个真正可能会让您入门的简单示例:

$(document).ready(function() {
    var $dragging = null;

    $(document.body).on("mousemove", function(e) {
        if ($dragging) {
            $dragging.offset({
                top: e.pageY,
                left: e.pageX
            });
        }
    });


    $(document.body).on("mousedown", "div", function (e) {
        $dragging = $(e.target);
    });

    $(document.body).on("mouseup", function (e) {
        $dragging = null;
    });
});

示例: http://jsfiddle.net/Jge9z/

I understand that I shall use the mouse position relative to the container div (in which the div shall be dragged) and that I shall set the divs offset relative to those values.

不太确定。在我看来，在拖放操作中，您总是想要使用元素相对于文档的偏移量。

如果你的意思是你想将拖动限制在特定区域，那是一个更复杂的问题(但仍然可行)。