jQuery Draggable：图像闪烁

Question

我一直在开发一个图像平移工具，在一位好心的成员指导我使用 jQuery 的可拖动插件之后，我完成了大部分工作。现在，如果用户拖动图像（包含在大约 300 x 300 像素的 div 中），图像将首先闪烁，然后平移。这个问题似乎发生在鼠标按下事件之后，在鼠标移动事件上。图像将在鼠标移动时移动到四个角之一，移动到某些区域会导致另一个移动。我一直无法通过谷歌找到任何东西，而且我对 jQuery 还是比较陌生。

我在这里上传了代码，以防我的描述过于模糊： http://www.studentgroups.ucla.edu/csa/test/zoom.htm

非常感谢任何想法或建议！

Answer 1

首先，您已经通过 jQuery 插件和您自己的代码使图像可拖动。您的代码正在更改div 的background-position，而jQuery 插件正在更改div 的实际位置。这势必会导致一些问题。

此外，Draggable 的 containment 参数似乎是为小于其父容器的可拖动项目设计的，而不是像您想要做的那样大的项目。

无论如何，这是工作代码：

$(document).ready(function() {
    $(".draggable").draggable().bind('dragstop', function(e, ui) {
        if (ui.position.top > 0) {
            $(this).css('top', 0);
        }
        if (ui.position.left > 0) {
            $(this).css('left', 0);
        }

        var bottom = -($(this).height() - $(this).parent().height()),
        right  = -($(this).width() - $(this).parent().width());

        if (ui.position.top < bottom) {
            $(this).css('top', bottom);
        }
        if (ui.position.left < right) {
            $(this).css('left', right);
        }
    });
});

如果你不需要边缘捕捉，你可以去掉.bind()函数，直接调用.draggable()。

$(document).ready(function() {
    $(".draggable").draggable();
});