jsPlumb开发入门教程(实现html拖拽连线).docVIP

? 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 script?type=text/javascript?src=/ajax/libs/jquery/1.8.1/jquery.min.js/script?? script?type=text/javascript?src=/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方法 [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:{?strokeStyle:color1,?lineWidth:6?},//连线颜色、粗细?? ??