使用InteractJS拖动多个对象

Question

我有一个包含多个对象的容器，并使用InteractJS进行拖动和调整大小。现在我需要同时移动多个选定的对象。看起来https://interactjs.io/docs/reflow允许运行动作序列，但我不能让它工作。我不能只是手动设置我拖动的主对象的位置，因为对象只能在容器内移动，而且由于此计算是由Interact内部完成的，因此我希望使用它的流。

我在这里有个小游乐场https://jsfiddle.net/s1fapto9/2/

有没有人有过这样的互动经验？

Answer 1

我的解决方案是通过cycle来移动对象。

从HTML elements .dataset;获取当前对象坐标的

从event.delta;获取移动增量的

1. 将增量添加到其前一个坐标。

事件返回{ widgets.forEach(el => { if(!el.getAttribute('selected')) { return；} const { x: dataX = '0'，y: dataY = '0‘}= el.dataset；

const x= (parseFloat(dataX) || 0) + event.delta.x；const y= (parseFloat(dataY) || 0) + event.delta.y；el.style.transform = translate(${x}px, ${y}px)；Object.assign(el.dataset，{ x，y })；}

编辑后的示例：https://jsfiddle.net/flashTGC/sfvu14q3/