javascript - 使用 jQuery Draggable 动态同步两个 div 之间的滚动

Question

我一直在尝试使用 jQuery Draggable 在两个 div 之间创建同步滚动，但我无法找出正确的“方程式”以使其正常工作。

基本上，我有两个侧面 - 左和右。左侧将保存信息(小比例......我的示例中的橙色矩形)以及“放大镜”(我的示例中的紫色和黑色框)，用户可以在其上上下拖动使用 jQuery 可拖动的信息。右侧将保存相同信息的副本，只是规模更大(我的示例中的高粉色框)。

我试图做到这一点，以便当将“放大镜”拖动到左侧信息上时，右侧信息的较大比例会与“放大镜”同步上下滚动。 我的问题是让大比例div的位置(相对于主包装器)与中心的位置相匹配“放大镜”(相对于保存小比例信息的较小 div)。这需要动态地工作，因为无论两个 div 的大小是什么，它总是正确的关系。

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

这里是一个工作示例的链接:http://people.rit.edu/bjc7188/

这是我一直在编写的一些脚本:

$(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 的大小如何都能动态运行的方程。

Answer 1

我们开始吧。

$(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();
    } 
});

});

这是 working jsFiddle example .

该示例展示了一些用于调整橙色框\放大镜高度的 slider 。

请注意，我更改了您的一些 CSS 以反射(reflect)框大小调整的灵 active 。主要是，包装容器现在没有设定的高度。此外，橙色框现在相对定位，其边距大小为放大镜高度的一半，以正确调整包装容器的高度。