; (function() {
window.nodeFlow = {
init: function() {
// 设置点、线的默认样式
jsPlumb.importDefaults({
DragOptions: { cursor: 'pointer', zIndex: 2000 },
Endpoint: ["Dot", { radius: 1 }],
HoverPaintStyle: { strokeStyle: "#42a62c", lineWidth: 2 },
ConnectionOverlays: [
["Arrow", { location: -7, id: "arrow", length: 14, foldback: 0.8 }],
["Label", { location: 0.1, id: "label"
}]
]
});
// 连接事件
jsPlumb.bind("jsPlumbConnection", function(conn, originalEvent) {
if
(conn.connection.sourceId == conn.connection.targetId) {
jsPlumb.detach(conn);
alert("不能连接自己！");
}
$.each(jsPlumb.getEndpoints(conn.source), function(i, el) {
if
(conn.connection != el.connections[0] &&
(el.connections[0].targetId == conn.targetId || (el.connections[0].sourceId == conn.targetId && el.connections[0].targetId == conn.sourceId))) {
jsPlumb.detach(conn);
alert("不能重复连接！");
return
false;
}
});
nodeFlow.onConnectionChange && nodeFlow.onConnectionChange(conn);
conn.connection.bind("editCompleted", function(o) {
if
(typeof
console != "undefined")
console.log("connection edited. path is now ", o.path);
});
});
// 取消连接事件
jsPlumb.bind("jsPlumbConnectionDetached", function(conn) {
nodeFlow.onConnectionChange && nodeFlow.onConnectionChange(conn);
});
// 双击取消连接
jsPlumb.bind("dblclick", function(conn, originalEvent) {
jsPlumb.detach(conn);
});
// 连接的元素
// 本例中.node既是源头又是目标
var
nodeList = $(".node");
nodeList.each(function(i, e) {
// 设置连接的源元素
jsPlumb.makeSource($(e), {
filter: ".ep", // .ep元素用于拖动连接
anchor: "Continuous",
connector: ["Flowchart", { curviness: 20 }], // 连接的方式为流程图
connectorStyle: { strokeStyle: "#014ae1", lineWidth: 2 },
maxConnections: -1 // 最大连接数不限
});
});
// 设置连接目标
jsPlumb.makeTarget(nodeList, {
dropOptions: { hoverClass: "dragHover"
},
anchor: "Continuous"
});
// 初始化所有连接元素为可拖动
jsPlumb.draggable(nodeList);
}
};
})();
