我编写了这段代码来创建端点并动态连接它们,但我无法使用uuid。 uuid不能在我的代码中工作,当我使用我的Div的id而不是uuid时,代码正在工作。我的jsplumb版本是1.5.5,
var targetOption = {
anchor: "TopCenter",
maxConnections: -1,
isSource: false,
isTarget: true,
endpoint: ["Dot", { radius: 5 }],
connector: ["Flowchart", { stub: 5 }],
paintStyle: {
fillStyle: "black",
outlineColor: "black",
outlineWidth: 3 },
hoverPaintStyle: { fillStyle: "green" },
connectorPaintStyle: {
lineWidth: 4,
strokeStyle: "#61B7CF",
joinstyle: "round",
outlineColor: "white",
outlineWidth: 2
},
setDragAllowedWhenFull: true
}
var sourceOption = {
anchor: "BottomCenter",
maxConnections: -1,
isSource: true,
isTarget: false,
endpoint: ["Dot", { radius: 5 }],
connector: ["Flowchart", { stub: 5 }],
paintStyle: {
fillStyle: "black",
outlineColor: "black",
outlineWidth: 3 },
hoverPaintStyle: { fillStyle: "green" },
connectorPaintStyle: {
lineWidth: 4,
strokeStyle: "#61B7CF",
joinstyle: "round",
outlineColor: "white",
outlineWidth: 2
},
setDragAllowedWhenFull: true
}
var e0 = jsPlumb.addEndpoint("block1", { uuid: "block1_TopCenter", scope: "c" }, targetOption),
e1 = jsPlumb.addEndpoint("block2", { uuid: "block2_BottomCenter", scope: "c" }, sourceOption);
var firstInstance = jsPlumb.getInstance();
var connection2block = firstInstance.connect({
uuids: ["block2_BottomCenter", "block1_TopCenter"],
detachable: true,
fireEvent: true,
scope: "c",
connector: ["Flowchart", { stub: 5 }],
endpointStyle: {
radius: 5
},
dragOptions: {
cursor: 'crosshair'
}
});
答案 0 :(得分:0)
我解决了!这是修改后的代码:
var connection2block = jsPlumb.connect({
uuids: ["block2_BottomCenter", "block1_TopCenter"],
detachable: true,
fireEvent: true,
scope: "c",
connector: ["Flowchart", { stub: 5 }],
endpointStyle: {
radius: 5
},
dragOptions: {
cursor: 'crosshair'
}
});