5

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

4

4 回答 4

11

这个怎么样？

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'))
    }
});​

疯狂的小提琴

于 2010-10-05T05:49:02.727 回答
3

原始位置内置在 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);
            }
        });

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

于 2011-02-01T11:21:40.690 回答
1

这个问题有两个答案：

  1. 实时获取方向，即无论起始位置。为此，您需要按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)
    }
});​

  2. 下降后获得方向，因此使用起始位置。为此，您需要使用以下提供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 编写和测试的

于 2014-09-02T14:12:13.703 回答
0

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

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

于 2012-07-27T08:22:02.087 回答