前言
jsPlumb是一款開源軟體，但jsPlumb toolkit是收費的，
本文主要使用jsPlumb實作一些簡單的流程設計功能，
基礎學習
首先引入jsplumb.min.js，
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/jsplumb.min.js"></script>
然后撰寫代碼如下：
<html lang="en">
?
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#diagramContainer {
padding: 20px;
width: 80%;
height: 200px;
border: 1px solid gray;
}
?
.item {
height: 80px;
width: 80px;
border: 1px solid blue;
float: left;
}
</style>
</head>
?
<body>
<div id="diagramContainer">
<div id="item_left" ></div>
<div id="item_right" style="margin-left:50px;"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/jsplumb.min.js"></script>
?
<script>
/* global jsPlumb */
jsPlumb.ready(function () {
jsPlumb.connect({
source: 'item_left',
target: 'item_right',
endpoint: 'Dot'
})
})
</script>
</body>
?
</html>
效果圖如下：
可以看到，我們定義了一個容器diagramContainer，和兩個div塊元素，然后通過jsPlumb的connect連接函式，將兩個正方形，連接到了一起，
基礎學習參考網站：https://github.com/wangduanduan/jsplumb-chinese-tutorial
流程設計器開發
首先設計Html元素，設計一個左側功能串列區域，一個右側流程設計區域，
然后再設計三個節點拖進設計區域后釋放時的樣式，
代碼如下：
<div id="app">
<div >
<div >
<div id="side-buttons" >
<div style="text-align:center;">
<h2 >節點串列</h2>
<hr />
<a href="https://www.cnblogs.com/kiba/p/#" data-template="tpl-Normal" role="button">
<i aria-hidden="true"></i>
節點
</a>
<hr />
<a id="export" href="https://www.cnblogs.com/kiba/p/#" role="button">
<i aria-hidden="true"></i>
匯出
</a>
</div>
</div>
<div >
<div ><p>提示：雙擊連接線可洗掉連接，</p></div>
<div id="drop-bg" >
?
</div>
</div>
</div>
</div>
</div>
?
<script id="tpl-Normal" type="text/html">
<div class='pa' id='{{id}}' style='top:{{top}}px;left:{{left}}px; opacity: 0.6;'>
?
<a class='btn btn-default' href='https://www.cnblogs.com/kiba/p/#' role='button'>
<div>
<input type="text" value="https://www.cnblogs.com/kiba/p/{{comment}}" tag="{{id}}" />
?
<span data-type="deleteNode" data-id="{{id}}" style="font-size:10px;margin:0 -10px 0 0">X</span>
@*<span data-type="addDragNode" data-id="{{id}}" style="font-size:10px;margin:0 5px 0 0">+</span>*@
</div>
</a>
</div>
</script>
?
<script id="tpl-Root" type="text/html">
<div class='pa' id='{{id}}' style='top:{{top}}px;left:{{left}}px;opacity: 0.6;'>
<a class='btn btn-success' href='https://www.cnblogs.com/kiba/p/#' role='button'>
<div style="width:80px;height:30px;line-height:35px">
{{comment}}
@*<span data-type="deleteNode" data-id="{{id}}">X</span>*@
</div>
</a>
</div>
</script>
?
<script id="tpl-Exit" type="text/html">
<div class='pa' id='{{id}}' style='top:{{top}}px;left:{{left}}px'>
<a class='btn btn-danger' href='https://www.cnblogs.com/kiba/p/#' role='button'>
<div style="width:80px;height:30px;line-height:35px">
{{comment}}
@*<span data-type="deleteNode" data-id="{{id}}">X</span>*@
</div>
</a>
</div>
</script>
頁面效果如下：
然后撰寫代碼實作拖拽和釋放的功能，
核心代碼如下：
jsPlumb.ready(
function () {
console.log("main-start")
jsPlumb.setContainer('diagramContainer')
$('.btn-controler').draggable({
helper: 'clone',
scope: 'ss'
})
?
$(areaId).droppable({
scope: 'ss',
drop: function (event, ui) {
dropNode(ui.draggable[0].dataset.template, ui.position)
}
})
?
$('#app').on('click', function (event) {
event.stopPropagation()
event.preventDefault()
var item = event.target.dataset
if (item.type === 'deleteNode') {
var index = -1;
data.nodeList.forEach(function (node, i) {
if (node.id == item.id) {
index = i;
}
})
data.nodeList.splice(index, 1);
console.log(data.nodeList)
jsPlumb.remove(item.id)
}
})
// 單點擊了連接線上的X號
jsPlumb.bind('dblclick', function (conn, originalEvent) {
DataDraw.deleteLine(conn)
})
// 當鏈接建立
jsPlumb.bind('beforeDrop', function (info) {
console.log("beforeDrop")
console.log(info)
var isSame = false;
data.nodeList.forEach(function (node) {
if (info.sourceId == node.id) {
if (!node.data) {
node.data = https://www.cnblogs.com/kiba/p/[]
var nextNode = {"nextNode": info.targetId
}
node.data.push(nextNode)
}
else {
node.data.forEach(function (dItem){
if (dItem.nextNode == info.targetId) {
isSame = true;
return;
}
})
if (!isSame) {
var nextNode = {
"nextNode": info.targetId
}
node.data.push(nextNode)
}
}
}
?
})
if (!isSame) {
console.log(data.nodeList)
return connectionBeforeDropCheck(info)
}
else {
console.log("節點相同")
return
}
})
console.log("main-DataDraw.draw")
DataDraw.draw(data.nodeList)
console.log("初始化節點文本事件")
initNodeTextEvent();
})
jsPlumb函式：
setContainer：設定容器，
droppable：指定該區域支持拖拽的控制元件，
draggable：指定該按鈕可以被拖拽，
自定義函式：
DataDraw.draw初始化節點，
initNodeTextEvent設計圖中的節點中的節點名稱變化，同步到節點串列陣列物件中，實作資料同步，
頁面初始化時讀取了data.js檔案中的起始配置節點的資料，
data.js檔案如下：
var data = https://www.cnblogs.com/kiba/p/{'nodeList': [{ "id": "Start", "type": "Root", "comment": "開始", "top": 50, "left": 150, "data": [{ "nextNode": "81422cf0-00ae-11ec-b359-c13e24702355" }, { "nextNode": "779c8300-00b1-11ec-923c-fbdaa48876a6" }] }, { "id": "e1a3de30-0096-11ec-b888-ddd94967488d", "comment": "22", "top": 198, "left": 566, "type": "Normal", "data": [{ "nextNode": "Exit" }] }, { "id": "81422cf0-00ae-11ec-b359-c13e24702355", "comment": "1", "top": 634, "left": 432, "type": "Normal", "data": [{ "nextNode": "Exit" }] }, { "id": "84689a40-00ae-11ec-b359-c13e24702355", "comment": "2", "top": 628, "left": 198, "type": "Normal", "data": [{ "nextNode": "Exit" }] }, { "id": "779c8300-00b1-11ec-923c-fbdaa48876a6", "comment": "", "top": 891, "left": 617, "type": "Normal" }, { "id": "Exit", "type": "Exit", "comment": "結束", "top": 818, "left": 929 }, { "id": "a57fe0d0-00b3-11ec-99d4-39fb5d424f70", "comment": "", "top": 316, "left": 1130, "type": "Normal" }]
}
這樣我們就實作了基礎的流程設計器了，下面我們看一下功能，
洗掉
點擊鏈接線可以洗掉鏈接，如下圖：
拖拽
拖拽節點按鈕到設計器區域，如下圖：
匯出
點擊匯出按鈕將當前流程的節點資訊匯出成json字串，如下圖
可以看到，設計器是支持一個節點發射出多個鏈接線的，
在匯出時，我們再設計器中修改的節點名，也被同步的匯出到json字串中了，
----------------------------------------------------------------------------------------------------
到此，jsPlumb開發流程設計器就已經介紹完了，
代碼已經傳到Github上了，歡迎大家下載，
Github地址： https://github.com/kiba518/KibaWorkFlowDesigner_JS
----------------------------------------------------------------------------------------------------
注：此文章為原創，任何形式的轉載都請聯系作者獲得授權并注明出處！
若您覺得這篇文章還不錯，請點擊下方的【推薦】，非常感謝！
https://www.cnblogs.com/kiba/p/15293054.html
https://www.cnblogs.com/kiba/
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/300618.html
標籤：JavaScript
下一篇：Vue 2.0 基礎