Динамически синхронизировать scolling между двумя divs с помощью jQuery draggable

Question

Я пытался создать синхронизированную прокрутку между двумя div, используя jQuery draggable, но мне трудно понять правильное «уравнение», чтобы заставить его работать правильно.

В принципе, у меня есть две стороны - левая и правая. Левая сторона будет хранить информацию (маленький масштаб ... оранжевый прямоугольник в моем примере), а также «лупу» (фиолетовый и черный ящик в моем примере), которые пользователь сможет перетащить вверх и вниз информация, использующая jQuery draggable. Правая сторона будет хранить копию той же информации только в гораздо большем масштабе (высокий розовый ящик в моем примере).

Я пытаюсь сделать так, чтобы при перетаскивании «лупы» над информацией с левой стороны большой масштаб информации с правой стороны прокручивался вверх и вниз в синхронизации с «лупой». Моя проблема получает положение крупномасштабного DIV (по отношению к главной обертке) в соответствии с положением центра на «лупе» (по отношению к меньшему DIV, которые держат мелкий информация). Это должно работать динамически, независимо от того, какой размер имеет либо divs, это всегда правильное соотношение.

Мне также хотелось бы, чтобы центр основной обертки работал как «верх» или фокус для крупномасштабной информации ... поэтому, когда лупа находится в верхней части мелкомасштабной информации, верхняя часть крупномасштабная информация выстраивается в вертикальный центр основной обертки. Любая помощь приветствуется и, пожалуйста, дайте мне знать, если есть какие-либо вопросы. Благодаря!

Вот ссылка на рабочий пример: 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 изменяется. Мне нужно уравнение, которое будет работать динамически независимо от того, какой размер или розовый или оранжевый divs.

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, чтобы отразить гибкость при выборе размеров ящиков. В основном, контейнер-контейнер теперь не имеет установленной высоты. Также оранжевая коробка теперь расположена относительно, с полями размером в половину высоты лупы, чтобы правильно регулировать высоту контейнера-обертки.