Javascript 使用jquerydraggable动态同步两个div之间的scolling

我一直在尝试使用jquerydraggable在两个div之间创建一个同步滚动，但是我很难找到正确的“等式”来让它正常工作

基本上，我有两个方面——左边和右边。左侧将保存信息（小比例…我示例中的橙色矩形）以及一个“放大镜”（我示例中的紫色和黑色框），用户可以使用jQuery draggable在信息上下拖动。右侧将保存同一信息的副本，只是比例要大得多（我示例中的高粉色框）

我正试图使之成为这样，当将“放大镜”拖动到左侧信息上时，右侧信息的较大比例会与“放大镜”同步上下滚动我的问题是使大刻度盘的位置（相对于主包装）与“放大镜”中心的位置相匹配（相对于保存小刻度信息的小刻度盘）。这需要动态工作，因为无论两个div的大小如何，它始终是正确的关系

我还希望主包装的中心充当大尺寸信息的“顶部”或焦点…因此，当放大镜位于小尺寸信息的顶部时，大尺寸信息的顶部与主包装的垂直中心对齐。非常感谢您的帮助，如果有任何问题，请告诉我。谢谢

以下是指向一个工作示例的链接：

以下是我一直在编写的一些脚本：

$(document).ready(function() {


        $("#dragMe").draggable({ 

            axis: "y",
            drag: function(event, ui)
            { 
                var $target = ($("#toZoom").height()/2) - ((($("#dragMe").position().top + $("#dragMe").height()/2)*($("#scroller").height()/$("#toZoom").height()))); 

                $("#scroller").css({ top: ($target + $("#dragMe").height()/2) + "px" });
            }, 
        });

    });

这有点草率，但它确实适用于我想做的事情。但是，当左橙色div的大小更改时，它不起作用。我需要一个无论粉红色或橙色div的大小都能动态工作的方程。

我们开始吧

$(document).ready(function() {

function adjustPositions(){
    var wrapperObj=$("#wrapper");
    var magnifierObj=$("#dragMe");
    var scrollerObj=$("#scroller");
    var zoomObj=$("#toZoom");


    var magCenterPosition=magnifierObj.offset().top+magnifierObj.height()/2-zoomObj.offset().top;        
    var magRelativePosition=magCenterPosition/zoomObj.height();

    var newScrollerPosition=wrapperObj.height()/2-magRelativePosition*scrollerObj.height();
    scrollerObj.css("top",newScrollerPosition+"px");
}


$("#dragMe").draggable({                 
    axis: "y",
    containment: $("#wrapper"),
    drag: function(event, ui)
    { 
        adjustPositions();
    } 
});

});

这里有一个。

该示例提供了一些用于播放橙色框\放大镜高度的滑块

---

请注意，我已经更改了一些CSS，以反映框大小的灵活性。主要来说，包装容器现在没有设置的高度。另外，橙色框现在相对定位，边距为放大镜高度的一半，以正确调整包装容器的高度。

哇……这正是我想要做的！非常感谢…而且脚本看起来也非常好。我有几个正在修复的补丁（特别是放大镜拖动框容器），请继续关注，我将在几分钟后更新：）哇…太好了！我正在考虑实施类似的东西。非常感谢您的帮助和快速回复。如果我的答案满足您的问题，我将非常感谢您投票并/或接受：）绝对……我不允许投票，因为我没有“15声誉”，但如果可以，我肯定会投票。不过我还是接受了。再次感谢您的帮助…这是非常需要的，非常感谢。