我一直在尝试使用 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 的大小如何都能动态运行的方程。
最佳答案
我们开始吧。
$(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();
}
});
});
该示例展示了一些用于调整橙色框\放大镜高度的 slider 。
请注意,我更改了您的一些 CSS 以反射(reflect)框大小调整的灵 active 。主要是,包装容器现在没有设定的高度。此外,橙色框现在相对定位,其边距大小为放大镜高度的一半,以正确调整包装容器的高度。
关于javascript - 使用 jQuery Draggable 动态同步两个 div 之间的滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15722345/