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

代码语言:html

所属分类:拖放

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

代码标签: 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