jsPlumb的基本使用

标签（空格分隔）： jsplumb jquery angularjs jqueryui

Jsplumb 是 Jquery 的一个插件，它能够让你用动态的或静态的链接来连接 html 界面上行的元素，并且从1.1.0版本开始，提供用鼠标拖动来链接。目前该插件支持三个 javascript 库，有Jquery、MooToos、Yui3，jsplumb代码是开源的，并且是麻省理工学院许可，由 google 进行代码托管。

官方示例
jsPlumbApi
git下载地址

JsPlumb 允许您使用 SVG、Canvas 或者 VML 链接屏幕上的元素，这些取决于您使用的浏览器的能力，目前 jsplumb 已兼容到 IE6。

##初始化##
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 classactiveClass:"dragActive"//可拖动到的元素使用的css class
};

##添加jsPlumb连接点##
可以看一下点的基本属性的设置，当然我们需要一个对象：

var exampleEndpoint = {endpoint:["Dot", { radius:11 }],//设置连接点的形状为圆形,"Rectangle"为矩形paintStyle:{ fillStyle:"#000000" },//设置连接点的颜色anchor:"BottomLeft",    //设置连接点的位置，左下角isSource:true, //是否可以拖动（作为连线起点）scope:"green dot",//连接点的标识符，只有标识符相同的连接点才能连接connectorStyle:{ strokeStyle:color1, lineWidth:6},//连线颜色、粗细connector: ["Bezier", { curviness:63 } ],//设置连线为贝塞尔曲线maxConnections:1,//设置连接点最多可以连接几条线isTarget: true,    //是否可以放置（作为连线终点）ConnectionOverlays: [[ "Arrow", {location: 1,id: "arrow",length: 14,foldback: 0.8} ],//关于线上的箭头的设置，正常情况下都保持默认设置["Label",{ label: "FOO", id: "label", cssClass:"aLabel"}],//关于设置线上文字，它的回调函数connection.getOverlay("label").setLabel（xxx）],dropOptions: exampleDropOptions//设置放置相关的css
};

当然连接点的属性还有很多，如果有需要可以查看 jsplumbAPI
想说，这个点的对象并不是固定的，如果你想在一个页面中显示不用样式的点，就可以创建不同的对象，随你心愿。

##绑定到HTML##
正常的绑定方式为：

jsPlumb.addEndpoint("xxx", exampleEndpoint);//将exampleEndpoint类型的点绑定到id为xxx的元素上

但是我们一般使用 jsplumb 时都是结合 jquery 或者 angularjs 的，两者的不同其实就是，一个动态生成 DOM，而另一个则需要数据来遍历生成模板。
我们也可以使用 jsPlumb 本身的一些方法对 source 或者 target 进行具体的设置，例如：instance.makeSource和instance.makeTarget等。
对了，也不要忘记书写元素的 css 样式哦。

##jsPlumb线上的事件##
jsplumb 本身自带本领，那就是对连线的一些事件，例如：

连线成功事件
instance.bind("connection", function (info) { info.connection.getOverlay("label").setLabel(info.connection.id); });
取消连线事件
instance.bind("connectionDetached", function (info) { info.connection.getOverlay("label").setLabel(info.connection.id); });
点开始移动事件
instance.bind("connectionDrag", function (connection) { console.log("connection " + connection.id + " is being dragged. suspendedElement is ", connection.suspendedElement, " of type ", connection.suspendedElementType); });
点拖动事件
instance.bind("connectionDragStop", function (connection) { console.log("connection " + connection.id + " was dragged"); });
点停止拖动事件
instance.bind("connectionMoved", function (params) { console.log("connection " + params.connection.id + " was moved"); });

##元素的拖拽##
jsplumb 真的是一个强大的系统，要想真的研究透彻，真的需要大费周折，它甚至自带了拖拽事件：

jsPlumb.draggable("someElementId", {containment:"parent"//拖拽的范围为当前元素的父元素});

你只需要输入你希望能够进行拖拽元素的 Id 即可，查看更多：jsplumbInstance
关于拖拽，你也可以使用 jqueryUI 的 draggable 来解决，jsplumb 可以 jquery-ui 完美融合，同时实现拖拽以及拖拽容器的设置。如果你希望在你的拓扑图或者业务流程图等等图中使用右键事件那么你可以大胆的使用 jquery-ContextMenu 插件来实现，效果还是不错滴。

##小结##
jsPlumb 是一个强大的插件，使用方便快捷。只是现在中文的API简直稀缺，对于英文极差的我来说真是苦不堪言，想要将 jsPlumb 研究透彻也是需要大量的时间成本的。我也只是在项目中偶尔遇到，希望对看到这篇小记得你有所帮助。

本文图片来自网络。
如有错误多多指正

jsPlumb的基本使用相关推荐

jsPlumb（3）-基本概念
介绍 jsPlumb是用来连接元素的,所以核心是Connection,其中又分为以下四个概念: Anchor 一个和某个相关元素的位置.你不能创建它们,非可视化,只有逻辑上的position.更多信息 ...
jsPlumb之流程图项目总结及实例
在使用jsPlumb过程中,所遇到的问题,以及解决方案,文中引用了<数据结构与算法JavaScript描述>的相关图片和一部分代码.截图是有点多,有时比较懒,没有太多的时间去详细的编辑. ...
jsPlumb.jsAPI阅读笔记(官方文档翻译)
setup 如果不使用jQuery或者类jQuery库,则传入的节点得用id的形式,否则jsPlumb会为元素设置一个id. jsPlumb.ready(function(){··· }); //or ...
vue内引入jsPlumb流程控制器（一）
1. npm i jsplumb --save 注:jsplumb要全小写 2. 在main.js内加: import jsPlumb from 'jsplumb' Vue.prototype.$j ...
jsplumb dom 位置发生变化，连线错位
4.jsplumb 在 dom 位置发生变化 jsplumb 监听不到,所以连线位置不对. 场景:点击按钮查找parent 的关系,展示parent,相反查找 children, 但是按钮盒子的位置变 ...
jsplumb拖线_基于jsplumb插件制作可拖拽、保存流程图、重绘保存后的流程图总结...
1.重点参考博文 https://blog.csdn.net/j_bean/article/details/78092647 2.关键点总结 1)实现可视区域图形画满后,拖动整个画布的效果 a.最好不 ...
【技术博客】基于JsPlumb和JQuery-UI的流程图的保存和再生成
开发组在开发过程中,都不可避免地遇到了一些困难或问题,但都最终想出办法克服了.我们认为这样的经验是有必要记录下来的,因此就有了[技术博客]. 基于JsPlumb和JQuery-UI的流程图的保存和再生 ...
如何查看jsplumb.js的API文档(YUIdoc的基本使用)#华为云·寻找黑马程序员#
[摘要] 介绍前端文档工具YUIdoc 示例代码托管在:http://www.github.com/dashnowords/blogs 一.问题描述最近向一些同事推荐了网页中实现流程图绘制的工具库j ...
html绘制流程图飞线,基于jsplumb绘制流程图
效果图 jspumb.gif 需要用到以下四个文件包 jQuery.js jquery-ui.min.css jquery-ui.min.js jquery.jsPlumb-1.6.2-min.js ...
使用jsPlumb插件实现动态连线功能
这周去看了两天的羽毛球亚锦赛,工作有提前晚上加班做一些,但是技术文章却拉下了. 这段时间一直在寻找可以实现前端元素动态连线的功能,找了好几个库,考虑过用d3或者原生svg和canvas来实现,最后和同 ...

jsPlumb的基本使用

jsPlumb的基本使用

jsPlumb的基本使用相关推荐

最新文章

热门文章