将两个图像拖动到一起,但将一个图像移动到垂直轴

Question

我想在一个页面上移动两个图像.这个布局如下:

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

因此,图像彼此相邻,以"1"开头的单元属于第一图像,以"2"开头的单元属于第二图像.

当我拖动任何图像时,预期的行为是两个图像都移动,但图像1仅在垂直轴上移动.(因此它保持在左侧,但可能会像图像2一样向上或向下移动.此图像将用作一种标题,并且需要始终在左侧可见,但需要垂直同步对于图像2.),图像2可以沿两个轴移动.

在该示例中,这意味着第一图像的1.1部分将始终与第二图像的2.1部分对齐.

有没有可能支持这个的JS框架？我已经尝试过使用Fabric JS,但是当我在事件处理程序中限制坐标时,它会变得难以置信地变慢.

这段代码是我试过的,它并没有完全按照我的描述进行,这限制了矩形的运动,但它背后的理论是一样的.

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

这可以使用 jQuery UI 轻松实现，具有两个独立的可拖动元素，其中一个元素只能在“Y”轴上移动，并且两个元素在拖动时都会更新彼此的“顶部”值。

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

检查它在这个JsFiddle中是否正常工作:-)