определить, когда элемент перетаскивается влево или вправо с помощью перетаскиваемого jQuery UI?

Я использую jQuery UI, чтобы сделать элемент перетаскиваемым, и в коде можно указать, что делать при запуске, перетаскивании и завершении.

но как я могу запустить одну функцию при перетаскивании влево, а другую при перетаскивании вправо?

Я уже ограничил перетаскиваемую ось только осью X. Так что элемент может двигаться только влево или вправо.

9
javascript jquery jquery-ui

3 ответов

проверить это демо: 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;
    }
});
13

здесь более простой способ сделать это:

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

демо:http://jsfiddle.net/GNHTW/

4

Я бы рекомендовал вам обрабатывать start и stop события и определить дельту позиции в stop event, чтобы получить, Был ли он перемещен влево или вправо:

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

0