jsPlumb流程图拖拽连线编辑删除效果代码-html代码-BFW代码库

jsPlumb流程图拖拽连线编辑删除效果代码

代码语言：html

所属分类：拖放

代码描述：jsPlumb流程图拖拽连线编辑删除效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/jquery-ui-1.11.0.min.css">
<style>
* {
	margin:0;
	padding:0;
	box-sizing:border-box
}
h1,h2,h3,h4,h5,h6,a,p,label,ul,li,label,span {
	margin:0;
	padding:0;
	font-family:'微软雅黑'
}
a,a:active,a:focus,a:hover {
	text-decoration:none
}
.clear {
	clear:both
}
body {
	background:#ededed
}
html,body {
	height:100%
}
.device .deviceLeft {
	width:220px;
	height:100%;
	border-right:1px solid #ccc;
	float:left;
	overflow:auto
}
.device .deviceLeft h3 {
	font-size:14px;
	background:#ddd;
	line-height:36px;
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc
}
.device .deviceLeft .deviceLeft_box {
	overflow:hidden;
	padding:10px 0
}
.device .deviceLeft .deviceLeft_box .node {
	user-select:none;
	width:63px;
	height:63px;
	line-height:43px;
	float:left;
	margin:5px;
	border-radius:50%
}
.device .node {
	width:70px;
	height:70px;
	line-height:52px;
	box-shadow:2px 2px 10px #aaa;
	border-radius:3px;
	text-align:center;
	z-index:20;
	background-color:#f1f1f2;
	color:black;
	padding:10px;
	font-size:14px;
	cursor:pointer;
	border-radius:50%
}
.device .node:hover {
	box-shadow:2px 2px 19px #444;
	opacity:.8;
	filter:alpha(opacity=80)
}
.device .node1css {
	border:lightskyblue 1px solid
}
.device .node2css {
	border:orange 1px solid
}
.device .node3css {
	border:indianred 1px solid
}
.device .node4css {
	border:greenyellow 1px solid
}
.device .node5css {
	border:#ccc 1px solid
}
.device #deviceRight {
	position:absolute;
	right:0;
	width:calc(100% - 220px);
	height:100%;
	box-sizing:border-box;
	background:url(//repo.bfw.wiki/bfwrepo/image/611b10eb67750.png)
}
.device #myDropDown {
	width:80px;
	margin-left:-14px;
	border:1px solid #ccc;
	text-align:center
}
.device #main {
	width:100%;
	height:100%
}
.btn_div {
	margin-top:16px;
	text-align:center
}
.btn_div button {
	padding:4px 16px;
	cursor:pointer;
	border:0;
	background:#0af;
	color:white
}
.btn_div button:hover {
	background:#1861ff
}

</style>
</head>

<body>
    <div class="container device">
        <div class="deviceLeft">
            <h3 id="timetext" style="text-align: center;">00:00:00</h3>
            <div class="btn_div"><button style="margin-right: 10px;" onclick="start()">开始</button><button style="margin-left: 10px;" onclick="end()">结束</button><button style="margin-left: 10px;" onclick="location.reload();">刷新</button></div>
            <div style="margin-top: 10px;padding-left: 10px;">连接错误数：<span class="errCount">0</span><br/>中断线次数：<span class="breakCount">0</span></div>
        </div>
        <div id="deviceRight">
            <div id="main"></div>
        </div>
    </div>
<script type="text/javascript".........完整代码请登录后点击上方下载按钮下载查看