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

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

但是如何在向左拖动时运行一个函数而在向右拖动时运行另一个函数？

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

Answer 1

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

您可以通过检查每个primefaces拖动操作的先前事件坐标来完成此操作。

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

Answer 2

这是一种更简单的方法：

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

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

Answer 3

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

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