使用jQuery UI's可拖动来检测项目何时被向左或向右拖动

detect when item is being dragged left or right with jQuery UI's draggable?

本文关键字：拖动 何时 项目 jQuery 检测 使用 UI      更新时间：2023-09-26

我使用JQuery UI使元素可拖动，在代码中，可以指定开始，拖动和结束的操作。

但是我怎么能在左拖动时运行一个函数而在右拖动时运行另一个函数呢?

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

检查这个演示: 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;
    }
});

有一个更简单的方法:

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

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

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

http://jqueryui.com/draggable/事件

相关文章：