jsPlumb开发入门教程（实现html5拖拽连线）

最新推荐文章于 2024-11-18 12:04:40 发布

心砚thu

最新推荐文章于 2024-11-18 12:04:40 发布

阅读量3.3w

点赞数 7

分类专栏： html5开发文章标签： jsPlumb html5 连线教程图

本文链接：https://blog.csdn.net/zhaoxy_thu/article/details/9532143

版权

本文是一篇关于jsPlumb的入门教程，详细介绍了如何在HTML5环境中实现元素的拖拽连线功能。jsPlumb是一个强大的JavaScript库，支持jQuery、MooTools和YUI3框架，广泛应用于Web图表和建模工具。教程涵盖从下载引入到初始化，再到连接点的添加和绑定，以及HTML和CSS代码示例，展示了最终的连线效果，并提供了进一步学习的指引。

摘要由CSDN通过智能技术生成

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.mi

最低0.47元/天解锁文章