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