0

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

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

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

4

1 回答 1

1

一方面，您已经通过 jQuery 插件和您自己的代码使图像可拖动。您的代码正在更改 的background-position，div而 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();
});
于 2009-08-20T21:49:42.097 回答