jsplumb实现流程图效果-html代码-BFW代码库

代码语言：html

所属分类：其他

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
			*{
				padding:0;
				margin:0;
				box-sizing: border-box;
			}
			#left{
				height:600px;
				width:200px;
				border:1px solid #000;
				float: left;
				margin-left:100px;
				padding:0 10px;
				position:relative;
			}
			#main{
				height:500px;
				width:800px;
				border:1px solid #000;
				float: left;
				margin-left:100px;
				position:relative;
			}
			.item{
				background: #CCFFFF;
				height:80px;
				line-height: 80px;
				width:160;
				border:1px solid #5F9EDF;
				margin: 5px 0;
	
				text-align: center;
				border-radius: 5px;
				cursor: pointer;
			}
			.theGrey{
			    background:#ccc!important;
			}
		</style>
</head>
<body>
<div id="left">
<div class="item" data-index="1">开始</div>
<div class="item" data-index="2">流程</div>
<div class="item" data-index="3">结束</div>
</div>
<div id="main">
</div>
<button onclick="save()">保存</button>
<br />
<br />
<input type="checkbox" id="onOff" /><label for="onOff">不可重复拖拽</label>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/jquery.17.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/jquery-ui-1.11.0.min.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/jquery.jsPlumb-1.6.2-min.js"></script>
<script type="text/javascript">
			function deepCopy(p, c) {  //克隆对象
			    var c = c || {};  
			    for (var i in p) {  
			        if(! p.hasOwnProperty(i)){  
			            continue;  
			        }  
			        if (typeof p[i] === 'object') {  
			            c[i] = (p[i].constructor === Array) ? [] : {};  
			            deepCopy(p[i], c[i]);  
			        } else {  
			            c[i] = p[i];  
			        }  
			    }  
			    return c;  
			} 
			function save() {
	            var connects = [];//存储连线的数组
	            var mainArr=[];//存储元素的数组
	            $.each(jsPlumb.getAllConnections(), function (idx, connection) {
	                connects.push({
	                    ConnectionId: connection.id,
	                    start:$(connection.source).attr("data-index"),
	                    end:$(connection.target).attr("data-index"),
	                    originSign:$(connection.source).attr("data-sign"),
	                    destinationSign:$(connection.target).attr("data-sign"),
	                });
	            });
	            $("#main .item").each(function(){
	            	mainArr.push({
	            		offset:$(this).position(),
	            		text:$(this).text(),
	            		index:$(this).attr("data-index"),
	            		sign:$(this).attr("data-sign"),
	            	});
	            });
	            console.log(connects);
	            console.log(mainArr);
				sessionStorage.setItem("flowsheet",JSON.stringify({"connects":connects,"mainArr":mainArr}));
	        }
			jsPlumb.ready(function() {//一定要加,否则你妹的老报错
				var connectorPaintStyle = {//基本连接线样式
	                lineWidth: 2,
	                strokeStyle: "#61B7CF",
	                joinstyle: "round",
	                outlineColor: "white",
	                outlineWidth: 0
	            };
	            var connectorHoverStyle = {// 鼠标悬浮在连接线上的样式
	                lineWidth: 3,
	                strokeStyle: "#216477",
	                outlineColor: "white",
	                outlineWidth: 0,
	            };
				var origin = {//起点
	                endpoint: ["Dot", { radius: 8 }],  //端点的形状
	                connectorStyle: connectorPaintStyle,//连接线的颜色，大小样式
	                connectorHoverStyle: connectorHoverStyle,
	                paintStyle: {
	                    strokeStyle: "#1e8151",
	                    fillStyle: "transparent",
	                    radius: 4,
	                    lineWidth: 2
	                },        //端点的颜色样式
	                //anchor: "AutoDefault",
	                isSource: true,    //是否可以拖动（作为连线起点）
	                connector: ["Flowchart", { stub: [40, 60], gap: 10, cornerRadius: 5, alwaysRespectStubs: true }],  //连接线的样式种类有[Bezier],[Flowchart],[StateMachine ],[Straight ]
	                isTarget: false,    //是否可以放置（连线终点）
	                maxConnections:-1,    // 设置连接点最多可以连接几条线,-1表示无限大
	                connectorOverlays: [["Arrow", { width: 10, length: 10, location: 1 }]]
	            };
	            var destination = {//终点
	                endpoint: ["Dot", { radius: 5 }],  //端点的形状
	                connectorStyle: connectorPaintStyle,//连接线的颜色，大小样式
	                connectorHoverStyle: connectorHoverStyle,
	                paintStyle: {fillStyle: "#1e8151",},        //端点的颜色样式
	                isSource: false,    //是否可以拖动（作为连线起点）
	                connector: ["Bezier", { stub: [40, 60], gap: 10, cornerRadius: 5, alwaysRespectStubs: true }],  //连接线的样式种类有[Bezier],[Flowchart],[StateMachine ],[Straight ]
	                isTarget: true,    //是否可以放置（连线终点）
	                maxConnections:-1,    // 设置连接点最多可以连接几条线,-1表示无限大
	                connectorOverlays: [["Arrow", { width: 10, length: 10, location: 1 }]]
	            };
				$("#left").children().draggable({
	                helper: "clone",
	                scope: "ss",
	            });
	            var elementSign=0;//标志元素唯一性
	            $("#main".........完整代码请登录后点击上方下载按钮下载查看