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".........完整代码请登录后点击上方下载按钮下载查看
网友评论0