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

【问题标题】：In JointJs, how can I move a all elements together by dragging an embedded element?在 JointJs 中，如何通过拖动嵌入元素将所有元素一起移动？
【发布时间】：2017-07-29 02:00:46
【问题描述】：

我正在使用 JointJs 创建图表。

当我创建一个包含许多嵌入元素的元素时，我可以通过拖动父级轻松地将它们全部拖动。但是，当我拖动孩子时，他们会自行移动。如何通过拖动父元素或其中一个子元素来移动父元素和所有子元素？

【问题讨论】：

标签： javascript hierarchy diagram jointjs

【解决方案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);
  }
});

【讨论】：

替换当前被拖动的视图是一个很好的技巧。谢谢！
这适用于 JointJS，但不适用于 RappidJS。 RappidJS 为joint.dia.paper.pointermove 添加了一些额外的功能，这会导致子元素在事件侦听器识别/启动父母移动之前移动一点。为了解决这个问题，我不得不重写 rappids pointermove 方法。
@LucianDepold 你能分享一些你是如何覆盖 rappids 指针移动的代码吗？
您可以通过创建自己的论文来做到这一点，如下所示： GraphVER_rappid_dia_Paper = joint.dia.Paper.extend({ pointermove(evt) { // Pointermove code in here } });
这种方法似乎只能在 2.0 之前使用。 Jointjs 2.1 及以上版本不起作用。

【解决方案2】：

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

paper.setInteractivity({ stopDelegation: false });

【讨论】：