在 JointJs 中，如何通过拖动嵌入元素将所有元素移动到一起？

Question

我正在使用 JointJs 创建图表。

当我创建一个包含多个嵌入元素的元素时，我可以通过拖动 parent 轻松地拖动它们。但是，当我拖动 children 时，它们会自行移动。如何通过拖动 parent 或 children 元素之一来移动 parent 和所有 children？

Answer 1

有点棘手：

https://jsfiddle.net/vtalas/xk73L947/

魔法就在这部分：

paper.on('cell:pointermove', function (cellView, evt) {

  if (cellView.model.isLink()) {
    return ;
  }

  var parent = cellView.model.getAncestors()[0];

  // if we trying to move with embedded cell 
  if (parent) {

    // cancel move for the child (currently dragged element)
    cellView.pointerup(evt);
    var view = paper.findViewByModel(parent);

    // substitute currently dragged element with the parent
    paper.sourceView = view;

    // get parent's position and continue dragging (with the parent, children are updated automaticaly)
    var localPoint = paper.snapToGrid({ x: evt.clientX, y: evt.clientY });
    view.pointerdown(evt, localPoint.x, localPoint.y);
  }
});

Answer 2

v3.1 (documentation) 中有一个新的交互选项 stopDelegation。如果设置为 false 元素的拖动将委托给其父元素。

paper.setInteractivity({ stopDelegation: false });

在 JointJs 中，如何通过拖动嵌入元素将所有元素移动到一起？

In JointJs, how can I move a all elements together by dragging an embedded element?

javascript

hierarchy

diagram

jointjs