I'm using JointJs to create a diagram.
我正在使用JointJs来创建一个图表。
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?
当我创建一个包含许多嵌入元素的元素时,我可以通过拖动父元素轻松拖动它们。然而,当我拖动孩子时,他们会自行移动。如何通过拖动父元素或其中一个子元素来移动父元素和所有子元素?
1 个解决方案
#1
2
it's a little bit tricky:
这有点棘手:
https://jsfiddle.net/vtalas/xk73L947/
https://jsfiddle.net/vtalas/xk73L947/
the magic is in this part:
魔法在这部分:
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);
}
});
#1
2
it's a little bit tricky:
这有点棘手:
https://jsfiddle.net/vtalas/xk73L947/
https://jsfiddle.net/vtalas/xk73L947/
the magic is in this part:
魔法在这部分:
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);
}
});