html实现流程设计器,Jquery+jsPlumb实现流程图设计器

核心代码如下

/*

*  DragFlow初始化类，主要包括：

*  1、初始化流程默认显示样式；

*  2、解析流程步骤及步骤关系；

*  3、设置所有元素的可拖拽性、目标节点、源节点等

*  4、设置右键菜单；

*  Author:bruced

*  date:2013.04.22

*/

DragFlowInit.js

(function () {

window.DragFlow = {

init: function () {

// jsplum默认样式

jsPlumb.importDefaults({

DragOptions: { cursor: "pointer", zIndex: 2000 },

HoverClass: "connector-hover",

HoverPaintStyle: { strokeStyle: "#7ec3d9" },

PaintStyle: {

lineWidth: 1,

strokeStyle: "black"

},

ConnectorZIndex: 10

});

DragFlow.createConnectionRef();

//设置元素拖动

jsPlumb.draggable(jsPlumb.getSelector(".window"));

// 设置所有节点的右键菜单

//DragFlow.makecontextmenu("", true);

// 连线单击事件

jsPlumb.bind("click", function (connection, originalEvent) {

//存在样式结果执行

if (connection.getOverlay("label") != null) {

                    // connection.getOverlay("label").setLabel("" + connection.sourceId);

}

else {//不存在样式对象，则动态创建

//connection.overlays = overlay;

//alert(connection.getOverlay("label"))

connection.addOverlay(DragFlow.overlay(""), "");

                    //connection.getOverlay("label").setLabel("" + connection.sourceId);

}

var type = $("#" + connection.targetId).attr("itemtype");

// alert(type);

});

//连接元素事件

$(".ep").unbind("mouseove