crazy fiddle

Question

我有对象（div-box），它是可拖动的（我正在使用jQuery）。如何获取访问者移动方向的信息？示例：用户将其向左拖动，我想知道它，怎么样？

Answer 1

怎么样？

var start,stop;

$("#draggable2").draggable({
    axis: "x",
    start: function(event, ui) {
        start = ui.position.left;
    },
    stop: function(event, ui) {
        stop = ui.position.left;
        alert('has moved ' + ((start < stop) ? 'right':'left'))
    }
});

crazy fiddle

Answer 2

原始位置内置于ui.helper对象中..您可以这样做：

        $('#foo').draggable({
            stop: function(event, ui) {
                var dragged = ui.helper;
                var dragged_data = dragged.data('draggable');
                var direction = (dragged_data.originalPosition.left > dragged.position().left) ? 'left' : 'right';

                console.log(direction);
            }
        });

您可以在开始，拖动或停止事件回调...

中执行此操作

Answer 3

这个问题有两个答案：

实时获取方向，即无论起始位置如何。为此，您需要设置并使用previousPosition，如下所示：


$("#draggable").draggable({
    axis: "x",
    start: function(event, ui) {
        this.previousPosition = ui.position;
    },
    drag: function(event, ui) {
        var direction = (this.previousPosition.left > ui.position.left) ? 'left' : 'right';
        alert('moving ' + direction)
    }
});

在跌落后获取方向，因此使用起始位置。为此，您需要使用提供的originalPosition，如下所示：


$("#draggable").draggable({
    axis: "x",
    stop: function(event, ui) {
        var direction = (ui.originalPosition.left > ui.position.left) ? 'left' : 'right';
        alert('has moved ' + direction)
    }
});

注意：此代码是为jQuery 1.11.1

Answer 4

请看这个页面，源代码和演示可以在这个网站上找到：

http://www.coursesweb.net/jquery/jquery-ui-draggable-drag

如何在draggable插件（jQuery）中获取移动对象的方向？

4 个答案:

crazy fiddle