【问题标题】：How to get the direction of moving object in draggable plugin (jQuery)?如何在可拖动插件（jQuery）中获取移动对象的方向？
【发布时间】：2010-10-05 05:32:01
【问题描述】：

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

【问题讨论】：

标签： jquery jquery-ui-draggable

【解决方案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

【讨论】：

这就是它的要点。实现细节可能会有所不同，但您必须记住光标以前的位置并与现在的位置进行比较。可能还想检查水平变化是否大于垂直变化以在左/右或上/下之间进行选择。
嗯，这就是这个想法的开始。 ui.position.top 也可用。 OP 可以轻松应对。

【解决方案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);
            }
        });

您可以在开始、拖动或停止事件回调中执行此操作...

【讨论】：

你知道如果 revert 设置为 true 会怎样？

【解决方案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 编写和测试的

【讨论】：

【解决方案4】：

看看这个页面，这个网站上有源代码和演示：

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

【讨论】：