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

jsplumb实现流程图效果

代码语言：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;  
	.........完整代码请登录后点击上方下载按钮下载查看