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>

最终效果

到此咱们就完成了一个简单的jsPlumb连线示例，你们能够在浏览器中运行一下看看效果。源码能够在这里下载。

进一步学习

本文中的例子参考了Emiel的教程 Getting started with jsPlumb以及官方Demo DraggableConnections，你们也能够看一看。

因为篇幅限制，本文并未对jsPlumb的全部特性及功能进行说明，你们能够经过官网进行更深刻的学习。不过我的认为官方文档比较难读，建议你们能够结合官网的Demo学习，Demo源码能够在GitHub上下载到。

Demo： http://jsplumbtoolkit.com/jquery/demo.html

官方文档： http://jsplumbtoolkit.com/doc/home

API： http://jsplumbtoolkit.com/apidocs/files/jsPlumb-1.4.1-apidoc.html

第一次发教程，若是对你们有用的话，还但愿能留言支持一下。有任何问题也欢迎你们一块交流探讨。

转载请注明出处，谢谢！