Przeciągnij dwa obrazy razem, ale ograniczyć ruch do własnej osi pionowej

Question

Chciałbym przenieść dwa obrazy obok siebie na układ videosygnału tego jest następujący:

|1.1|--2.1--| 
|1.2|--2.2--| 
|1.3|--2.3--| 
|1.4|--2.4--| 

więc obrazy są obok siebie inne, komórki, które zaczynają się od "1" należą do pierwszego obrazu, te, które zaczynają się od "2", należą do drugiego obrazu.

Podczas przeciągania dowolnego z obrazów oczekiwane zachowanie polega na tym, że oba obrazy przesuwają się, ale obraz 1 tylko na osi pionowej. (Pozostaje więc po lewej stronie, ale może przesuwać się w górę lub w dół o tyle co obraz 2. Obraz ten będzie używany jako rodzaj nagłówka i musi być cały czas widoczny po lewej stronie, ale musi być zsynchronizowany pionowo z obrazem 2.), obraz 2 może poruszać się wzdłuż obu osi.

W przykładzie oznacza to, że część 1.1 pierwszego obrazu będzie zawsze zgodna z częścią 2.1 drugiego obrazu.

Czy istnieje struktura JS, która może to wspierać? Próbowałem używać JS tkaniny, ale kiedy ograniczam współrzędne w programie obsługi zdarzeń, staje się niewiarygodnie powolny.

Ten kod jest tym, co próbowałem, nie robi dokładnie tego, co opisałem, ogranicza ruch do prostokąta, ale teoria za nim jest taka sama.

canvas.on("object:moving", function() { 
    var top = movingBox.top; 
    var bottom = top + movingBox.height; 
    var left = movingBox.left; 
    var right = left + movingBox.width; 

    var topBound = boundingBox.top; 
    var bottomBound = topBound + boundingBox.height; 
    var leftBound = boundingBox.left; 
    var rightBound = leftBound + boundingBox.width; 

    movingBox.setLeft(Math.min(Math.max(left, leftBound), rightBound - movingBox.width)); 
    movingBox.setTop(Math.min(Math.max(top, topBound), bottomBound - movingBox.height)); 
}); 

Answer 1

Można to łatwo osiągnąć jQuery interfejs z dwóch oddzielnych elementów, które można przeciągać jeden jest przymocowany do poruszać się tylko na osi „y” i zarówno zmiana siebie „górna” wartość na przeciąganie.

** HTML **

<img id="img1" src="http://placehold.it/100X100" /> 
<img id="img2" src="http://placehold.it/100X100" /> 

JS ** **

var img1 = $('#img1'), 
    img2 = $('#img2'); 

img1.draggable({ 
    axis: 'y', 
    drag: function(event, ui){ 
     img2.css('top', ui.position.top+'px'); 
    } 
}); 
img2.draggable({ 
    drag: function(event, ui){ 
     img1.css('top', ui.position.top+'px'); 
    } 
}); 

Sprawdź to działa w tym JsFiddle :-)