jQuery ui：可拖动，如何确定图像在 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

很简单，如果您想在停止拖动图像时保存图像位置。只需在停止时检查图像的左侧和顶部：

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

jQuery UI 的可拖动功能并没有做任何魔法，如果您在 Firebug 或 Chrome 开发工具栏中检查它，您会发现它所做的只是更改元素的左侧和顶部属性。

有关 Draggable 具有的不同事件的更多信息： http://jqueryui.com/demos/draggable/#events

Answer 2

我将存储开始时的开始位置并计算停止时的差异，如下所示：

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 的想法。