jsPlumb是一个强大的JavaScript连线库,它可以将html中的元素用箭头、曲线、直线等连接起来,适用于开发Web上的图表、建模工具等。它同时支持jQuery+jQuery UI、MooTools和YUI3这三个JavaScript框架,十分强大。大家可以在官网的Demo中看看它的功能。目前可用的jsPlumb中文资料很少,希望这篇教程可以帮助大家更快的了解jsPlumb。出于篇幅考虑,本教程将以jQuery为例介绍jsPlumb。

浏览器兼容性

在使用jsPlumb之前,大家需要先了解一下各浏览器对jsPlumb的兼容性。jsPlumb支持IE6以上以及各大浏览器,但是仍然有一些bug:

  • 在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上下载到。

第一次发教程,如果对大家有用的话,还希望能留言支持一下。有任何问题也欢迎大家一块交流探讨。
转载请注明出处,谢谢!

jsPlumb开发入门教程(实现html5拖拽连线)的更多相关文章

  1. Arduino可穿戴开发入门教程Windows平台下安装Arduino IDE

    Arduino可穿戴开发入门教程Windows平台下安装Arduino IDE Windows平台下安装Arduino IDE Windows操作系统下可以使用安装向导和压缩包形式安装.下面详细讲解这 ...

  2. Html5拖拽复制

    拖拽是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖拽是标准的一部分,任何元素都能够拖拽. Html5拖拽非常常见的一个功能,但是大部分拖拽的案例都是一个剪切的过程, 项目中需 ...

  3. 移动H5开发入门教程:12点webAPP前端开发经验

    如果你是一名移动H5前端开发人员,25学堂的小编认为下面的分享的12点webAPP前端开发经验是你必须掌握的基础知识点.算是一篇移动H5开发入门教程吧! 1. viewport:也就是可视区域.对于桌 ...

  4. html5拖拽

    html5拖拽一 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...

  5. 基于Nodejs生态圈的TypeScript+React开发入门教程

    基于Nodejs生态圈的TypeScript+React开发入门教程   概述 本教程旨在为基于Nodejs npm生态圈的前端程序开发提供入门讲解. Nodejs是什么 Nodejs是一个高性能Ja ...

  6. Arduino可穿戴开发入门教程(大学霸内部资料)

    Arduino可穿戴开发入门教程(大学霸内部资料) 试读下载地址:链接:http://pan.baidu.com/s/1mg9To28 密码:z5v8 介绍:Arduino可穿戴开发入门教程(大学霸内 ...

  7. 一看就懂的Android APP开发入门教程

    一看就懂的Android APP开发入门教程 作者: 字体:[增加 减小] 类型:转载   这篇文章主要介绍了Android APP开发入门教程,从SDK下载.开发环境搭建.代码编写.APP打包等步骤 ...

  8. iOS开发入门教程

    iOS开发入门教程 http://my.oschina.net/mailzwj/blog/133273 摘要 iOS开发入门教程,从创建项目到运行项目,包括OC基础,调试,模拟器设置等相关知识. iO ...

  9. HTML5 拖拽复制功能的实现方法

    Internet Explorer 9FirefoxOpera 12ChromeSafari 5 v1.0代码部分 <!DOCTYPE html><html><head& ...

随机推荐

  1. RecyclerView更通用——listView的onItemClick,onLongItemClick,addHeaderView,addFooterView

    一.点击事件 setOnItemClickListener,setOnItemLongClickListener RecyclerView中虽然没有提供上面这两个接口,但是给我们提供了另外一个接口:O ...

  2. WinAPI——模拟正弦波

    /*************************** * * 程序名称 : 模拟正弦波 * 作 者 : doodle777 * 版 本 : 1.1 * 日 期 : 2012-10-19 * 说 明 ...

  3. Oracle数据库名、实例名、数据库域名、全局数据库名、服务名之间的区别

    数据库名.实例名.数据库域名.全局数据库名.服务名 这是几个令很多初学者容易混淆的概念.相信很多初学者都与我一样被标题上这些个概念搞得一头雾水.我们现在就来把它们弄个明白. 一.数据库名 什么是数据库 ...

  4. sqlserver2012 评估期已过问题处理

    由于之前安装sqlserver2012忘记输入序列号,现在出现评估期已过的问题,网上忙活半天,才解决,发现网上叙述都很凌乱,而且只有大意,新手很难操作,所以把我操作的过程分享给大家 1 开始菜单找到s ...

  5. HashTable 及应用

    HashTable-散列表/哈希表,是根据关键字(key)而直接访问在内存存储位置的数据结构. 它通过一个关键值的函数将所需的数据映射到表中的位置来访问数据,这个映射函数叫做散列函数,存放记录的数组叫 ...

  6. 关于laravel框架的Auth::attempt验证失败

    按照官方文档进行认证 发现不管怎么样都是失败 if (Auth::attempt(array('email' => $email, 'password' => $password), tr ...

  7. Razor视图引擎

    在MVC3.0版本的时候,微软终于引入了第二种模板引擎:Razor.在这之前,我们一直在使用WebForm时代沿留下来的ASPX引擎或者第三方的NVelocity模板引擎. (1)Razor文件类型: ...

  8. 怎么用visual studio2010编写c++程序|用visual studio2010编写c++程序的步骤

    如何通过visual studio 2010编写一个简单的c++程序,随小编不一起看看如何编写. 首先打开visual studio 2010 点击软件左上角“文件-新建-项目”,选择“win32-w ...

  9. POJ 1987 Distance Statistics

    http://poj.org/problem?id=1987 题意:给一棵树,求树上有多少对节点满足距离<=K 思路:点分治,我们考虑把每个距离都存起来,然后排序,一遍扫描计算一下,注意还要减掉 ...

  10. css之marquee,让你的文字跳起来

    当你看到别人的网页文字动态效果美美哒,而你却为不会使用js而遗憾时,不妨看看这篇文章,教你如何只用css即可实现漂亮的文字滑动效果. 1.问题提出: 在一个特定大小的div中,如何让p标签内的内容动态 ...