jQuery ui : Draggable, 如何确定图像在 x 轴上移动了多少？

Question

我在 div 中有一个图像，如下所示:

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

这是一个可通过 jQuery UI 拖动的图像。现在我想确定图像在 x 轴上移动了多少，因此我可以使用该信息来保存图像的位置。

即如果图像向左移动 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 开发工具栏中检查它，您会发现它所做的只是更改元素的 left 和 top 属性。

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