我正在为jsplumbb中的连接创建自定义覆盖。
connectorOverlays: [
["Custom", {
create: function(component) {
return connectionNode();
},
location:0.5,
id:"customOverlay"
}]
]
connectionNode()创建一个div,其中包含一个选择列表。div本身应该是可连接的,也就是说,我想连接不同连接器的两个标签。
var overlay_div = $(connection.overlays[0].canvas);
jsPlumb.addEndpoint(overlay_div, { anchor:[ "Perimeter", { shape:"Rectangle"}] }, relationEndpoint);
连接器覆盖上的端点定义如下:
var relationEndpoint = {
endpoint:["Dot", {radius:4} ],
anchor: ["BottomRight","TopLeft", "TopRight", "BottomLeft"],
paintStyle:{ fillStyle:"#ff33333", opacity:0.5 },
isSource:true,
connectorStyle:{ strokeStyle:"#ff33333", lineWidth:3 },
connector : "Flowchart",
isTarget:true,
dropOptions : {
tolerance:"touch",
hoverClass:"dropHover",
activeClass:"dragActive"
},
beforeDetach:function(conn) {
return confirm("Detach connection?");
}
};
当我现在移动任何由自定义覆盖连接连接的原始节点时,端点不会随着标签移动,而是在创建时保持静态。我能以某种方式触发它的运动编程或我错过了一些配置选项?
我也有这个问题。我可以用
修复它instance.draggable(jsPlumb.getSelector(".flowchart-demo .window"), { grid: [5, 5] });
其中".flowchart-demo .window"
是div的类。
显示的示例来自jplumb page examples…在我的项目中,这一行保持
instance.draggable(jsPlumb.getSelector(".flowchart-demo .clsExecutando"), { grid: [5, 5] });
我希望这些信息对你有帮助。