Trascinare due immagini insieme, ma limitare il proprio movimento per asse verticale

Question

mi piacerebbe spostare due immagini insieme su un layout sinistra.L di questo è la seguente:

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

Così le immagini sono uno accanto altre, le celle che iniziano con '1' appartengono alla prima immagine, quelle che iniziano con '2' appartengono alla seconda immagine.

Quando trascino una qualsiasi delle immagini, il comportamento previsto è che entrambe le immagini si spostano, ma l'immagine 1 è solo sull'asse verticale. (Quindi rimane a sinistra, ma potrebbe spostarsi verso l'alto o verso il basso tanto quanto l'immagine 2. Questa immagine verrà utilizzata come una sorta di intestazione e deve essere visibile a sinistra tutto il tempo, ma deve essere sincronizzata verticalmente con l'immagine 2.), l'immagine 2 può muoversi lungo entrambi gli assi.

Nell'esempio, ciò significa che la parte 1.1 della prima immagine sarà sempre in linea con la parte 2.1 della seconda immagine.

C'è qualche framework JS che potrebbe supportare questo? Ho provato ad usare fabric JS, ma quando copro le coordinate in un gestore di eventi diventa incredibilmente lento.

Questo codice è quello che ho provato, non fa esattamente quello che ho descritto, questo limita il movimento a un rettangolo, ma la teoria dietro è la stessa.

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

Ciò può essere realizzato facilmente utilizzando jQuery UI, con due elementi trascinabili separati, si è costretti a muoversi solo sull'asse 'Y', ed entrambi aggiornamento ogni altro valore 'top' sul trascinamento.

** ** 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'); 
    } 
}); 

Controllare che funziona in questo JsFiddle :-)