jQuery UI: Draggable, как мне определить, сколько на оси X было перемещено изображение?

Question

У меня есть изображение внутри div, вот так:

<div><img src="" class="draggable"></div>

Это перетаскиваемое изображение с помощью jQuery UI.Теперь я хочу определить, насколько изображение перемещается по оси X, поэтому я могу использовать эту информацию, чтобы сохранить положение изображения.

IE. Если изображение перемещено влево на 100px, x должно быть равно "-100px", а если оно перемещено вправо, то должно быть "100px".это только определяет, насколько изображение было перемещено, а не в определенном направлении:

drag: function() {
                counts[ 1 ]++;
                updateCounterStatus( $drag_counter, counts[ 1 ] );
            },

Какое решение?

Спасибо, Якоб

Answer 1

Я бы запомнил начальную позицию при старте и вычислил разницу при остановке следующим образом:

http://jsfiddle.net/FMC56/1

$( "#drag" ).draggable({
    start: function(event, ui) {
        $(this).data("startx",$(this).offset().left)
    },
    stop: function(event, ui) {
        var change = $(this).offset().left - $(this).data("startx");
        this.innerHTML = "change: " + change + "px";
    }
});

РЕДАКТИРОВАТЬ: использование данных было идеей mblase75 между прочим.

Answer 2

Легко, если вы хотите сохранить положение изображения, когда вы прекращаете перетаскивать изображение. Просто проверьте левую и верхнюю часть изображения на стопе:

stop: function(event, ui) { 
    var topValue = $(this).position().top;
    var leftValue = $(this).position().left;
    //Save them to wherever you want
}

Перетаскиваемый пользовательский интерфейс jQuery не делает ничего волшебного, если вы осмотрите его на панели инструментов Firebug или Chrome Dev, вы увидите, что все, что он делает, это изменяет свойство left и top элемента.

Дополнительная информация о различных событиях, доступных в Draggable: http://jqueryui.com/demos/draggable/#events