将两个图像拖在一起，但将移动限制在垂直轴上

Question

我想在 page.The 布局上将两张图片一起移动，如下所示：

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

所以图片是相邻的，以'1'开头的单元格属于第一张图片，以'2'开头的单元格属于第二张图片。

当我拖动任何图像时，预期的行为是两个图像都移动，但图像 1 仅在垂直轴上移动。（因此它保留在左侧，但可能会像图像 2 一样上下移动。此图像将用作一种 header，并且需要始终在左侧可见，但需要与图像 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' 轴上移动，并且两者相互更新 'top' 拖动时的值。

** 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 中的工作情况:-)

将两个图像拖在一起，但将移动限制在垂直轴上

Drag two images together, but limit one's movement to vertical axis

javascript

fabricjs