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" src="//repo.bfw.wiki/bfwrepo/js/jquery.2.11.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-ui-1.11.0.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.jsPlumb-1.6.2-min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//设置左侧为可复制的
$(".deviceLeft .deviceLeft_box").children().draggable({
helper: "clone",
scope: "zlg",
});
//设置右侧为拖拽存放区
var i = 0;
$("#main").droppable({
scope: "zlg",
drop: function(event, ui) {
//debugger
var left = parseInt(ui.offset.left - $(this).offset().left);
var top = parseInt(ui.offset.top - $(this).offset().top);
var type = ui.draggable[0].dataset.type;
switch (type) {
case "server": //01
i++;
var id = "chart-server" + i;
$(this).append('<div class="node nodecss server" style="position: absolute" id="' + id + '" data-type="' +
type + '" data-id=" " >' + $(ui.helper).html() + '</div>');
$("#" + id).css("left", left).css("top", top);
jsPlumb.addEndpoint(id, {
anchors: "Top"
}, hollowCircle);
jsPlumb.addEndpoint(id, {
anchors: "Right"
}, hollowCircle);
jsPlumb.addEndpoint(id, {
anchors: "Bottom"
}, hollowCircle);
jsPlumb.addEndpoint(id, {
anchors: "Left"
}, hollowCircle);
jsPlumb.draggable(id);
jsPlumb.makeTarget(id, {
anchor: "Continuous"
})
$("#" + id).draggable({
containment: "parent",
grid: [10, 10]
});
doubleclick("#" + id);
break;
case "host": //02
i++;
id = "chart-host" + i;
$(this).append('<div class="node nodecss host" style=\'position: absolute\' id="' + id + '" data-type="' +
type + '" data-id=" " >' + $(ui.helper).html() + "</div>");
$("#" + id).css("left", left).css("top", top);
jsPlumb.addEndpoint(id, {
anchors: "Top"
}, hollowCircle);
//jsPlumb.addEndpoint(id, { anchors: "Right" }, hollowCircle);
jsPlumb.addEndpoint(id, {
anchors: "Bottom"
}, hollowCircle);
//jsPlumb.addEndpoint(id, { anchors: "Left" }, hollowCircle);
jsPlumb.addEndpoint(id, hollowCircle);
jsPlumb.draggable(id);
jsPlumb.makeTarget(id, {
anchor: "Continuous"
})
$("#" + id).draggable({
containment: "parent",
grid: [10, 10]
});
doubleclick("#" + id);
break;
case "aisle": //03
i++;
id = "chart-aisle" + i;
$(this).append('<div class="node nodecss aisle" style=\'position: absolute\' id="' + id + '" data-type="' +
type + '" data-id=" " >' + $(ui.helper).html() + "</div>");
$("#" + id).css("left", left).css("top", top);
jsPlumb.addEndpoint(id, {
anchors: "Top"
}, hollowCircle);
//jsPlumb.addEndpoint(id, { anchors: "Right" }, hollowCircle);
jsPlumb.addEndpoint(id, {
anchors: "Bottom"
}, hollowCircle);
//jsPlumb.addEndpoint(id, { anchors: "Left" }, hollowCircle);
jsPlumb.addEndpoint(id, hollowCircle);
jsPlumb.draggable(id);
jsPlumb.makeTarget(id, {
anchor: "Continuous"
})
$("#" + id).draggable({
containment: "parent",
grid: [10, 10]
});
doubleclick("#" + id);
break;
case "route": //04
i++;
id = "chart-route" + i;
$(this).append('<div class="node nodecss route" style=\'position: absolute\' id="' + id + '" data-type="' +
type + '" data-id=" " >' + $(ui.helper).html() + '</div>');
$("#" + id).css("left", left).css("top", top);
jsPlumb.addEndpoint(id, {
anchors: "Top"
}, hollowCircle);
//jsPlumb.addEndpoint(id, { anchors: "Right" }, hollowCircle);
jsPlumb.addEndpoint(id, {
anchors: "Bottom"
}, hollowCircle);
//jsPlumb.addEndpoint(id, { anchors: "Left" }, hollowCircle);
jsPlumb.draggable(id);
jsPlumb.makeTarget(id, {
anchor: "Continuous"
})
$("#" + id).draggable({
containment: "parent",
grid: [10, 10]
});
doubleclick("#" + id);
break;
case "signal": //05
i++;
id = "chart-signal" + i;
$(this).append('<div class="node nodecss signal" style=\'position: absolute\' id="' + id + '" data-type="' +
type + '" data-id=" " >' + $(ui.helper).html() + '</div>');
$("#" + id).css("left", left).css("top", top);
jsPlumb.addEndpoint(id, {
anchors: "Top"
}, hollowCircle);
//jsPlumb.addEndpoint(id, { anchors: "Right" }, hollowCircle);
jsPlumb.addEndpoint(id, {
anchors: "Bottom"
}, hollowCircle);
//jsPlumb.addEndpoint(id, { anchors: "Left" }, hollowCircle);
jsPlumb.draggable(id);
jsPlumb.makeTarget(id, {
anchor: "Continuous"
})
$("#" + id).draggable({
containment: "parent",
grid: [10, 10]
});
doubleclick("#" + id);
break;
}
}
});
//基本连接线样式
var connectorPaintStyle = {
lineWidth: 2,
strokeStyle: "#61b8d0",
};
// 鼠标悬浮在连接线上的样式
var connectorHoverStyle = {
lineWidth: 2,
strokeStyle: "green",
};
//端点的颜色样式
var paintStyle = {
fillStyle: "#ccc",
radius: 10,
lineWidth: 6,
}
// 鼠标悬浮在端点上的样式
var hoverPaintStyle = {
fillStyle: "#aaa",
}
//设置连接端点和连接线
var holl.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0