在JointJs中，如何通过拖动嵌入元素将所有元素移动到一起？ [英] In JointJs, how can I move a all elements together by dragging an embedded element?

问题描述

我正在使用JointJs来创建图表。

I'm using JointJs to create a diagram.

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

When I create an element with a number of embedded elements, I can easily drag them all by dragging the parent. However, when I drag the children, they move on their own. How can I move the parent and all children by dragging either the parent or one of the children elements?

推荐答案

它有点像棘手：

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中，如何通过拖动嵌入元素将所有元素移动到一起？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！