jQuery UI 可拖动返回意外位置

Question

我正在尝试拖动背景位置而不是元素本身。

Demo

这是我的代码

var left = 0,
    top = 0;
$('#box').draggable({ 
    start: 
    drag: function (e, ui) {
        // += as I am setting left and top = 0, so just taking the 'change'
        left += ui.position.left;
        top  += ui.position.top;  


        ui.position.left = 0;
        ui.position.top = 0;

        $(this).css({
            'background-position': left + 'px ' + top + 'px'
        });

    }, 
});

它拖动得非常快，很快background-position-x和background-position-y就达到了一个很大的值。

我发现 drag 事件被调用了两次。

拖动函数第一次给出了正确的拖动位置，但我猜第二次它会为自身添加 background-position 值。

Answer 1

只要您拖动，jQuery UI 就会跟踪 ui.position不管你设置它0 。因此，如果将其向右移动一个像素，left是 1 。然后将其设置为 0 ，但是当您(不停地)将其向右拖动另一个像素时，ui.position.left实际上是2 ，不是1 .

这就是解决方案。

1. 跟踪 ui.position值并在拖动时减去它们(因此，我们计算前一个移动和新移动之间的差异)。
2. 拖动停止时，将这些值重置为 0 (否则后台一直跳回0px 0px)。

我已经更新了您的 Fiddle，请在此处查看:http://jsfiddle.net/ZtYem/2/ (我添加了那些 <span> 标签来分析坐标，因此您可以再次删除它们)。