1

I have been trying to create a synchronized scrolling between two divs using jQuery draggable but I am having trouble figuring out the correct "equation" to get it to work properly.

Basically, I have two sides – left and right. The left side is going to hold information (small scale...the orange rectangle in my example) as well as a "magnifier" (the purple and black box in my example) which the user will be able to drag up and down over the information using jQuery draggable. The right side is going to hold a copy of that same information, only at a much larger scale (the tall pink box in my example).

I am attempting to make it so that when dragging the "magnifier" over the information on the left hand side, the larger scale of the information on the right hand side scrolls up and down in sync with the "magnifier". My problem is getting the position of the large scale div (in relation to the main wrapper) to match up with the position of the center of the "magnifier" (in relation to the smaller div that hold the small scale information). This needs to work dynamically as in no matter what size either divs are, it is always the correct relation.

我还希望主包装的中心充当大规模信息的“顶部”或焦点......所以当放大镜位于小规模信息的顶部时，大规模信息的顶部是与主包装的垂直中心对齐。任何帮助表示赞赏，如果有任何问题，请告诉我。谢谢！

这是一个工作示例的链接：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 的大小如何，我都需要一个能够动态工作的方程。

4

1 回答 1

0

我们去吧。

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

});

Here's a working jsFiddle example.

The example presents some sliders for playing with orange box\magnifier height.

Notice that I've changed some of your CSS to reflect the flexibility on box sizing. Mainly, the wrapper container now doesn't have a set height. Also the orange box is now relatively positioned, with margins the size of half the magnifier height, to correctly adjust the height of the wrapper container.

于 2013-03-30T19:44:18.470 回答