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。

所以这是解决方案。

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

我已更新您的小提琴，请在此处查看：http://jsfiddle.net/ZtYem/2/（我添加了<span>标记用于分析坐标，因此您可以再次删除它们。

jQuery UI draggable返回意外位置

1 个答案: