在jsPlumb中有一个可拖动的项目,该项目由多个项目组成

时间:2017-11-14 13:31:43

标签: jsplumb

我想在jsPlumb中创建一个可拖动的项目,该项目实际上由多个项目组成:"主要项目"它有一个锚点,它是一个连接目标(isTarget: true),以及多个"子项目"堆叠的显示器,每个显示器具有作为连接源的锚。像这样:

enter image description here

副作用应始终以上述方式呈现;它们不能在物品内部拖曳,也不能拖动到其他物品上。拖动主项目或任何子项目的任何位置都会拖动整个组从一个地方到另一个地方。

我最好将其建模为jsPlumb.Group中的单独内容,或者这实际上只是一个"包装器" div里面有很多div?如果它是后者,如何将包装器添加到包装器中的主要和子项,如果它是我告诉jsPlumb的包装器?

1 个答案:

答案 0 :(得分:0)

据我所知,这只是工作。

const a = document.createElement("article");
const d = document.createElement("div");
const p = document.createElement("p");
a.appendChild(d);
a.appendChild(p);
pane.appendChild(a);
jsPlumb.draggable(a);
var endpoint1 = jsPlumb.addEndpoint(d, { isTarget:true, anchors: ["Top"] });
var endpoint2 = jsPlumb.addEndpoint(p, { isSource:true, anchors: ["Right"] });

创建一个"包装器" (此处为aarticle),并将其标记为可拖动;将子项添加到它,并为它们添加端点;一切正常。完成。