检测何时使用jQuery UI的draggable向左或向右拖动项目? [英] detect when item is being dragged left or right with jQuery UI's draggable?

问题描述

我正在使用JQuery UI使元素可拖动，并且在代码中，可以指定在开始，拖动和结束时要执行的操作.

I am using JQuery UI to make an element draggable and in the code, one can specify what to do on start, drag, and end.

但是如何在向左拖动时运行一个功能，而在向右拖动时运行另一个功能?

But how can I run one function on drag left and another on drag right?

我已经将可拖动轴限制为仅x轴.因此，该元素只能向左或向右移动.

I have already limited the draggable axis to the x-axis only. So the element can only move left or right.

推荐答案

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

您可以通过在每次原子拖动操作中检查上一个事件坐标来做到这一点.

You can do it by checking against the previous event coordinate on each atomic drag operation.

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

这篇关于检测何时使用jQuery UI的draggable向左或向右拖动项目?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！