效果图
jspumb.gif
需要用到以下四个文件包
- jQuery.js
- jquery-ui.min.css
- jquery-ui.min.js
- jquery.jsPlumb-1.6.2-min.js
<script src="js/jquery-ui-1.11.4.custom/external/jquery/jquery.js" type="text/javascript"></script>
<link rel="stylesheet" href="js/jquery-ui-1.11.4.custom/jquery-ui.min.css">
<script src="js/jquery-ui-1.11.4.custom/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/jquery.jsPlumb-1.6.2-min.js"></script>
css样式代码
<style>
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;
}
</style>
HTML页面代码
<div id="root">
<div id="left">
<div class="node" id="node1">流程1</div>
<div class="node node2css" id="node2">流程2</div>
<div class="node node3css" id="node3">流程3</div>
<div class="node node4css" id="node4">流程4</div>
</div>
<div id="right">
<h2>下方区域绘制流程图</h2>
<div class="content" id="main"></div>
</div>
</div>
js行为代码
<script>
//设置左侧为可复制的
$("#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('<div class="node" style="position: absolute" id="' + id + '" >' + $(ui.helper).html() + '</div>');
$("#" + 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("<div class='node node2css' style='position: absolute' id='" + id + "'>" + $(ui.helper).html() + "</div>");
$("#" + 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("<div class='node node3css' style='position: absolute' id='" + id + "'>" + $(ui.helper).html() + "</div>");
$("#" + 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('<div class="node node4css" style=\'position: absolute\' id="' + id + '" >' + $(ui.helper).html() + '</div>');
$("#" + 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 $("<select id='myDropDown'>" +
"<option value='one'>暂未审理</option>" +
"<option value='two'>通过</option>" +
"<option value='three'>驳回</option>" +
"</select>");
},
location:0.7,
id:"customOverlay",
}]
]
};
//鼠标进入增加一个删除的小图标
$("#main").on("mouseenter", ".node", function () {
$(this).append('<img src="images/close2.png" style="position: absolute;" />');
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("<input style='width: 130px' type='text' value='" + text + "' />");
$(this).mouseleave(function () {
$(this).html($("input[type='text']").val());
});
});
}
</script>
