2

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

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为自己添加了值。

4

1 回答 1

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>标签用于分析坐标，因此您可以再次删除它们）。

于 2013-03-07T09:59:18.507 回答