html绘制流程图飞线,基于jsplumb绘制流程图

效果图

jspumb.gif

需要用到以下四个文件包

jQuery.js

jquery-ui.min.css

jquery-ui.min.js

jquery.jsPlumb-1.6.2-min.js

css样式代码

body{

text-align: center;

}

#root{

width:100%;

height:100vh;

display: flex;

justify-content: space-between;

}

#left{

width:243px;

height:50vh;

padding:32px;

border:2px solid darkgray;

box-sizing: border-box;

display: flex;

flex-flow: column;

justify-content: space-between;

}

.node {

box-shadow: 2px 2px 19px #aaa;

border-radius:6px;

opacity: 0.8;

filter: alpha(opacity=80);

border: 1px solid #346789;

width: 150px;

text-align: center;

z-index: 20;

background-color: #eeeeef;

color: black;

padding: 10px;

font-size: 9pt;

cursor: pointer;

height: 50px;

/*line-height: 50px;*/

background: lightskyblue;

}

.node:hover {

box-shadow: 2px 2px 19px #444;

opacity: 0.8;

filter: alpha(opacity=80);

}

.node2css{

background:orange;

}

.node3css{

background: indianred;

}

.node4css{

background: greenyellow;

}

#right{

width:calc(100% - 260px);

height:100vh;

border:2px solid olivedrab;

box-sizing: border-box;

}

.content{

border-top: 1px solid darkgrey;

}

#myDropDown{

width:80px;

height:30px;

border:2px solid blue;

}

#main{

width:100%;

height:calc(100% - 75px);

border:1px solid red;

}

HTML页面代码

流程1

流程2

流程3

流程4

下方区域绘制流程图

js行为代码

//设置左侧为可复制的

$("#left").children().draggable({

helper: "clone",

scope: "zlg",

});

//设置右侧为拖拽存放区

var i=0;

$("#main").droppable({

scope:"zlg",

drop:function (event , ui) {

var left = parseInt(ui.offset.left - $(this).offset().left)+268.78;

var top = parseInt(ui.offset.top - $(this).offset().top)+81;

var name = ui.draggable[0].id;

switch (name) {

case "node1":

i++;

var id = "state_start" + i;

$(this).append('

' + $(ui.helper).html() + '

');

$("#" + id).css("left", left).css("top", top);

jsPlumb.addEndpoint(id, { anchors: "TopCenter" }, hollowCircle);

jsPlumb.addEndpoint(id, { anchors: "RightMiddle" }, hollowCircle);

jsPlumb.addEndpoint(id, { anchors: "BottomCenter" }, hollowCircle);

jsPlumb.addEndpoint(id, { anchors: "LeftMiddle" }, hollowCircle);

jsPlumb.draggable(id);

$("#" + id).draggable({ containment: "parent" });

doubleclick("#" + id);

break;

case "node2":

i++;

id = "state_flow" + i;

$(this).append("

" + $(ui.helper).html() + "

");

$("#" + id).css("left", left).css("top", top);

jsPlumb.addEndpoint(id, { anchors: "TopCenter" }, hollowCircle);

jsPlumb.addEndpoint(id, { anchors: "RightMiddle" }, hollowCircle);

jsPlumb.addEndpoint(id, { anchors: "BottomCenter" }, hollowCircle);

jsPlumb.addEndpoint(id, { anchors: "LeftMiddle" }, hollowCircle);

jsPlumb.addEndpoint(id, hollowCircle);

jsPlumb.draggable(id);

$("#" + id).draggable({ containment: "parent" });

doubleclick("#" + id);

break;

case "node3":

i++;

id = "state_decide" + i;

$(this).append("

" + $(ui.helper).html() + "

");

$("#" + id).css("left", left).css("top", top);

jsPlumb.addEndpoint(id, { anchors: "TopCenter" }, hollowCircle);

jsPlumb.addEndpoint(id, { anchors: "RightMiddle" }, hollowCircle);

jsPlumb.addEndpoint(id, { anchors: "BottomCenter" }, hollowCircle);

jsPlumb.addEndpoint(id, { anchors: "LeftMiddle" }, hollowCircle);

jsPlumb.addEndpoint(id, hollowCircle);

jsPlumb.draggable(id);

$("#" + id).draggable({ containment: "parent" });

doubleclick("#" + id);

break;

case "node4":

i++;

id = "state_end" + i;

$(this).append('

' + $(ui.helper).html() + '

');

$("#" + id).css("left", left).css("top", top);

jsPlumb.addEndpoint(id, { anchors: "TopCenter" }, hollowCircle);

jsPlumb.addEndpoint(id, { anchors: "RightMiddle" }, hollowCircle);

jsPlumb.addEndpoint(id, { anchors: "BottomCenter" }, hollowCircle);

jsPlumb.addEndpoint(id, { anchors: "LeftMiddle" }, hollowCircle);

jsPlumb.draggable(id);

$("#" + id).draggable({ containment: "parent" });

doubleclick("#" + id);

break;

}

}

});

//基本连接线样式

var connectorPaintStyle = {

lineWidth: 4,

strokeStyle: "#61B7CF",

joinstyle: "round",

outlineColor: "white",

outlineWidth: 2

};

// 鼠标悬浮在连接线上的样式

var connectorHoverStyle = {

lineWidth: 4,

strokeStyle: "green",

outlineWidth: 2,

outlineColor: "white"

};

//端点的颜色样式

var paintStyle = {

strokeStyle: "#1e8151",

fillStyle: "transparent",

radius: 3,

lineWidth:6 ,

}

// 鼠标悬浮在端点上的样式

var hoverPaintStyle = {

outlineStroke: 'lightblue'

}

//设置连接端点和连接线

var hollowCircle = {

endpoint: ["Dot", { radius: 8 }], //端点的形状

connectorStyle: connectorPaintStyle,

connectorHoverStyle: connectorHoverStyle,

paintStyle: paintStyle,

hoverPaintStyle: hoverPaintStyle ,

isSource: true, //是否可以拖动(作为连线起点)

connector: ["Flowchart", { stub: [40, 60], gap: 10, cornerRadius: 5, alwaysRespectStubs: true }], //连接线的样式种类有[Bezier],[Flowchart],[StateMachine ],[Straight ]

isTarget: true, //是否可以放置(连线终点)

maxConnections: -1, // 设置连接点最多可以连接几条线

connectorOverlays:[ "Arrow",

["Custom", {

create:function(component) {

return $("" +

"暂未审理" +

"通过" +

"驳回" +

"");

},

location:0.7,

id:"customOverlay",

}]

]

};

//鼠标进入增加一个删除的小图标

$("#main").on("mouseenter", ".node", function () {

$(this).append('');

var widthnum = $(this).css("width").substr(0,5);

if (widthnum < 60) {

$("img").css("left", 67).css("top", -13);

} else {

$("img").css("left", 167).css("top", -12);

}

});

//鼠标离开小图标消失

$("#main").on("mouseleave", ".node", function () {

$("img").remove();

});

//节点小图标的单击事件

$("#main").on("click", "img",function () {

if (confirm("确定要删除此节点吗?")) {

jsPlumb.removeAllEndpoints($(this).parent().attr("id"));

$(this).parent().remove();

}

});

//连接线的双击事件

jsPlumb.bind("dblclick", function (conn, originalEvent) {

if (confirm("确定删除此连线吗？"))

jsPlumb.detach(conn);

});

//双击节点内容区域时的事件

function doubleclick(id) {

$(id).dblclick(function () {

var text = $(this).text();

$(this).html("");

$(this).append("");

$(this).mouseleave(function () {

$(this).html($("input[type='text']").val());

});

});

}