jsPlumb開發入門教程（實現html5拖拽連線）

時間 2019-11-11

標籤 jsplumb 開發入門教程實現 html5 html 連線欄目 HTML5 简体版

原文原文鏈接

jsPlumb是一個強大的JavaScript連線庫，它能夠將html中的元素用箭頭、曲線、直線等鏈接起來，適用於開發Web上的圖表、建模工具等。它同時支持jQuery+jQuery UI、MooTools和YUI3這三個JavaScript框架，十分強大。你們能夠在官網的Demo中看看它的功能。目前可用的jsPlumb中文資料不多，但願這篇教程能夠幫助你們更快的瞭解jsPlumb。出於篇幅考慮，本教程將以jQuery爲例介紹jsPlumb。javascript

瀏覽器兼容性

在使用jsPlumb以前，你們須要先了解一下各瀏覽器對jsPlumb的兼容性。jsPlumb支持IE6以上以及各大瀏覽器，可是仍然有一些bug：css

在IE9上，因爲jQuery1.6.x和1.7.x的SVG相關實現有一個bug，會致使鼠標停留事件沒法響應
Safari5.1上有一個SVG的bug，會致使鼠標事件沒法經過SVG元素的透明區域傳遞
在Firefox11上基於MooTools使用SVG時會出現一些問題

下載和引入

jsPlumb的源碼和Demo能夠在 GitHub上下載，不想下載整個工程的能夠直接從這裏下載1.4.0版本。

在引入jsPlumb的同時，還須要引入jQuery和jQuery UI。須要說明的是，jsPlumb只兼容jQuery1.3.x及以上版本，並在jQuery UI 1.7.x、1.8.x及1.9.x上測試經過。另外，若是你使用1.7.x、1.8.x的jQuery UI，還須要額外引入jQuery UI Touch Punch。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script type="text/javascript" src="PATH_TO/jquery.jsPlumb-1.4.0-all-min.js "></script>

初始化

jsPlumb只有等到DOM初始化完成以後才能使用，所以咱們在如下代碼中調用jsPlumb方法

jsPlumb.ready(function() {
...         
// some code
...
});

首先，咱們給jsPlumb設一些默認值，而後聲明一個exampleDropOptions變量。

jsPlumb.importDefaults({
    DragOptions : { cursor: 'pointer'},	//拖動時鼠標停留在該元素上顯示指針，經過css控制
    PaintStyle : { strokeStyle:'#666' },//元素的默認顏色
    EndpointStyle : { width:20, height:16, strokeStyle:'#666' },//鏈接點的默認顏色
    Endpoint : "Rectangle",//鏈接點的默認形狀
    Anchors : ["TopCenter"]//鏈接點的默認位置
});
var exampleDropOptions = {
    hoverClass:"dropHover",//釋放時指定鼠標停留在該元素上使用的css class
    activeClass:"dragActive"//可拖動到的元素使用的css class
};

添加jsPlumb鏈接點

而後聲明兩種類型的鏈接點。

var color1 = "#316b31";						
var exampleEndpoint1 = {			
	endpoint:["Dot", { radius:11 }],//設置鏈接點的形狀爲圓形
	paintStyle:{ fillStyle:color1 },//設置鏈接點的顏色
	isSource:true,	//是否能夠拖動（做爲連線起點）
	scope:"green dot",//鏈接點的標識符，只有標識符相同的鏈接點才能鏈接
	connectorStyle:{ strokeStyle:color1, lineWidth:6 },//連線顏色、粗細
	connector: ["Bezier", { curviness:63 } ],//設置連線爲貝塞爾曲線
	maxConnections:1,//設置鏈接點最多能夠鏈接幾條線
	isTarget:true,	//是否能夠放置（做爲連線終點）
	dropOptions : exampleDropOptions//設置放置相關的css
};

var color2 = "rgba(229,219,61,0.5)";
var exampleEndpoint2 = {
	endpoint:"Rectangle",	//設置鏈接點的形狀爲矩形
	anchor:"BottomLeft",	//設置鏈接點的位置，左下角
	paintStyle:{ fillStyle:color2, opacity:0.5 },	//設置鏈接點的顏色、透明度
	isSource:true,	//同上
	scope:'yellow dot',	//同上
	connectorStyle:{ strokeStyle:color2, lineWidth:4},//同上
	connector : "Straight",	//設置連線爲直線
	isTarget:true,	//同上
	maxConnections:3,//同上
	dropOptions : exampleDropOptions,//同上
	beforeDetach:function(conn) {	//綁定一個函數，在連線前彈出確認框
		return confirm("Detach connection?");
	},
	onMaxConnections:function(info) {//綁定一個函數，當到達最大鏈接個數時彈出提示框
		alert("Cannot drop connection " + info.connection.id + " : maxConnections has been reached on Endpoint " + info.endpoint.id);
	}
};

將鏈接點綁定到html元素上

var anchors = [[1, 0.2, 1, 0], [0.8, 1, 0, 1], [0, 0.8, -1, 0], [0.2, 0, 0, -1] ],
	maxConnectionsCallback = function(info) {
		alert("Cannot drop connection " + info.connection.id + " : maxConnections has been reached on Endpoint " + info.endpoint.id);
	};


var e1 = jsPlumb.addEndpoint("state2", { anchor:"LeftMiddle" }, exampleEndpoint1);//將exampleEndpoint1類型的點綁定到id爲state2的元素上
e1.bind("maxConnections", maxConnectionsCallback);//也能夠在加到元素上以後綁定函數

jsPlumb.addEndpoint("state1", exampleEndpoint1);//將exampleEndpoint1類型的點綁定到id爲state1的元素上
jsPlumb.addEndpoint("state3", exampleEndpoint2);//將exampleEndpoint2類型的點綁定到id爲state3的元素上
jsPlumb.addEndpoint("state1", {anchor:anchors}, exampleEndpoint2);//將exampleEndpoint2類型的點綁定到id爲state1的元素上，指定活動鏈接點

須要注意的是鏈接點分爲動態鏈接點和靜態鏈接點。當指定一個數組做爲鏈接點時，該鏈接點爲動態鏈接點，連線時會自動選擇最近的鏈接點鏈接；當指定一個座標或者固定位置（TopRight、RightMiddle等）做爲鏈接點時，該鏈接點爲靜態鏈接點，無論怎麼連線都不會移動。具體可參見官方文檔。

Html和CSS代碼

<body>
<div id="state1" class="item"></div>
<div id="state2" class="item"></div>
<div id="state3" class="item"></div>
</body>

html部分僅聲明三個div，注意，jsPlumb經過id來識別html元素，所以若是要使用jsPlumb連線必須聲明id。

<style type="text/css">
	.dragActive { border:2px dotted orange; }	//當拖動一個鏈接點時，可鏈接的鏈接點會自動使用該css
        .dropHover { border:1px dotted red; }		//當拖動一個鏈接點到可鏈接的點時，該點會自動使用該css
        .item {
            border: 1px solid black;
            background-color: #ddddff;
            width: 100px;
            height: 100px;
            position: absolute;
        }

        #state1 {
            left: 100px;
            top: 100px;
        }

        #state2 {
            left: 250px;
            top: 250px;
        }

        #state3 {
            left: 100px;
            top: 250px;
        }
</style>