jQuery UI draggable返回意外位置

Question

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

演示

这是我的代码

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。

所以这就是解决方案。

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

我已经更新了你的提琴，检查它在这里:http://jsfiddle.net/ZtYem/2/(我添加了那些<span>标签来分析坐标，所以你可以再次删除它们)。