Ziehen Sie zwei Bilder zusammen, aber

Question

eine Bewegung auf die vertikale Achse begrenzen möchte ich zwei Bilder bewegen, gemeinsam an einem page.The Layout hierfür ist die folgende:

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

So sind die Bilder, die auf jeder nächsten sind andere, Zellen, die mit "1" beginnen, gehören zum ersten Bild, solche, die mit "2" beginnen, gehören zum zweiten Bild.

Wenn ich eines der Bilder ziehe, ist das erwartete Verhalten, dass beide Bilder sich bewegen, aber Bild 1 nur auf der vertikalen Achse. (Es bleibt also auf der linken Seite, kann aber genauso stark nach oben oder unten verschoben werden wie Bild 2. Dieses Bild wird als eine Art Kopfzeile verwendet und muss ständig auf der linken Seite sichtbar sein, muss jedoch vertikal synchronisiert sein mit Bild 2.) kann sich Bild 2 auf beiden Achsen bewegen.

Im Beispiel bedeutet dies, dass der 1.1 Teil des ersten Bildes immer in Linie mit dem 2.1 Teil des zweiten Bildes ist.

Gibt es ein JS-Framework, das dies unterstützen könnte? Ich habe versucht, Fabric JS zu verwenden, aber wenn ich die Koordinaten in einem Event-Handler beende, wird es unglaublich langsam.

Dieser Code ist, was ich versucht habe, es tut nicht genau das, was ich beschrieben habe, dies beschränkt die Bewegung auf ein Rechteck, aber die Theorie dahinter ist die gleiche.

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

dies leicht jQuery UI Verwendung erreicht werden kann, mit zwei getrennten Elementen ziehbar ist man gezwungen, auf Ziehen nur auf der ‚Y‘ Achse, und beide Update jeweils anderer oberer "Wert zu bewegen.

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

Überprüfen Sie es in diesem JsFiddle :-) arbeiten