html5 jsplumb,jsPlumb开发入门教程(实现html5拖拽连线)
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。
初始化
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代码
html部分仅声明三个div,注意,jsPlumb通过id来识别html元素,因此如果要使用jsPlumb连线必须声明id。
.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;
}
最终效果
到此我们就完成了一个简单的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
第一次发教程,如果对大家有用的话,还希望能留言支持一下。有任何问题也欢迎大家一块交流探讨。
个人博客:http://blog..net/zhaoxy2850
本文地址:http://blog..net/zhaoxy2850/article/details/9532143
转载请注明出处,谢谢!
html5 jsplumb,jsPlumb开发入门教程(实现html5拖拽连线)相关推荐
- Web前端开发入门教程,HTML5+CSS3+JS教程,达到web前端工程师的水平
Web前端开发是一个非常热门的职业,随着互联网的发展,越来越多的企业需要拥有自己的网站和应用程序.本文将介绍Web前端开发的入门教程,包括HTML5.CSS3和JS教程,帮助读者达到Web前端工程师的 ...
- HTML5移动应用开发入门经典 中文pdf扫描版
HTML5是关注度ZUI高的前沿Web技术,而移动互联网则是近两年ZUI炙手可热的Web领域.<HTML5移动应用开发入门经典>将这两者巧妙结合起来,详细讲解了如何利用HTML5进行移动应 ...
- Web前端html5+css3前端开发入门学习笔记
文章目录 前言 HTML 认识HTML 1. 网页组成和本质 2.了解浏览器 3.web标准 4.HTML感知 5.HTML骨架 6.编译软件vscode的简介和使用 7.注释 8.标签组成和关系 9 ...
- 《HTML5移动应用开发入门经典》—— 2.4 HTML5中的HTML语法变化
本节书摘来异步社区<HTML5移动应用开发入门经典>一书中的第2章,第2.4节,作者:[美]Jennifer Kyrnin,更多章节内容可以访问云栖社区"异步社区"公众 ...
- 《HTML5移动应用开发入门经典》—— 1.1 了解HTML5的由来
本节书摘来异步社区<HTML5移动应用开发入门经典>一书中的第1章,第1.1节,作者:[美]Jennifer Kyrnin,更多章节内容可以访问云栖社区"异步社区"公众 ...
- 《HTML5移动应用开发入门经典》—— 1.6 编写移动网站
本节书摘来异步社区<HTML5移动应用开发入门经典>一书中的第1章,第1.6节,作者:[美]Jennifer Kyrnin,更多章节内容可以访问云栖社区"异步社区"公众 ...
- IntelliJ IDEA开发入门教程
IntelliJ IDEA开发入门教程 本系列教程从 IntelliJ IDEA 的安装.卸载.软件设置.项目配置等各个方面进行讲解.通过本系列教程的学习,也希望你能爱上 IntelliJ IDEA, ...
- 【Arduino】开发入门教程【一】什么是Arduino
Arduino Arduino 是一款便捷灵活.方便上手的开源电子原型平台,包含硬件(各种型号的arduino板)和软件(arduino IDE).它适用于艺术家.设计师.爱好者和对于"互动 ...
- Arduino可穿戴开发入门教程Windows平台下安装Arduino IDE
Arduino可穿戴开发入门教程Windows平台下安装Arduino IDE Windows平台下安装Arduino IDE Windows操作系统下可以使用安装向导和压缩包形式安装.下面详细讲解这 ...
- Arduino可穿戴开发入门教程Arduino开发环境介绍
Arduino可穿戴开发入门教程Arduino开发环境介绍 Arduino开发环境介绍 Arduino不像我们使用的PC端操作系统一样,可以直接在操作系统中安装软件为操作系统编程.Arduino的软件 ...
最新文章
- access在sql中横向求和_access在sql中横向求和_求和还用Sum函数就out了,快捷键Alt+=一秒搞定,操作简单更高效......
- My FioriTest navigation from master page to detail page
- java weblogic连接池,Weblogic JNDI 方式连接连接池 (工作中遇到的问题)
- 前端 PDFObject.embed预览PDF,另类方式隐藏工具条样例
- Spring Boot笔记-get请求发送json数据(方便前端vue解析)
- 在python中一个子类只能有一个父类吗_在Python中,子类可以与父类在不同的文件中吗?...
- 2008,人力资源软件是否还依然
- pci串行端口找不到驱动程序_科普:PCI-E插槽都有哪些样子?
- 【转】其他人的BUG
- 百度硬盘搜索使用指南
- 基于Python的指数基金量化投资——指数基金估值榜
- 沉浸其境,共赴云栖数智硬核美学
- 模具行业ERP信息化(转)
- 常见web登陆授权方式及原理
- 201521123037 《Java程序设计》第6周学习总结
- java编程思想----7,多形性
- 在Windows10环境下安装RabbitMAQ、Erlang的坑
- 如何删除已被谷歌收录的404错误页面
- 2022-07-10 第八小组 张明敏 学习笔记
- linux 硬件看门狗 软件看门狗,如何确定机器上是否实现了硬件或软件看门狗?...