Question

我需要创建一个图像查看器，允许将大图像加载到容器中，然后在容器中拖动，以便整个图像可见，但图像永远不会被拖出边界。下面的代码完美地工作，除了滚动条不能准确地与拖动图像的位置同步并允许图像滚动出边界。如何在拖动图像时将滚动条与图像同步？

编辑：

Here是一个有效的例子

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
        <style>
            .container{margin: auto;cursor: move;width: 80%; position: relative; min-width:885px;}
            #screen{overflow:auto; width: 80%; height: 600px; clear: both; border: 1px solid black; background-color: #CCCCCC; float:left; margin-right: 15px;}
        </style>
    </head>
    <body>
          <div class="container">
                <div id="screen">
                    <img class="drag-image" id="draggable" />
                </div>
          </div>
    </body>
    </html>

    <script type="text/javascript">

        $(function () {

            $('#draggable').attr('src', 'http://i.imgur.com/uPjIz.jpg').load(function () {
                CreateDraggablePicture();
            });

        });

        function CreateDraggablePicture() {

            var x = ($('#draggable').width() - $('#screen').width() - $('#screen').offset().left) * -1;
            var y = ($('#draggable').height() - $('#screen').height() - $('#screen').offset().top) * -1;
            var x2 = $('#screen').offset().left;
            var y2 = $('#screen').offset().top;

            $("#draggable").draggable({ containment: [x, y, x2, y2], scroll: true });

        }

    </script>

Answer 1

这些插件似乎与您在此处描述的效果相同

http://www.azoffdesign.com/overscroll（似乎是最好的一个）
http://hitconsultants.com/dragscroll_scrollsync/scrollpane.html（我没有找到下载链接）
http://the-taylors.org/jquery.kinetic/（没有看到滚动条的选项，但它适合移动设备）

Answer 2

我有一个类似的jQuery插件的确切问题。我最终不得不弄清楚并手动修改插件的数学。我相信秘密就是它缺少了css边距或css填充计算。

看看是否有帮助

Jquery Draggable无法正确定位滚动条

2 个答案: