Question

我想在页面上移动两张图片。这个布局如下：

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

因此，图像彼此相邻，以＆＃39; 1＆＃39;开头的单元格属于第一个图像，那些以＆＃39; 2＆＃39;开头的图像。属于第二张图片。

当我拖动任何图像时，预期的行为是两个图像都移动，但图像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));
});

将两个图像拖动到一起，但限制一个人的移动到垂直轴

0 个答案: