Question

为了好玩，我一直试图创建自己的可拖动div，我遇到了一两个问题。

第一个也是最烦人的是试图允许用户从他们碰巧点击的div中拖动。这在左上角和右下角都很好用。然而，在左下角和右上角，它们会翻转，就像你点击一个然后它跳到另一个。我似乎无法为此提出解决方案。

 function DragMe(e) {
    var relativeXPosition = (e.pageX - this.offsetLeft);
    var relativeYPosition = (e.pageY - this.offsetTop);
    $(document).on('mousemove',function(e) {
       $('.move').offset({
           top: e.pageY - relativeXPosition,
           left: e.pageX - relativeYPosition,
        });
    });
};

$('.move').on('mousedown', DragMe);

$('.move').mouseup(function() {
    $(this).off('mousedown');
    $(document).off('mousemove');
    $('.move').on('mousedown', DragMe);
});

http://jsfiddle.net/VpM9j/

这是我到目前为止所拥有的，如果有人知道如何开始在多个div上开展这项工作，那将是非常棒的。我之前尝试过，但它只是把所有的div一起拍了下来，所以一个人就会消失。

我理解这可能与jQuery UI一样，但我希望现在避免这样做，因为我还在学习，因为它更具挑战性。

Answer 1

答案很简单：你在回调函数

中混合了X和Y.

function DragMe(e) {
    var relativeXPosition = (e.pageX - this.offsetLeft);
    var relativeYPosition = (e.pageY - this.offsetTop);
    $(document).on('mousemove',function(e) {
       $('.move').offset({
           top: e.pageY - relativeYPosition, // you had relativeXPosition here
           left: e.pageX - relativeXPosition, // you had relativeYPosition here
        });
    });
};

$('.move').on('mousedown', DragMe);

$('.move').mouseup(function() { // drop the other offs and ons
    $(document).off('mousemove');
});

请参阅：http://jsfiddle.net/VpM9j/2/

回答你的第二个问题：

function DragMe(e) {
    var dragDiv = e.target;
    var relativeXPosition = (e.pageX - dragDiv.offsetLeft);
    var relativeYPosition = (e.pageY - dragDiv.offsetTop);

    $(document).on('mousemove',function(e) {
       $(dragDiv).offset({
           top: e.pageY - relativeYPosition,
           left: e.pageX - relativeXPosition,
        });
    });
};

请参阅：http://jsfiddle.net/VpM9j/4/

但更好的是事件委托，因为你只需要在文档上有一个事件监听器，而不是你有多少个div：

function DragMe(e) {
    var dragDiv = this; // <-- pay attention to that ;o)
    var relativeXPosition = (e.pageX - this.offsetLeft);
    var relativeYPosition = (e.pageY - this.offsetTop);
    $(document).on('mousemove',function(e) {
       $(dragDiv).offset({
           top: e.pageY - relativeYPosition,
           left: e.pageX - relativeXPosition,
        });
    });
};

$(document).on('mousedown', '.move', DragMe);

$(document).on('mouseup', '.move', function() {
    $(document).off('mousemove');
});

请参阅：http://jsfiddle.net/VpM9j/7/

有关事件委派的更多信息，请参阅：http://api.jquery.com/on/并搜索“直接和委派事件”

奇怪的跳跃在Draggable元素

1 个答案: