(jsPlumb开发入门教程实现html5拖拽连线
?
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。
[javascript]?view plaincopy
??
??
??
初始化
jsPlumb只有等到DOM初始化完成之后才能使用,因此我们在以下代码中调用jsPlumb方法
[javascript]?view plaincopy
jsPlumb.ready(function()?{??
...???????????
//?some?code??
...??
});??
首先,我们给jsPlumb设一些默认值,然后声明一个exampleDropOptions变量。
[plain]?view plaincopy
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??
};??
然后声明两种类型的连接点。
[javascript]?view plaincopy
var?color1?=?"#316b31";???????????????????????
var?exampleEndpoint1?=?{??????????????
????endpoint:["Dot",?{?radius:11?}],//设置连接点的形状为圆形??
????paintStyle:{?fillStyle:color1?},//设置连接点的颜色??
????isSource:true,??//是否可以拖动(作为连线起点)??
????scope:"green?dot",//连接点的标识符,只有标识符相同的连接点才能连接??
????connectorStyle:{?stro