jQuery ui：可拖动，如何确定图像在 x 轴上移动了多少？

Posted 2023-05-08

【中文标题】jQuery ui：可拖动，如何确定图像在 x 轴上移动了多少？

【英文标题】：jQuery ui: Draggable, How do I determin how much on the x-axis an image was moved ?

【发布时间】：2011-12-29 21:08:22

【问题描述】：

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

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

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

I.E.如果图像向左移动 100px，x 应该是“-100px”，如果它向右移动它应该是“100px”..

我可以使用它，但它只能确定图像移动了多少，而不是特定方向：

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

解决办法是什么？

谢谢， 雅各布

【参考方案1】：

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

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

jQuery UI 的 draggable 并没有做任何神奇的事情，如果你在 Firebug 或 Chrome Dev Toolbar 中检查它，你会发现它所做的只是改变元素的 left 和 top 属性。

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

【讨论】：

您应该使用.offset().top 和.offset().left 来检索位置，而不是CSS 属性，这可能并不存在于所有DOM 元素上。

视情况而定，如果您将 offset() 值持久存储并在 jquery 演示中重新创建它们，您会注意到该框被放置在错误的位置。但我同意你的看法，应该使用 offset() 或 position() 以更合适的方式获取值。

【参考方案2】：

我会在 start 时存储起始位置并在 stop 时计算差异，如下所示：

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

【讨论】：

OP 没有要求它，但确定移动的总距离（而不仅仅是 x 距离）就像使用勾股定理一样容易。

另外，如果 OP 使用多个可拖动对象，全局变量将无法正常工作，但数字可以存储为 DIV 本身的.data 属性。