使用jQuery UI的可拖动检测项目何时被向左或向右拖动？答案

【问题标题】：detect when item is being dragged left or right with jQuery UI's draggable?使用jQuery UI的可拖动检测项目何时被向左或向右拖动？
【发布时间】：2013-04-30 06:19:47
【问题描述】：

我正在使用 JQuery UI 使元素可拖动，并且在代码中，可以指定在开始、拖动和结束时要做什么。

但是我怎样才能在向左拖动时运行一个函数而在向右拖动时运行另一个函数呢？

我已经将可拖动轴限制为仅 x 轴。所以元素只能左右移动。

【问题讨论】：

标签： javascript jquery jquery-ui

【解决方案1】：

查看此演示：http://jsfiddle.net/3NtS9/

您可以通过检查每个原子拖动操作上的前一个事件坐标来做到这一点。

var prevX = -1;

$('div').draggable({
    drag: function(e) {
        //console.log(e.pageX);
        if(prevX == -1) {
            prevX = e.pageX;    
            return false;
        }
        // dragged left
        if(prevX > e.pageX) {
            console.log('dragged left');
        }
        else if(prevX < e.pageX) { // dragged right
            console.log('dragged right');
        }
        prevX = e.pageX;
    }
});

【讨论】：

【解决方案2】：

这里有一个更简单的方法：

$( "#draggable" ).draggable({
    drag: function( event, ui ) {
        $(this).text(ui.originalPosition.left > ui.position.left ?  'left' : 'right');
    }
});

演示：http://jsfiddle.net/GNHTW/

【讨论】：

我认为如果在不释放鼠标的情况下改变方向，这将无法识别。
对于 OP 的要求，我认为这是最简单的答案。从我测试的结果开始，接受的答案总是会触发错误的方向。

【解决方案3】：

我建议您处理 start 和 stop 事件并确定停止事件中的位置增量以获取它是向左还是向右移动：

http://jqueryui.com/draggable/#events

【讨论】：