Как узнать направление движения объекта в перетаскиваемом плагине (jQuery)?

Question

У меня есть объект (div-box), и он перетаскивается (я использую jQuery). Как я могу получить информацию о том, в каком направлении его переместил посетитель? Пример: пользователь перетащил его влево вниз, и я хочу знать, как?

Answer 1

как насчет этого?

var start,stop;

$("#draggable2").draggable({
    axis: "x",
    start: function(event, ui) {
        start = ui.position.left;
    },
    stop: function(event, ui) {
        stop = ui.position.left;
        alert('has moved ' + ((start < stop) ? 'right':'left'))
    }
});​

сумасшедшая скрипка

Answer 2

Исходная позиция встроена в объект ui.helper. Вы можете просто сделать:

        $('#foo').draggable({
            stop: function(event, ui) {
                var dragged = ui.helper;
                var dragged_data = dragged.data('draggable');
                var direction = (dragged_data.originalPosition.left > dragged.position().left) ? 'left' : 'right';

                console.log(direction);
            }
        });

Вы можете сделать это в обратном вызове события запуска, перетаскивания или остановки ...

Answer 3

На этот вопрос есть два ответа:

1. получить направление в реальном времени, а именно, независимо от начальной позиции.Для этого вам нужно установить и использовать previousPosition, как указано ниже:

   <code>
   $("#draggable").draggable({
       axis: "x",
       start: function(event, ui) {
           this.previousPosition = ui.position;
       },
       drag: function(event, ui) {
           var direction = (this.previousPosition.left > ui.position.left) ? 'left' : 'right';
           alert('moving ' + direction)
       }
   });​
   

2. получить направление после падения, следовательно, используя начальную позицию.Для этого вам необходимо использовать предоставленный originalPosition следующим образом:

   <code>
   $("#draggable").draggable({
       axis: "x",
       stop: function(event, ui) {
           var direction = (ui.originalPosition.left > ui.position.left) ? 'left' : 'right';
           alert('has moved ' + direction)
       }
   });​
   

Примечание: Этот код был написани протестированы с помощью jQuery 1.11.1

Answer 4

Взгляните на эту страницу, Исходный код и демоверсия доступны на этом сайте:

http://www.coursesweb.net/jquery/jquery-ui-draggable-drag