Question

我一直在尝试使用jQuery draggable在两个div之间创建一个同步滚动，但我无法弄清楚正确的“等式”以使其正常工作。

基本上，我有两面 - 左边和右边。左侧将保存信息（小比例......在我的示例中为橙色矩形）以及“放大镜”（在我的示例中为紫色和黑色框），用户可以上下拖动使用jQuery draggable的信息。右侧将保留相同信息的副本，仅在更大的范围内（我的示例中的高粉红色框）。

我试图这样做，以便在左侧信息上拖动“放大镜”时，右侧信息的较大比例与“放大镜”同步上下滚动。 我的问题是获取大型div（相对于主包装）的位置，以匹配 center 的位置“放大镜”（与保存小规模信息的较小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。

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

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

使用jQuery draggable在两个div之间动态同步滚动

1 个答案: