jsplumb介绍
使用jsPlumb插件实现动态连线功能
使⽤jsPlumb插件实现动态连线功能这周去看了两天的⽻⽑球亚锦赛，⼯作有提前晚上加班做⼀些，但是技术⽂章却拉下了。
这段时间⼀直在寻找可以实现前端元素动态连线的功能，找了好⼏个库，考虑过⽤d3或者原⽣svg和canvas来实现，最后和同项⽬的同事商量后决定使⽤jsPlumb插件库来做。
jsPlumb是⼀个强⼤的JavaScript连线库，它可以将html中的元素⽤箭头、曲线、直线等连接起来，适⽤于开发Web上的图表、建模⼯具等，其实jsPlumb可能主要是⽤来做流程图的，它在实现这⽅⾯的功能上⾮常强⼤，我在项⽬中只使⽤了它少部分功能，来实现项⽬中连线的效果。
连线效果initJSPlumb = () => {this.jsp = jsPlumb.getInstance({//锚点位置；对任何没有声明描点的Endpoint设置锚点，⽤于source及target节点Anchor: ["Right", "Left"],Anchors: ["Right", "Left"], //连线的source和target AnchorConnectionsDetachable: false, //连线是否可⽤⿏标分离ConnectionOverlays: [ //连线的叠加组件，如箭头、标签["Arrow", { //箭头参数设置location: 1,visible: true,width: 11,length: 11,id: "ARROW",events: {click: function () {}}}],["Label", { //标签参数设置location: 0.1,id: "label",cssClass: "aLabel", //hover时label的样式名events: {tap: function () {}},visible: true}]],Connector: "Bezier", //连线的类型，流程图(Flowchart)、贝塞尔曲线等//⽗级元素id；假如页⾯元素所在上层不同，最外层⽗级⼀定要设置Container: "module",//如果请求不存在的Anchor、Endpoint或Connector，是否抛异常DoNotThrowErrors: false,//通过jsPlumb.draggable拖拽元素时的默认参数设置DragOptions: {cursor: 'pointer', zIndex: 2000},DropOptions: {}, //target Endpoint放置时的默认参数设置Endpoint: "Dot", //端点（锚点）的样式声明//⽤jsPlumb.connect创建连接时，source端点和target端点的样式设置Endpoints: [null, null],EndpointOverlays: [], //端点的叠加物//端点的默认样式EndpointStyle: {fill: 'transparent', stroke: '#1565C0', radius: 4,strokeWidth: 1},EndpointStyles: [null, null], //连线的source和target端点的样式//端点hover时的样式EndpointHoverStyle: {fill: '#1565C0', stroke: '#1565C0', radius: 4,strokeWidth: 1},//连线的source和target端点hover时的样式EndpointHoverStyles: [null, null],//连线hover时的样式HoverPaintStyle: {stroke: '#1565C0', strokeWidth: 3},LabelStyle: {color: "black"}, //标签的默认样式，⽤css写法。
前端流程图jsplumb学习笔记
前端流程图jsplumb学习笔记1、这篇博客很好,另外两个是官⽹⽂档2、Jsplump流程图画虚线⽤"dashstyle": "2 4"PaintStyle: {lineWidth: 3,strokeStyle: color,"dashstyle": "2 4"}3、简单连接jsPlumb.connect({source:"window4",target:"window5",anchors:["BottomRight","TopLeft"],paintStyle:{strokeWidth:7,stroke:'rgb(131,8,135)'},hoverPaintStyle:{ stroke:"rgb(0, 0, 135)" },endpointStyle:{ width:40, height:40 },endpoint:"Rectangle",connector:["Flowchart", { midpoint: 0.8}],overlays:[[ "Label", {label:"FOO", id:"label", location:0.7}]]});（1）connector:["Flowchart", { midpoint: 0.8}],设置折线抓点的位置，0-1，越⼩离源端点越近(2)label location 0-1, 越⼩离源端点越近(3)配置项写法都是name:[“type1”,{option1:value,option2:value2}]（4）anchors:[[ 0,0.5, -1, 0 ],"RightMiddle"], ⽤数组⾃定义anchor位置，[x,y,dx,dy],x和y为以noder的左上⾓为起点，向下或向右增加到1。
jsplumb流程图，常用功能配置记录
jsplumb流程图，常⽤功能配置记录前⾔：jsplumb 有2个版本⼀个Toolkit Edition（付费版），另外⼀个就是Community Edition（社区版本）。
Toolkit Edition版本功能集成的⽐较丰富，社区版本的就差好多，很多功能都没有，需要我们⾃⼰去添加，当然了⾃⼰添加多多少少有些⿇烦，⽽且也不完善。
但是我们还是⽤Community Edition（社区版本），毕竟不收费，没办法，下边所说的版本默认都是以社区版。
jsplumb.png上图也就是我这次⽤到的jsplumb实现的功能，连接线能够拖拽⽣成，也可以删除，编辑label。
1、数据结构{"nodes": [{ //节点集合"icon": "el-icon-loading","id": "start","nodeStyle": {"top": 100,"left": 200},"text": "开始","type": "circle"}, {"icon": "el-icon-upload","id": "end","nodeStyle": {"top": 300,"left": 400},"text": "结束","type": "circle"}] ,"connections": [{ //连接线集合"sourceId": "start","targetId": "end","label":"编辑"}]}jsplumb实例⾥⾯的数据结构就是这样的，这⾥我们沿⽤他的数据结构，你也可以⾃⼰定义⾃⼰想的数据结构，但是对⽐起来这个结构是最清晰也最⽅便的。
【IT专家】保存并载入一个关于jsPlumb的流程图。
本文由我司收集整编，推荐下载，如有疑问，请与我司联系保存并载入一个关于jsPlumb的流程图。
2011/09/13 11063 What’s the best approach to save and load an flowchart on jsPlumb? 在jsPlumb上保存和加载流程图的最佳方法是什么? 9 I managed to save the chart by simply having all the elements inside an array of objects, where each object has source and target nodes, x, y coordinates. 我通过简单地将所有元素放在一个对象数组中来保存图表，其中每个对象都有源节点和目标节点x、y坐标。
When saving, simply do JSON.stringify(whole_object), and if loading, simply JSON.parse() and manually position the nodes as well as connect them. 在保存时，只需执行JSON.stringify(whole_object)，如果加载，只需JSON.parse()，手动定位节点并连接它们。
7 My solution save and load jsPlumb: 我的解决方案save and load jsPlumb: function Save() { $(“.node”).resizable(“destroy”); Objs = []; $(‘.node’).each(function() { Objs.push({id:$(this).attr(‘id’), html:$(this).html(),left:$(this).css(‘left’),top:$(this).css(‘top’),width:$(this).css(‘width’),he ight:$(this).css(‘height’)}); console.log(Objs); console.log(o); s+=‘ div id=“‘+ o.id+’” style=“left:’+ o.left+’; top:’+ o.top+’; width:’+ o.width +’; height:’+ o.height +’ “ ‘+ o.html+’ /div $(‘#main’).html(s); UPD Demo: jsfiddle/Rra6Y/137/ 乌利希期刊指南演示:jsfiddle/Rra6Y/137/ Note: if demo does not work in JsFiddle, make sure it points to an existing jsPlumb link (links are listed in “External Resources” JsFiddle menu item 注意:如果demo在JsFiddle不工作，请确保它指向一个现有的jsPlumb链接(链接。
jquery.jsPlumb实现拓扑图
jquery.jsPlumb实现拓扑图基于jquery.jsPlumb编写拓扑图，供⼤家参考，具体内容如下要求：实现公司组织结构拓扑关系，可展开，可收拢；动态数据展⽰；叶⼦节点可点击；实现办法：1 国内还有⼀个插件也⽐较简单，但是该插件只能全部展开，并不能收拢，放弃了该办法；2 最后选择了这个插件，因为相关资料很少，所以每步都是⾃⼰摸索出来的；对数据的要求：因为该插件的每个节点都是⼀个具有独⽴不同id的div模块，所以json数据要求有⼀个id属性，并且所有的id都要不⼀样；实现的原理：1 先定位所有的节点（这个还简单点，只要依次遍历数据就⾏）；2 添加拓扑关系；（这个地⽅⽐较复杂，尤其是点击节点时，其他节点收缩，直接点展开，⾥⾯的循环量特别⼤，⼏乎都是在⼀个⼤循环⾥⾯套⽤了很多的⼦循环）1 html部分（注意事项，⾥⾯的图⽚⾃⼰设置）<!DOCTYPE html><html><head><meta charset="utf-8"><script type="text/javascript" src="scripts/jquery-1.7.2.js"></script><script type="text/javascript" src="scripts/jquery.jsPlumb-1.4.0-all.js"></script><script type="text/javascript" src="scripts/test.js"></script><style type="text/css">.rootNode {// background-color: #79deff;width: 36px;height: 36px;position: absolute;background-image: url(images/monitor_server.png);background-size: 32px 32px;background-repeat: no-repeat;background-position:center;/* -webkit-box-shadow: #909090 0px 0px 10px;-moz-box-shadow: #909090 0px 0px 10px;box-shadow: #909090 0px 0px 10px;*/}.instanceNode {// background-color: #50d4ff;width: 36px;height: 36px;position: absolute;background-image: url(images/instance_big.png);background-size: 32px 32px;background-repeat: no-repeat;background-position:center;-moz-background-size: 32px 32px;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/instance_big.png', sizingMethod='scale')\9;-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/instance_big.png',sizingMethod='scale')"\9;cursor:pointer;/* -webkit-box-shadow: #666 0px 0px 10px;-moz-box-shadow: #666 0px 0px 10px;box-shadow: #666 0px 0px 10px; */}.instanceNode_leaf {// background-color: #50d4ff;width: 36px;height: 36px;position: absolute;background-image: url(images/user_online.png);background-size: 32px 32px;background-repeat: no-repeat;background-position:center;-moz-background-size: 32px 32px;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/user_online.png', sizingMethod='scale')\9;-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/user_online.png',sizingMethod='scale')"\9;cursor:pointer;/* -webkit-box-shadow: #666 0px 0px 10px;-moz-box-shadow: #666 0px 0px 10px;box-shadow: #666 0px 0px 10px; */}.nodeWord{//font-weight: bold;font-size: 12px;color:white;text-align: center;position: absolute;bottom: -20px;width: 100%;}.cursorEndpoint{cursor:pointer;}body{background:#27363F;}</style></head><body style="overflow: scroll;"><div id="top_server" class="rootNode"><div style=""></div></div></body></html>2 test.jsvar tree_json=[{"id": "1","text": "国核院","iconCls": "icon-org","state": "closed","children": [{"id": "2","text": "⼟⽊⼯程部","iconCls": "icon-org","state": "closed","children": [{"id": "3","text": "科室⼀","iconCls": "icon-org","state": "closed","children": [{"id": "4","text": "u110","iconCls": "icon-man"},{"id": "5","text": "u120","iconCls": "icon-man"},{"id": "51","text": "u120","iconCls": "icon-man"}]},{"id": "6","text": "财务","iconCls": "icon-org","state": "closed","children": [{"id": "7","text": "u111","iconCls": "icon-man"},{"id": "71","text": "u111","iconCls": "icon-man"}]}]},{"id": "8","text": "建筑⼯程部","iconCls": "icon-org","state": "closed","children": [{"id": "9","text": "科室⼀","iconCls": "icon-org","state": "closed",},{"id": "11","text": "财务","iconCls": "icon-org","state": "closed","children": [{"id": "12","text": "u114","iconCls": "icon-man"}]}]},{"id": "13","text": "综合室","iconCls": "icon-org","state": "closed","children": [{"id": "14","text": "u113","iconCls": "icon-man"},{"id": "141","text": "u113","iconCls": "icon-man"}]},{"id": "15","text": "重庆公司","iconCls": "icon-org","state": "closed","children": [{"id": "16","text": "⼟⽊⼯程部","iconCls": "icon-org","state": "closed","children": [{"id": "17","text": "科室⼀","iconCls": "icon-org","state": "closed","children": [{"id": "18","text": "u115","iconCls": "icon-man" }]},{"id": "19","text": "财务","iconCls": "icon-org","state": "closed","children": [{"id": "20","text": "张⽂涛","iconCls": "icon-man"}]}]},{"id": "21","text": "建筑⼯程部","iconCls": "icon-org","state": "closed","children": [{"id": "24","text": "财务","iconCls": "icon-org","state": "closed","children": [{"id": "25","text": "李⼩进","iconCls": "icon-man"}]}]}]}]}];$.ajax({url: 'scripts/text.json',type: 'GET',dataType: 'json',data: {},}).done(function() {console.log("success");myjson=tree_json;showTopo();}).fail(function() {console.log("error");}).always(function() {console.log("complete");});function showTopo(){$("#top_server").css({"left":"50%","top":"5%"});$(document).on({mouseover:function(){$(this).css({"background-color":"#79deff","box-shadow":"#909090 0px 0px 10px", "-webkit-box-shadow": "#909090 0px 0px 10px","-moz-box-shadow": "#909090 0px 0px 10px"});},mouseout:function(){$(this).css({"background-color":"","box-shadow":"","-webkit-box-shadow": "","-moz-box-shadow": ""});},click:function(){alert($(this).text());}},".instanceNode_leaf");var company=myjson[0]["children"]; //初始化公司数组var companyNumber=company.length; //var company_department_arr=[]; //获取部门数组var company_department_sec_arr=[]; //获取科室数组//元素的摆放先摆放公司部门科室员⼯if(tree_json[0].hasOwnProperty("children")){elementLocation(company,companyNumber);}//开始定义连线和点击事件jsPlumb.ready(function() {jsPlumb.draggable("top_server"); //定义可拖拽var hoverPaintStyle = { lineWidth:2,strokeStyle:"#dedede" }; //⿏标经过时线宽度和颜⾊jsPlumb.importDefaults({DragOptions : { cursor: 'pointer'}, //拖动时⿏标停留在该元素上显⽰指针，通过css控制EndpointStyles : { width:10, height:10,cursor: 'pointer'},//连接点的默认颜⾊Connector : "Straight", //设置连线为直线Endpoint : "Rectangle",//连接点的默认形状Anchor : "Top",//连接点的默认位置MaxConnections:1000,//同上ConnectionsDetachable:false,HoverPaintStyle:hoverPaintStyle});var defaults = {paintStyle:{ fillStyle:"#B4B9C5" },//设置连接点的颜⾊connectorStyle:{ strokeStyle:"#B4B9C5", lineWidth:2 },//连线颜⾊、粗细connector:[ "Flowchart", { stub:[10, 20], gap:5, cornerRadius:2} ],isSource:true,isTarget:true,endpoint:"Blank"};var rootnode={endpoint:["Image", { src:"images/sub.png" }],//设置连接点的形状为圆形paintStyle:{ fillStyle:"#B4B9C5" },//设置连接点的颜⾊connectorStyle:{ strokeStyle:"green", lineWidth:2 },//连线颜⾊、粗细//connector:["Straight",{gap:5}],connector:[ "Flowchart", { stub:[10, 20], gap:10, cornerRadius:2} ],cssClass:"cursorEndpoint"};var s1=jsPlumb.addEndpoint("top_server", {anchor:"Bottom"},rootnode);//根节点设置//添加拓扑关系for(var i=0;i<companyNumber;i++){var company_department=company[i].children; //四个公司下⾯的部门jsPlumb.draggable("instance_"+company[i].id); //设置四个公司可拖拽var s2=jsPlumb.addEndpoint("instance_"+company[i].id,defaults); //设置四个公司的节点 jsPlumb.connect({source:s1, target:s2}); //连接服务器和是个公司;if(company_department.length>0){var s2_root=jsPlumb.addEndpoint("instance_"+company[i].id, {anchor:"Bottom"},rootnode); //把四个公司设置成根节点//对公司绑定click事件s2_root.bind("click", function(endpoint) {if(endpoint.getParameter("img")&&endpoint.getParameter("img")=="add"){endpoint.setParameter("img","sub");endpoint.setImage("images/sub.png");for(var k=0;k<endpoint.connections.length;k++){endpoint.connections[k].setVisible(true);$("#"+endpoint.connections[k].targetId).show();var oid=endpoint.connections[k].targetId.split("_")[1];jsPlumb.show("instance_"+oid,true);}//隐藏其他部门以及部门下的组织for(var m=0;m<company.length;m++){if(endpoint.elementId!="instance_"+company[m].id){var conn=jsPlumb.select({source:"instance_"+company[m].id});for(var n=0;n<conn.length;n++){$("#"+conn.get(n).targetId).hide();jsPlumb.hide(conn.get(n).targetId,true);var oid=conn.get(n).targetId.split("_")[1];var conn_org=jsPlumb.select({source:"instance_"+oid});for(var n1=0;n1<conn_org.length;n1++){$("#"+conn_org.get(n1).targetId).hide();jsPlumb.hide(conn_org.get(n1).targetId,true);var oid_1=conn_org.get(n1).targetId.split("_")[1];var conn_org_l1=jsPlumb.select({source:"instance_"+oid_1});for(var nn1=0;nn1<conn_org_l1.length;nn1++){$("#"+conn_org_l1.get(nn1).targetId).hide();}}}conn.get(0).endpoints[0].setParameter("img","add");conn.get(0).endpoints[0].setImage("images/add.png");conn.setVisible(false);}else{var company_department_orgnize=company[m].children;for(var kk=0;kk<company_department_orgnize.length;kk++){if(company_department_orgnize[kk].hasOwnProperty("children")){jsPlumb.select({source:"instance_"+company_department_orgnize[kk].id}).setVisible(false);jsPlumb.select({source:"instance_"+company_department_orgnize[kk].id}).get(0).endpoints[0].setParameter("img","add"); jsPlumb.select({source:"instance_"+company_department_orgnize[kk].id}).get(0).endpoints[0].setImage("images/add.png"); }}}}}else{endpoint.setParameter("img","add");endpoint.setImage("images/add.png");for(var k=0;k<endpoint.connections.length;k++){endpoint.connections[k].setVisible(false);$("#"+endpoint.connections[k].targetId).hide();jsPlumb.hide(endpoint.connections[k].targetId,true);var oid=endpoint.connections[k].targetId.split("_")[1];var conn_org=jsPlumb.select({source:"instance_"+oid});for(var n1=0;n1<conn_org.length;n1++){$("#"+conn_org.get(n1).targetId).hide();jsPlumb.hide(conn_org.get(n1).targetId,true);var oid_1=conn_org.get(n1).targetId.split("_")[1];var conn_org_l1=jsPlumb.select({source:"instance_"+oid_1});for(var nn1=0;nn1<conn_org_l1.length;nn1++){$("#"+conn_org_l1.get(nn1).targetId).hide();}}}}if (erAgent.indexOf('MSIE') > -1) {jsPlumb.repaintEverything();}});//添加部门拓扑关系，也就是连接公司到部门,遍历部门for(var i1=0;i1<company_department.length;i1++){var company_department_orgnize=company_department[i1].children; //四个公司下⾯的部门的组织jsPlumb.draggable("instance_"+company_department[i1].id); //设置部门可拖拽var s3=jsPlumb.addEndpoint("instance_"+company_department[i1].id,defaults); //设置部门的节点jsPlumb.connect({source:s2_root, target:s3}); //连接四个公司到部门company_department_arr.push(company_department[i1]);if(company_department[i1].hasOwnProperty("children")){var s3_root=jsPlumb.addEndpoint("instance_"+company_department[i1].id, {anchor:"Bottom"},rootnode); //把部门设置成根节点//对部门绑定click事件s3_root.bind("click", function(endpoint) {if(endpoint.getParameter("img")&&endpoint.getParameter("img")=="add"){endpoint.setParameter("img","sub");endpoint.setImage("images/sub.png");for(var k1=0;k1<endpoint.connections.length;k1++){endpoint.connections[k1].setVisible(true);$("#"+endpoint.connections[k1].targetId).show();var oid1=endpoint.connections[k1].targetId.split("_")[1];jsPlumb.show("instance_"+oid1,true);$("#instance_"+oid1).show();}//隐藏其他部门下的科室for(var mm=0;mm<company_department_arr.length;mm++){if(endpoint.elementId!="instance_"+company_department_arr[mm].id){var conn_org1=jsPlumb.select({source:"instance_"+company_department_arr[mm].id});if(company_department_arr[mm].hasOwnProperty("children")){for(var nn=0;nn<conn_org1.length;nn++){$("#"+conn_org1.get(nn).targetId).hide();jsPlumb.hide(conn_org1.get(nn).targetId,true);var oid_s=conn_org1.get(nn).targetId.split("_")[1];var conn_org_l2=jsPlumb.select({source:"instance_"+oid_s});for(var nnn1=0;nnn1<conn_org_l2.length;nnn1++){$("#"+conn_org_l2.get(nnn1).targetId).hide();jsPlumb.hide(conn_org_l2.get(nnn1).targetId,true);var oid_11=conn_org_l2.get(nnn1).targetId.split("_")[1];var conn_org_l11=jsPlumb.select({source:"instance_"+oid_11});for(var nnn2=0;nnn2<conn_org_l11.length;nnn2++){$("#"+conn_org_l11.get(nnn2).targetId).hide();}}}conn_org1.get(0).endpoints[0].setParameter("img","add");conn_org1.get(0).endpoints[0].setImage("images/add.png");conn_org1.setVisible(false);}}else{var company_department_orgnize_sec=company_department_arr[mm].children;for(var kkk=0;kkk<company_department_orgnize_sec.length;kkk++){if(company_department_orgnize_sec[kkk].hasOwnProperty("children")){jsPlumb.select({source:"instance_"+company_department_orgnize_sec[kkk].id}).setVisible(false); jsPlumb.select({source:"instance_"+company_department_orgnize_sec[kkk].id}).get(0).endpoints[0].setPa }}}}}else{endpoint.setParameter("img","add");endpoint.setImage("images/add.png");for(var k1=0;k1<endpoint.connections.length;k1++){endpoint.connections[k1].setVisible(false);$("#"+endpoint.connections[k1].targetId).hide();jsPlumb.hide(endpoint.connections[k1].targetId,true);var oidss=endpoint.connections[k1].targetId.split("_")[1];var conn_org_l2=jsPlumb.select({source:"instance_"+oidss});for(var nnn1=0;nnn1<conn_org_l2.length;nnn1++){$("#"+conn_org_l2.get(nnn1).targetId).hide();jsPlumb.hide(conn_org_l2.get(nnn1).targetId,true);var oid_11=conn_org_l2.get(nnn1).targetId.split("_")[1];var conn_org_l11=jsPlumb.select({source:"instance_"+oid_11});for(var nnn2=0;nnn2<conn_org_l11.length;nnn2++){$("#"+conn_org_l11.get(nnn2).targetId).hide();}}}}if (erAgent.indexOf('MSIE') > -1) {jsPlumb.repaintEverything();}});//添加科室拓扑关系，也就是连接部门到科室;for(var i2=0;i2<company_department_orgnize.length;i2++){var staff=company_department_orgnize[i2].children; //组织下⾯的个⼈jsPlumb.draggable("instance_"+company_department_orgnize[i2].id); //设置组织可拖拽var s4=jsPlumb.addEndpoint("instance_"+company_department_orgnize[i2].id,defaults); //设置组织的节点jsPlumb.connect({source:s3_root, target:s4}); //连接连接部门到组织company_department_sec_arr.push(company_department_orgnize[i2]);if(company_department_orgnize[i2].hasOwnProperty("children")){var s4_root=jsPlumb.addEndpoint("instance_"+company_department_orgnize[i2].id, {anchor:"Bottom"},rootnode); //把组织设置成根节点//绑定科室点击事件s4_root.bind("click", function(endpoint) {if(endpoint.getParameter("img")&&endpoint.getParameter("img")=="add"){endpoint.setParameter("img","sub");endpoint.setImage("images/sub.png");for(var k2=0;k2<endpoint.connections.length;k2++){endpoint.connections[k2].setVisible(true);$("#"+endpoint.connections[k2].targetId).show();}//隐藏其他科室下的⼈for(var mmm=0;mmm<company_department_sec_arr.length;mmm++){if(endpoint.elementId!="instance_"+company_department_sec_arr[mmm].id){var conn_org_2=jsPlumb.select({source:"instance_"+company_department_sec_arr[mmm].id});if(company_department_sec_arr[mmm].hasOwnProperty("children")){for(var nn1=0;nn1<conn_org_2.length;nn1++){$("#"+conn_org_2.get(nn1).targetId).hide();jsPlumb.hide(conn_org_2.get(nn1).targetId,true);//var oid=conn_org_2.get(nn1).targetId.split("_")[1];}conn_org_2.get(0).endpoints[0].setParameter("img","add");conn_org_2.get(0).endpoints[0].setImage("images/add.png");conn_org_2.setVisible(false);}}}}else{endpoint.setParameter("img","add");endpoint.setImage("images/add.png");for(var k2=0;k2<endpoint.connections.length;k2++){endpoint.connections[k2].setVisible(false);$("#"+endpoint.connections[k2].targetId).hide();jsPlumb.hide(endpoint.connections[k2].targetId,true);var oid=endpoint.connections[k2].targetId.split("_")[1];//$("div[id*=_"+oid+"_]").hide();}}if (erAgent.indexOf('MSIE') > -1) {jsPlumb.repaintEverything();}});for(var i3=0;i3<staff.length;i3++){//var staff=company_department_orgnize[i2].children; //组织下⾯的个⼈jsPlumb.draggable("instance_"+staff[i3].id); //设置组织可拖拽var s5=jsPlumb.addEndpoint("instance_"+staff[i3].id,defaults); //设置组织的节点jsPlumb.connect({source:s4_root, target:s5}); //连接连接部门到组织}}}}}}}s1.bind("click", function(endpoint) {if(endpoint.getParameter("img")&&endpoint.getParameter("img")=="add"){endpoint.setParameter("img","sub");endpoint.setImage("images/sub.png");jsPlumb.select({source:"top_server"}).setVisible(true);for(var i=0;i<company.length;i++){jsPlumb.show("instance_"+company[i].id,true);$("#instance_"+company[i].id).show();var company_department=company[i].children; //alert(company[i].id);if(company_department.length>0){jsPlumb.select({source:"instance_"+company[i].id}).setVisible(false);jsPlumb.select({source:"instance_"+company[i].id}).get(0).endpoints[0].setParameter("img","add"); jsPlumb.select({source:"instance_"+company[i].id}).get(0).endpoints[0].setImage("images/add.png"); }}}else{endpoint.setParameter("img","add");endpoint.setImage("images/add.png");jsPlumb.hide("top_server");for(var i=0;i<company.length;i++){var company_department=company[i].children;jsPlumb.hide("instance_"+company[i].id,true);for(var j=0;j<company_department.length;j++){jsPlumb.hide("instance_"+company_department[j].id,true);if(company_department[j].hasOwnProperty("children")){var orgnize=company_department[j].children;for(var j1=0;j1<orgnize.length;j1++){jsPlumb.hide("instance_"+orgnize[j1].id,true);}}}}$(".nodeWord").parent().hide();}if (erAgent.indexOf('MSIE') > -1) {jsPlumb.repaintEverything();}});$(window).resize(function(){jsPlumb.repaintEverything();});});}/** 元素摆放位置--对称分布*/function elementLocation(nodeArr,nodeNumber){if(nodeNumber%2==1){//总节点数是奇数//var num=parseInt(nodeNumber/2);for(var i=0;i<nodeArr.length;i++){if(i<parseInt(nodeNumber/2)){leftLoc=50-10*(i+1);}else if(i>parseInt(nodeNumber/2)){leftLoc=50+10*(i-parseInt(nodeNumber/2));}else{leftLoc=50;}if(nodeArr[i].hasOwnProperty("children")){var html="<div id='instance_"+nodeArr[i].id+"' class=\"instanceNode\" style='top:20%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+nodeArr[i].text+"</div></div>";$("body").append(html);var companyLoc=leftLoc; //在本例中表⽰公司横向定位，做这个是⽅便公司下⾯的部门定位；var companyDepartArr=nodeArr[i].children;var companyDepartArrLength=companyDepartArr.length;companyDepartLocation(companyLoc,companyDepartArr,companyDepartArrLength); //部门定位}else{var html="<div id='instance_"+nodeArr[i].id+"' class=\"instanceNode_leaf\" style='top:20%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+nodeArr[i].text+"</div></div>"; $("body").append(html);}}}else if(nodeNumber%2==0){//总节点数是偶数//var num=parseInt(nodeNumber/2);for(var i=0;i<nodeArr.length;i++){if(i+1<=parseInt(nodeNumber/2)){leftLoc=50-5-10*i;}else if(i+1>parseInt(nodeNumber/2)){leftLoc=50+5+10*(i-parseInt(nodeNumber/2));}if(nodeArr[i].hasOwnProperty("children")){var html="<div id='instance_"+nodeArr[i].id+"' class=\"instanceNode\" style='top:20%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+nodeArr[i].text+"</div></div>";$("body").append(html);var companyLoc = leftLoc;var companyDepartArr=nodeArr[i].children;var companyDepartArrLength=companyDepartArr.length;companyDepartLocation(companyLoc,companyDepartArr,companyDepartArrLength); //部门定位}else{var html="<div id='instance_"+nodeArr[i].id+"' class=\"instanceNode_leaf\" style='top:20%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+nodeArr[i].text+"</div></div>"; $("body").append(html);}}}}//部门定位function companyDepartLocation(nodeLoc,nodeArr,nodeNumber){if(nodeNumber%2==1){for(var j=0;j<nodeNumber;j++){var department=nodeArr[j],leftLoc;if(j<parseInt(nodeNumber/2)){leftLoc=nodeLoc-5*(j+1);}else if(j>parseInt(nodeNumber/2)){leftLoc=nodeLoc+5*j;}else{leftLoc=nodeLoc;}if(department.hasOwnProperty("children")){var html="<div id='instance_"+department.id+"' class='instanceNode' style='top:40%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+department.text+"</div></div>";$("body").append(html);var departmentOrgnize=department.children;var departmentOrgnizeLength=departmentOrgnize.length;var departmentOrgnizeLoc=leftLoc;departmentOrgnizeLocation(departmentOrgnizeLoc,departmentOrgnize,departmentOrgnizeLength); //组织定位}else{var html="<div id='instance_"+department.id+"' class='instanceNode_leaf' style='top:40%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+department.text+"</div></div>"; $("body").append(html);}}}else if(nodeNumber%2==0){for(var j=0;j<nodeNumber;j++){var department=nodeArr[j],leftLoc;if(j+1<=parseInt(nodeNumber/2)){leftLoc=nodeLoc-5-5*j;}else if(j+1>parseInt(nodeNumber/2)){leftLoc=nodeLoc+5+5*(j-parseInt(nodeNumber/2));if(department.hasOwnProperty("children")){var html="<div id='instance_"+department.id+"' class='instanceNode' style='top:40%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+department.text+"</div></div>";$("body").append(html);var departmentOrgnize=department.children;var departmentOrgnizeLength=departmentOrgnize.length;var departmentOrgnizeLoc=leftLoc;departmentOrgnizeLocation(departmentOrgnizeLoc,departmentOrgnize,departmentOrgnizeLength); //组织定位}else{var html="<div id='instance_"+department.id+"' class='instanceNode_leaf' style='top:40%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+department.text+"</div></div>"; $("body").append(html);}}}}//组织定位function departmentOrgnizeLocation(nodeLoc,nodeArr,nodeNumber){if(nodeNumber%2==1){for(var j=0;j<nodeNumber;j++){var orgnize=nodeArr[j],leftLoc;if(j<parseInt(nodeNumber/2)){leftLoc=nodeLoc-5*(j+1);}else if(j>parseInt(nodeNumber/2)){leftLoc=nodeLoc+5*(j-parseInt(nodeNumber/2));}else{leftLoc=nodeLoc;}if(orgnize.hasOwnProperty("children")){var html="<div id='instance_"+orgnize.id+"' class='instanceNode' style='top:60%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+orgnize.text+"</div></div>";$("body").append(html);var staffArr=orgnize.children;var staffLength=staffArr.length;var staffLoc=leftLoc;staffLocation(staffLoc,staffArr,staffLength); //员⼯定位}else{var html="<div id='instance_"+orgnize.id+"' class='instanceNode_leaf' style='top:60%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+orgnize.text+"</div></div>";$("body").append(html);}}}else if(nodeNumber%2==0){for(var j=0;j<nodeNumber;j++){var orgnize=nodeArr[j],leftLoc;if(j+1<=parseInt(nodeNumber/2)){leftLoc=nodeLoc-5-5*j;}else if(j+1>parseInt(nodeNumber/2)){leftLoc=nodeLoc+5+5*(j-parseInt(nodeNumber/2));}if(orgnize.hasOwnProperty("children")){var html="<div id='instance_"+orgnize.id+"' class='instanceNode' style='top:60%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+orgnize.text+"</div></div>";$("body").append(html);var staffArr=orgnize.children;var staffLength=staffArr.length;var staffLoc=leftLoc;staffLocation(staffLoc,staffArr,staffLength); //员⼯定位}else{var html="<div id='instance_"+orgnize.id+"' class='instanceNode_leaf' style='top:60%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+orgnize.text+"</div></div>";$("body").append(html);}}}}//员⼯定位function staffLocation(nodeLoc,nodeArr,nodeNumber){if(nodeNumber%2==1){for(var j=0;j<nodeNumber;j++){var staff=nodeArr[j],leftLoc;if(j<parseInt(nodeNumber/2)){leftLoc=nodeLoc-5*(j+1);}else if(j>parseInt(nodeNumber/2)){leftLoc=nodeLoc+5*(j-parseInt(nodeNumber/2));}else{leftLoc=nodeLoc;。
详解js中构造流程图的核心技术JsPlumb
详解js中构造流程图的核⼼技术JsPlumb项⽬⾥⾯⽤到了Web⾥⾯的拖拽流程图的技术JsPlumb，其实真不算难，不过项⽬⾥⾯⽤HTML做的⼀些类似flash的效果，感觉还不错，在此分享下。
⼀、效果图展⽰1、从左边拖动元素到中间区域，然后连线2、连线类型可以⾃定义：这⾥定义为直线、折线、曲线。
实际项⽬中根据业务我们定义为分装线、分装⽀线、总装线等3、⿏标拖动区域选中元素，并且选中元素统⼀拖动位置。
4、对选中的元素左对齐。
5、对选中元素居中对齐6、右对齐7、上对齐8、垂直居中对齐9、下对齐10、根据第⼀个选中的元素上下靠拢11、根据第⼀个选中的元素左右靠拢12、根据第⼀个选中的元素同⾼13、根据第⼀个选中的元素同宽14、选中元素顺时针旋转，点击⼀次旋转45度15、选中元素逆时针旋转。
16、选中统⼀删除元素以及元素上⾯的连线这⾥很多效果其实在项⽬中作⽤并不太⼤，很多单纯就是为了展⽰⽤的。
⼆、代码详解这⾥涉及的效果⽐较多，可能要分多篇来介绍。
这篇还是来看看构造流程图的核⼼技术：JsPlumb。
1、概述关于JsPlumb的内容，在此就简单说明下吧。
jsPlumb是⼀个强⼤的JavaScript连线库，它可以将html中的元素⽤箭头、曲线、直线等连接起来，适⽤于开发Web上的图表、建模⼯具等。
它同时⽀持jQuery+jQuery UI、MooTools和YUI3这三个JavaScript框架，⼗分强⼤。
本项⽬中还是结合⼤家最熟悉的JQuery来讲解。
并且还要注意的⼀点就是JsPlumb的浏览器兼容性，JsPlumb⽀持IE 6以上、⽕狐、⾕歌等各种浏览器2、使⽤（1）引⼊JS⽂件可以直接去官⽹上⾯下载最新的js库，由于JsPlumb需要JQuery的⽀持，按照⽹上的说法，它只兼容jQuery1.3.x及以上版本，并在jQuery UI 1.7.x、1.8.x及1.9.x上测试通过。
所以我们需要下载较⾼⼀点版本的JQuery和JQuery UI。
js bignumber用法
JS BigNumber用法一、什么是JS BigNumberJavaScript是一种弱类型语言，对于大整数或大浮点数的计算并不是很友好。
在某些情况下，我们需要处理超出了JavaScript Number类型所能表示的数字。
这个时候，我们需要使用JS BigNumber。
1.1 JS BigNumber概述JS BigNumber是一个专门用于处理大数字的JavaScript库。
它允许我们处理处理任意大小的数字，而不用担心溢出问题。
JS BigNumber 库提供了丰富的方法和函数，可以方便地进行大数字的运算。
1.2 JS BigNumber的特点- 支持任意精度的整数和浮点数- 提供了丰富的数学函数- 能够处理大数运算的溢出问题二、JS BigNumber的安装和引入要使用JS BigNumber，我们首先需要安装它，并将其引入到我们的项目中。
2.1 安装JS BigNumber我们可以使用npm或者yarn来安装JS BigNumber。
在命令行中执行以下命令即可完成安装：```npm install bignumber.js```或者```yarn add bignumber.js```2.2 引入JS BigNumber在我们的JavaScript文件中，通过import或者require语句将JS BigNumber引入进来：```javascriptimport BigNumber from 'bignumber.js';```或者```javascriptconst BigNumber = require('bignumber.js');```三、JS BigNumber的基本用法JS BigNumber提供了丰富的API来处理大数字的运算。
下面是一些常见的用法举例：3.1 创建一个BigNumber实例我们可以使用BigNumber构造函数来创建一个BigNumber实例，表示一个大数字：```javascriptconst num1 = new BigNumber(xxx);const num2 = new BigNumber('xxx');```3.2 进行基本运算我们可以对两个BigNumber实例进行加、减、乘、除等基本运算：```javascriptconst sum = num1.plus(num2);const difference = num1.minus(num2);const product = num1.times(num2);const quotient = num1.dividedBy(num2);```3.3 使用数学函数JS BigNumber还提供了许多数学函数，例如平方根、对数、指数等，可以对BigNumber实例进行操作：```javascriptconst sqrt = num1.squareRoot();const log = num1.log();const exp = num1.pow(2);```3.4 格式化输出通过调用toFormat方法，我们可以格式化BigNumber实例的输出：```javascriptconsole.log(num1.toFormat(2)); // 输出：'12,345,678,901,234,567,890.00'```四、JS BigNumber的高级用法除了常见的基本运算和数学函数外，JS BigNumber还提供了一些高级用法，满足我们更复杂的需求。
jsPlumb.jsAPI阅读笔记（官方文档翻译）
jsPlumb.jsAPI阅读笔记（官⽅⽂档翻译）jsPlumb DOCS公司要开始做流程控制器，所以先调研下jsPlumb，下⽂是阅读jsPlumb提供的document所产⽣的归纳总结setup如果不使⽤jQuery或者类jQuery库，则传⼊的节点得⽤id的形式,否则jsPlumb会为元素设置⼀个id。
jsPlumb.ready(function(){···});//orjsPlumb.bind("ready",function(){···});最好确认jsPlumb加载完毕之后，再开始使⽤相关功能。
默认情况下，jsPlumb在浏览器的窗⼝中注册，为整个页⾯提供⼀个静态实例，所以也可以把它看成⼀个类，来实例化jsPlumb：var firstInstance = jsPlumb.getInstance();如果在使⽤过程中，元素的id产⽣了新的变化（多是⽣成了新的节点，旧的节点被删除了）。
则可以：jsPlumb.setId(el,newId)jsPlumb.setIdChanged(oldId,newId)在使⽤过程中，每个部分的z-index需要注意，否则连线可能会被覆盖，jsPlumb会为每个节点设置端点，⽤于定位端点。
jsPlumb也提供了拖动⽅法：var secondInstance = jsPlumb.getInstance();secondInstance.draggable("some element");重绘，每次使⽤连线时，都会导致相关联的元素重绘，但当加载⼤量数据时，可以使⽤：jsPlumb.setSuspendDrawing(true);jsPlumb.setSuspendDrawing(false,true);这⾥第⼆个参数的true，会使整个jsPlumb⽴即重绘。
jsPlumb文档翻译
工具箱版:这个版本包装社区关注基本的数据模型,以及一些有用的 UI 布局等特性,和一个小部件提 供平移/缩放功能。
它提供了一个快速的方式构建应用程序与视觉连接的核心。
工具箱版本有一个商业,按照许可与可选的访问源代码和电子邮件的支持(加上每年更新新的发布版本)。
这里有一些许可 条款。
HomeHOME 主页： jsPlumb Toolkit(工具包）jsPlumb 工具包是一个包装的开源 jsPlumb 库提供了一些关键部分的功能:1 通过客户端数据绑定模板,支持声明式配置的连接2 一个潜在的有向图,允许您在几个方面查询数据。
3 平移/缩放小部件能够序列化状态(手动或自动)本地存储或 cookies。
4 一个小地图部件协助大型数据集的导航。
5 自动布局(分层,spring,圆形,绝对),加上自己编写的能力。
6 一个强有力的声明性机制来定义的外观和行为的各个部分你的 UI。
7 数据加载/保存自动或点播。
8 工具箱版本的 jsPlumb 社区作为一个依赖。
当前版本的工具包是 1.0.21,所需的最低版本的 jsPlumb2.1.0.。
1.Getting Started（入门指南）最好的地方开始自己受益匪浅的架构工具包是阅读文档的一个示例应用程序,数据库可视化工具或流程图设计师。
然后,与你的 许可的副本工具包,您可以使用繁重的其中一个应用程序创建一个克隆,并开始削减。
如果你宁愿从一个基本的框架，您还可以使用 Grunt 创建一个空的应用程序 （use Grunt to create an empty application） 或者,您可能想从文档开始。
数据模型和基本概念页面开始环顾四周是最好的地方。
简而言之,该工具包使用一个有向图作为其 核心的数据结构。
每个应用程序都需要 jsPlumb——也就是说需要能够连接实体——可以认为的指示或无向图。
2.jsPlumb Community Edition（社区版）工具箱版本是 Community edition 包装,而最直接的交互的 Community edition jsPlumb 抽象,与 UI 外观相关的设置一般管道直 通到底层 Community edition 用于呈现内容。
jsPlumb初识,从入门到会
• Arrow 一个可配置的箭头 • Label 标签，可以在链接上显示文字信息 • PlainArrow 原始类型的箭头 • Diamond 菱形箭头 • Custom 自定义类型
overlays: [ ['Arrow', { width: 12, length: 12, location: 0.5 }] ]
jsPlumb文档
形象化连接页面元素的工具
开源的流程图或拓扑图绘制工具库
课程导航
——jsplumb
o Vue.js
什么是jsPlumb
什么是jsPlumb
项目主要由Simon Porritt开发 从jsPlumb github网站下载框架
jsPlumb能做什么
绘制图表的Web应用程序 类似于Visio的应用程序或工作流程设计器 可以绘制您可以想到的任何类型的图表的
jsPlumb.connect({ source: 'item_left', target: 'item_right', endpoint: 'Dot'
})
基本概念
锚(Anchor)
• 锚(Anchors)
• 9个默认的锚点位置 • [X,Y,DX,DY],其中X,Y是在区间[0,1]指定锚的位置DX和DY是在区间[-1,1]指定曲线的事件锚的方向坐标 • 例如[0，0.5，-1，0]定义了一个“LeftCenter”连接器的曲线，从锚点单向向左的曲线. • 同样，[0.5，0，0，-1]，定义一个“CenterTop”锚连接器所产生的向上的曲线。
参数
说明
Anchor
锚点，即端点链接的位置
jsPlumb的简单使用
jsPlumb的简单使⽤1. jsPlumb概述jsPlumb是⼀个在dom元素之间绘制连接线的javascript框架，它使⽤svg技术绘制连接线。
2. 基本概念很明显，⼀个连线主要要解决的问题包括谁和谁连，在哪⾥连(连接点在哪⾥)，连接点长啥样，如何画线等问题1：Anchor，锚点，它是⼀个逻辑概念，解决连线的连接点位置问题。
2：Endpoint，端点，它是⼀个可视化的点，解决连接点长啥样的问题3：Connector，连线，解决如何画线的问题4：Overlay，覆盖物，它主要为连接添加⼀些装饰物，不如标签⽂本，连接点的箭头。
Anchor：锚点的定义⽅式主要有下⾯⼏种1：⽤数组来定义[x位置，y位置，x⽅向，y⽅向][x位置，y位置，x⽅向，y⽅向，x像素偏移，y像素偏移]位置的值在0~1之间⽅向的值为0,1,-19个静态的值为：Top TopRightRight BottomRightBottom BottomLeftLeft TopLeftCenterAutoDefault 包括Top, Right, Bottom, Left需要注意的是，坐标使⽤第四象限的坐标⼀个常⽤的组合是：var defaultAnchors = ["Top", "Right", "Bottom", "Left", [0.25, 0, 0, -1], [0.75, 0, 0, -1], [0.25, 1, 0, 1], [0.75, 1, 0, 1] , [0, 0.25, 0, -1], [0, 0.75, 0, -1], [1, 0.25, 0, 1], [1, 0.75, 0, 1]];2：⼏何图形的周边Circle Ellipse Triangle Diamond Rectangle Squareanchor:[{ shape:"Triangle", anchorCount:150, rotation:25 } ]3：连续anchor:["Continuous", { faces:[ "top", "left" ] } ]Endpoint：jsPlumb提供了四种类型的端点，Dot,Rectangle,Blank，使⽤失败了。
jsPlumb更种示例说明
jsPlumb更种⽰例说明PERIMETER ANCHORS这些是锚，跟踪⼀些形状的周长。
HIERARCHICAL CHART(分层信息⽰范)这是⼀个简单的使⽤jsplumb显⽰分层信息⽰范。
连接器有⼀个paintstyle的`灰⾊`和指定半径9端点。
每个连接都有⼀个箭头指⽰的⽅向和覆盖，涂料本⾝的橙⾊在⿏标悬停。
Bezier曲线的使⽤在本演⽰中有⼀个“后天”50SOURCES AND TARGETS(源和⽬标)将连接从蓝⾊元素的任何绿⾊的。
你也可以将现有的连接从⼀个绿⾊元素到另⼀个连接，默认情况下，可拆卸（这种⾏为可以被重写）。
该makesource和maketargetfunctions提供设置你的UI⽀持拖动连接-⼀个替代⼿段，这⾥我们将整个元素的源和⽬标，只有建⽴连接时，我们为他们指定的端点。
蓝⾊的元件被配置为连接源（⽽不是拖动），⼀个可能的锚的位置。
该`禁⽤`链接是排除被拖动源的`滤波器`参数对makesource调⽤使⽤。
绿⾊元素被配置为连接的⽬标，⼀个`顶`锚，并拖动DYNAMIC ANCHORS(锚变化的位置)这是⼀个演⽰锚变化的位置在⼀个连接上的其他元素的位置依赖。
每个连接都装饰有⼀个钻⽯覆盖，中途沿连接器。
你可以拖动端点之间的新联系。
⽀持⽆限数量的连接端点。
ANIMATION这是⼀个演⽰jsplumb的动画的⽅法。
拖橙⾊圆点来创建连接。
点击或附近的蓝点让他们往那个⽅向。
添加⼀个盘移除所有连接KITCHEN SINKjsplumb提供⼀种⽅式连接在⼀个UI元素。
该页包含你可以连接各种类型的例⼦。
还有⼀些其他的⽰威活动，提供⼀个更关注的jsplumb的功能——⼀些特定的部分选择⼀个从下拉或循环下/上。
jsplumb需要⼀个jQuery，MooTools或者YUI3。
为⼀个更详细的讨论见⽂件要求。
FLOWCHART节点连接图连接器。
将⿏标悬停在连接来突出他们，点击删除。
拖到新的连接点从空⼼实⼼点。
利用jsplumb和碰撞检测自动生成流程图
利⽤jsplumb和碰撞检测⾃动⽣成流程图使⽤jsplumb构建流程图模型时，有⼀个需求要求，选项可以从选项表中拖拽到指定容器，并且两个选项要接触到的时候才能连接起来，不接触不能连接。
效果图如下略丑～因为这⾥⽤到了拖拽，拖放功能，所以⽤到的有jquery，jquery-ui，jsplumb，考虑到兼容ie8，⽤到的是jsplumb-1.7.10版本。
⾸先简单的布局<style>html,body {height:100%;padding:0;margin:0;}#container{width:200px;height:500px;background:#eee;float:left;}#container .node {width:50px;height:50px;border:1px solid #000;margin-top:20px;margin-left:20px;z-index:999;}#wrapper {width:500px;height:500px;margin-left:200px;border:1px solid #5182E4;background:#ddd;position:relative;}</style><div id="container"><div class="node" id="Node1">1</div><div class="node" id="Node2">2</div><div class="node" id="Node3">3</div></div><div id="wrapper"></div>接下来就是功能实现,第⼀步拖拽$('#container .node').draggable({helper:'clone',revert: 'invalid',//放置不到位⾃动恢复原位stop:function(event,ui){//准备碰撞检测所需要的条件var r1 = ui.offset.left+ui.helper.context.offsetWidth;var l1 = ui.offset.left;var b1 = ui.offset.top+ui.helper.context.offsetHeight;var t1 = ui.offset.top;var L = $('#wrapper')[0].offsetLeft;var T = $('#wrapper')[0].offsetTop;var id= ui.helper.context.id;var len = $('#wrapper').children('.node').length;var uid = 'dragNode'+len;var arr=[];$('#wrapper').children('.node').each(function(){var json={};json.id = $(this).context.id;json.left = $(this).context.offsetLeft+L;json.right = $(this).context.offsetLeft+L+$(this)[0].offsetWidth;json.top = $(this).context.offsetTop+T;json.bottom = $(this).context.offsetTop+T+$(this)[0].offsetHeight;arr.push(json);});//jsplumb 设置样式var common = {anchors:['Left','Right'],endpoint:['Dot',{radius:2}],paintStyle:{strokeStyle:'#1e8151',fillStyle:'transparent',radius:2,lineWidth:2,}};for(var i=0;i<arr.length;i++){if(arr[i].id!=uid){var id3= arr[i].id;//碰撞检测if(r1<arr[i].left||b1<arr[i].top||l1>arr[i].right||t1>arr[i].bottom){$('#'+id3).css('background','red')console.log(2);}else {$('#'+id3).css('background','green');//碰撞后，连接到⼀起jsPlumb.connect({source:uid,target:arr[i].id,scope:'',connector:['Straight',{stub:[10,10],gap:0}],overlays:[['Arrow',{width:10,height:10,location:0.9}],['Label',{label:'hello',location:0.5}]]},common);var lef = ui.offset.left+50;//jsPlumb 动画，选项连接后⾃动分离开⼀段距离jsPlumb.animate(uid,{left:lef},{duration:350,easing:'easeOutBack'});}}}}});选项可以拖拽后，还要有放置的地⼉，当然draggable⾥也可以，这⾥使⽤droppable; $('#wrapper').droppable({drop:function(event,ui){var leng = $('#wrapper').children('.node').length+1;var arr=[];var id = "dragNode"+leng;var id2 = ui.draggable[0].id;var left = parseInt(ui.offset.left-$(this).offset().left);var top = parseInt(ui.offset.top-$(this).offset().top);var width = ui.draggable[0].clientWidth;var height = ui.draggable[0].clientHeight;var len = $(this).children('.node').length;//判断容器内拖拽的是否重复if(!len){$(this).append($('<div style="position:absolute;" class="node" id="'+id+'">'+$(ui.helper).html()+'</div>'));$('#'+id).css('left',left).css('top',top);$('#'+id).css('width',width).css('height',height);$('#'+id).css('border','1px solid #000');}else {$(this).children('.node').each(function(){// console.log($(this).html());arr.push($(this).html());});if(arr.indexOf($(ui.helper).html())>-1){alert('已存在！');return;}else {$(this).append($('<div style="position:absolute;" class="node" id="'+id+'">'+$(ui.helper).html()+'</div>')); $('#'+id).css('left',left).css('top',top);$('#'+id).css('width',width).css('height',height);$('#'+id).css('border','1px solid #000');}}arr.push(id2);//限制容器内选项的拖拽范围jsPlumb.draggable(id,{containment:'parent'});//var connectorPaintStyle={lineWidth:4,strokeStyle:'#61B7CF',joinstyle:'round',};var connectorHoverStyle = {lineWidth:4,strokeStyle:'#216477',};var defaults = {endpoint:['Dot',{radius:2}],connectorStyle:connectorPaintStyle,connectorHoverStyle:connectorHoverStyle,paintStyle:{strokeStyle:'#1e8151',fillStyle:'transparent',radius:2,lineWidth:2,},isSource:true,connector:['Flowchart',{stub:[40,60],gap:5,cornerRadius:5,alwaysRespectStubs:true}],isTarget:true,maxConnections:-1,connectorOverlays:[['Arrow',{width:10,length:10,location:1}],['Label',{label:'yes',width:10,height:10}]]};//在添加连接点jsPlumb.addEndpoint(id,{anchors:'TopCenter'},defaults);jsPlumb.addEndpoint(id,{anchors:'BottomCenter'},defaults);jsPlumb.addEndpoint(id,{anchors:'RightMiddle'},defaults);jsPlumb.addEndpoint(id,{anchors:'LeftMiddle'},defaults);}});利⽤jsplumb与碰撞检测，⾃动⽣成流程图的过程基本就这样了。
vue+jsplumb实现连线绘图
vue+jsplumb实现连线绘图vue+jsplumb实现连线绘图，供⼤家参考，具体内容如下jsPlumb是⼀个⽐较强⼤的绘图组件，它提供了⼀种⽅法，主要⽤于连接⽹页上的元素。
在现代浏览器中，它使⽤SVG或者Canvas技术，⽽对于IE8以下(含IE8)的浏览器，则使⽤VML技术。
效果图1.安装npm install jsplumb --save2.main.js 引⼊import jsPlumb from 'jsplumb'Vue.prototype.$jsPlumb = jsPlumb.jsPlumb3.⽰例代码<template><div><div id="container"><div class="left"><ul><li v-for="(item,index) in leftList" :key="'left' + index" :id="item.nodeId" name="source">{{}}</li></ul></div><div class="right"><ul><li v-for="(item,index) in rightList" :key="'right' + index" :id="item.nodeId" name="target">{{}}</li></ul></div></div></div></template><script>export default {name: "linkElementModal",data() {return {jsPlumb: null, // 缓存实例化的jsplumb对象leftList:[{name: 'xxx_left_1', nodeId: 'left_1'},{name: 'xxx_left_2', nodeId: 'left_2'},{name: 'xxx_left_3', nodeId: 'left_3'},{name: 'xxx_left_4', nodeId: 'left_4'}],rightList:[{name: 'xxx_right_1', nodeId: 'right_1'},{name: 'xxx_right_2', nodeId: 'right_2'},{name: 'xxx_right_3', nodeId: 'right_3'},{name: 'xxx_right_4', nodeId: 'right_4'}]}},mounted(){this.showPlumb();},methods:{showPlumb() {this.jsPlumb = this.$jsPlumb.getInstance({Container: 'container', // 选择器idEndpointStyle: {radius: 0.11, fill: '#999'}, // 端点样式PaintStyle: {stroke: '#999', strokeWidth: 2}, // 绘画样式，默认8px线宽 #456HoverPaintStyle: {stroke: '#994B0A', strokeWidth: 3 }, // 默认悬停样式默认为nullConnectionOverlays: [ // 此处可以设置所有箭头的样式['Arrow', { // 设置参数可以参考中⽂⽂档location: 1,length: 12,paintStyle: {stroke: '#999',fill: '#999'}}]],Connector: ['Straight'], // 要使⽤的默认连接器的类型：直线，折线，曲线等 DrapOptions: {cursor: 'crosshair', zIndex: 2000}});this.jsPlumb.batch(() => {for(let i = 0; i < this.leftList.length; i++){this.initLeaf(this.leftList[i].nodeId, 'source');}for(let j = 0; j < this.rightList.length; j++){this.initLeaf(this.rightList[j].nodeId , 'target')}})this.setjsPlumb(true,true);//点击连线this.jsPlumb.bind('click', (conn, originalEvent) => {console.log(conn, originalEvent)})//连线时触发this.jsPlumb.bind('connection', (conn, originalEvent) => {console.log(conn.sourceId)console.log(conn.targetId)})//右键触发this.jsPlumb.bind('contextmenu', (conn, originalEvent) => {console.log(conn, originalEvent)})},// 初始化规则使其可以连线、拖拽initLeaf(id, type) {const ins = this.jsPlumb;const elem = document.getElementById(id);if (type === 'source') {ins.makeSource(elem, {anchor: [1, 0.5, 0, 0], // 左上右下allowLoopback: false, //允许回连maxConnections: -1 //最⼤连接数（-1表⽰不限制）})} else {ins.makeTarget(elem, {anchor: [0, 0.5, 0, 0],allowLoopback: false,maxConnections: -1})}},setjsPlumb(sourceFlag, targetFlag){const source = document.getElementsByName('source')const target = document.getElementsByName('target')this.jsPlumb.setSourceEnabled(source, sourceFlag)this.jsPlumb.setTargetEnabled(target, targetFlag)this.jsPlumb.setDraggable(source, false) // 是否⽀持拖拽this.jsPlumb.setDraggable(target, false) // 是否⽀持拖拽},}}</script><style>#container{width: 500px;height: 500px;padding: 20px;position: relative; /*⼀定加上这句，否则连线位置发⽣错乱*/}.left{float: left;width: 150px;}.right{float: right;width: 150px;}.left li,.right li{width: 100%;border-radius: 4px;border: 1px solid #ccc;background: #efefef;margin-bottom: 20px;padding: 8px 5px;}</style>以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
基于jsplumb绘制流程图
基于jsplumb绘制流程图效果图需要⽤到以下四个⽂件包jQuery.jsjquery-ui.min.cssjquery-ui.min.jsjquery.jsPlumb-1.6.2-min.js<script src="js/jquery-ui-1.11.4.custom/external/jquery/jquery.js" type="text/javascript"></script><link rel="stylesheet" href="js/jquery-ui-1.11.4.custom/jquery-ui.min.css"><script src="js/jquery-ui-1.11.4.custom/jquery-ui.min.js" type="text/javascript"></script><script src="js/jquery.jsPlumb-1.6.2-min.js"></script>css样式代码<style>body{text-align: center;}#root{width:100%;height:100vh;display: flex;justify-content: space-between;}#left{width:243px;height:50vh;padding:32px;border:2px solid darkgray;box-sizing: border-box;display: flex;flex-flow: column;justify-content: space-between;}.node {box-shadow: 2px 2px 19px #aaa;border-radius:6px;opacity: 0.8;filter: alpha(opacity=80);border: 1px solid #346789;width: 150px;text-align: center;z-index: 20;background-color: #eeeeef;color: black;padding: 10px;font-size: 9pt;cursor: pointer;height: 50px;/*line-height: 50px;*/background: lightskyblue;}.node:hover {box-shadow: 2px 2px 19px #444;opacity: 0.8;filter: alpha(opacity=80);}.node2css{background:orange;}.node3css{background: indianred;}.node4css{background: greenyellow;}#right{width:calc(100% - 260px);height:100vh;border:2px solid olivedrab;box-sizing: border-box;}.content{border-top: 1px solid darkgrey;}#myDropDown{width:80px;height:30px;border:2px solid blue;}#main{width:100%;height:calc(100% - 75px);border:1px solid red;}</style>HTML页⾯代码<div id="root"><div id="left"><div class="node" id="node1">流程1</div><div class="node node2css" id="node2">流程2</div><div class="node node3css" id="node3">流程3</div><div class="node node4css" id="node4">流程4</div></div><div id="right"><h2>下⽅区域绘制流程图</h2><div class="content" id="main"></div></div></div>js⾏为代码<script>//设置左侧为可复制的$("#left").children().draggable({helper: "clone",scope: "zlg",});//设置右侧为拖拽存放区var i=0;$("#main").droppable({scope:"zlg",drop:function (event , ui) {var left = parseInt(ui.offset.left - $(this).offset().left)+268.78;var top = parseInt(ui.offset.top - $(this).offset().top)+81;var name = ui.draggable[0].id;switch (name) {case "node1":i++;var id = "state_start" + i;$(this).append('<div class="node" style="position: absolute" id="' + id + '" >' + $(ui.helper).html() + '</div>');$("#" + id).css("left", left).css("top", top);jsPlumb.addEndpoint(id, { anchors: "TopCenter" }, hollowCircle);jsPlumb.addEndpoint(id, { anchors: "RightMiddle" }, hollowCircle);jsPlumb.addEndpoint(id, { anchors: "BottomCenter" }, hollowCircle);jsPlumb.addEndpoint(id, { anchors: "LeftMiddle" }, hollowCircle);jsPlumb.draggable(id);$("#" + id).draggable({ containment: "parent" });doubleclick("#" + id);break;case "node2":i++;id = "state_flow" + i;$(this).append("<div class='node node2css' style='position: absolute' id='" + id + "'>" + $(ui.helper).html() + "</div>"); $("#" + id).css("left", left).css("top", top);jsPlumb.addEndpoint(id, { anchors: "TopCenter" }, hollowCircle);jsPlumb.addEndpoint(id, { anchors: "RightMiddle" }, hollowCircle);jsPlumb.addEndpoint(id, { anchors: "BottomCenter" }, hollowCircle);jsPlumb.addEndpoint(id, { anchors: "LeftMiddle" }, hollowCircle);jsPlumb.addEndpoint(id, hollowCircle);jsPlumb.draggable(id);$("#" + id).draggable({ containment: "parent" });doubleclick("#" + id);break;case "node3":i++;id = "state_decide" + i;$(this).append("<div class='node node3css' style='position: absolute' id='" + id + "'>" + $(ui.helper).html() + "</div>"); $("#" + id).css("left", left).css("top", top);jsPlumb.addEndpoint(id, { anchors: "TopCenter" }, hollowCircle);jsPlumb.addEndpoint(id, { anchors: "RightMiddle" }, hollowCircle);jsPlumb.addEndpoint(id, { anchors: "BottomCenter" }, hollowCircle);jsPlumb.addEndpoint(id, { anchors: "LeftMiddle" }, hollowCircle);jsPlumb.addEndpoint(id, hollowCircle);jsPlumb.draggable(id);$("#" + id).draggable({ containment: "parent" });doubleclick("#" + id);break;case "node4":i++;id = "state_end" + i;$(this).append('<div class="node node4css" style=\'position: absolute\' id="' + id + '" >' + $(ui.helper).html() + '</div>'); $("#" + id).css("left", left).css("top", top);jsPlumb.addEndpoint(id, { anchors: "TopCenter" }, hollowCircle);jsPlumb.addEndpoint(id, { anchors: "RightMiddle" }, hollowCircle);jsPlumb.addEndpoint(id, { anchors: "BottomCenter" }, hollowCircle);jsPlumb.addEndpoint(id, { anchors: "LeftMiddle" }, hollowCircle);jsPlumb.draggable(id);$("#" + id).draggable({ containment: "parent" });doubleclick("#" + id);break;}}});//基本连接线样式var connectorPaintStyle = {lineWidth: 4,strokeStyle: "#61B7CF",joinstyle: "round",outlineColor: "white",outlineWidth: 2};// ⿏标悬浮在连接线上的样式var connectorHoverStyle = {lineWidth: 4,strokeStyle: "green",outlineWidth: 2,outlineColor: "white"};//端点的颜⾊样式var paintStyle = {strokeStyle: "#1e8151",fillStyle: "transparent",radius: 3,lineWidth:6 ,}// ⿏标悬浮在端点上的样式var hoverPaintStyle = {outlineStroke: 'lightblue'}//设置连接端点和连接线var hollowCircle = {endpoint: ["Dot", { radius: 8 }], //端点的形状connectorStyle: connectorPaintStyle,connectorHoverStyle: connectorHoverStyle,paintStyle: paintStyle,hoverPaintStyle: hoverPaintStyle ,isSource: true, //是否可以拖动（作为连线起点）connector: ["Flowchart", { stub: [40, 60], gap: 10, cornerRadius: 5, alwaysRespectStubs: true }], //连接线的样式种类有[Bezier],[Flowchart],[StateMachine ],[Straight ] isTarget: true, //是否可以放置（连线终点）maxConnections: -1, // 设置连接点最多可以连接⼏条线connectorOverlays:[ "Arrow",["Custom", {create:function(component) {return $("<select id='myDropDown'>" +"<option value='one'>暂未审理</option>" +"<option value='two'>通过</option>" +"<option value='three'>驳回</option>" +"</select>");},location:0.7,id:"customOverlay",}]]};//⿏标进⼊增加⼀个删除的⼩图标$("#main").on("mouseenter", ".node", function () {$(this).append('<img src="images/close2.png" style="position: absolute;" />');var widthnum = $(this).css("width").substr(0,5);if (widthnum < 60) {$("img").css("left", 67).css("top", -13);} else {$("img").css("left", 167).css("top", -12);}});//⿏标离开⼩图标消失$("#main").on("mouseleave", ".node", function () {$("img").remove();});//节点⼩图标的单击事件$("#main").on("click", "img",function () {if (confirm("确定要删除此节点吗?")) {jsPlumb.removeAllEndpoints($(this).parent().attr("id"));$(this).parent().remove();}});//连接线的双击事件jsPlumb.bind("dblclick", function (conn, originalEvent) {if (confirm("确定删除此连线吗？"))jsPlumb.detach(conn);});//双击节点内容区域时的事件function doubleclick(id) {$(id).dblclick(function () {var text = $(this).text();$(this).html("");$(this).append("<input style='width: 130px' type='text' value='" + text + "' />");$(this).mouseleave(function () {$(this).html($("input[type='text']").val());});});}</script>。
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上基于MooT ools使用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 plaincopy1.<script type="text/javascript" src="/ajax/libs/jquery/1.8.1/jquery.min.js"></script>2.<script type="text/javascript" src="/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>3.<script type="text/javascript" src="PATH_TO/jquery.jsPlumb-1.4.0-all-min.js"></script>初始化jsPlumb只有等到DOM初始化完成之后才能使用，因此我们在以下代码中调用jsPlumb方法[javascript]view plaincopy1.jsPlumb.ready(function() {2....3.// some code4....5.});首先，我们给jsPlumb设一些默认值，然后声明一个exampleDropOptions变量。
JavascriptSymbol原理及使用方法解析
JavascriptSymbol原理及使⽤⽅法解析Symbol是ES6中新引⼊的⼀种基本数据类型，在此之前JavaScript中已有⼏种基本数据类型：NumbergStringBooleanNullUndefinedObject不同于其他基本类型的通俗易懂，Symbol 是什么和有什么⽤⼀直有些让⼈困惑。
什么是SymbolJavaScript标准中规定对象的key只能是 String 或 Symbol 类型，区别在于 String 类型的key可以重复⽽ Symbol 类型的key是唯⼀的。
Symbol 的本质是表⽰⼀个唯⼀标识。
每次创建⼀个Symbol，它所代表的值都不可能重复，该值的内部实现可以视为⼀段数字（类似：3423498431987719455..）。
所以理论上 Symbol 的存在只有⼀个意义：⽤于必须使⽤唯⼀值的场景。
创建Symbol创建 Number、String等基本类型的实例有两种⽅法：通过构造函数（或者叫⼯⼚函数）和⽂字语法糖。
⽐如：// 构造函数const num = Number(3);const str = String('hi');// 语法糖const num = 3;const str = 'hi';显然使⽤语法糖更加简洁。
但是 Symbol 只能通过构造函数 Symbol() 进⾏创建：const sym = Symbol();或者，我们可以传⼊⼀个字符串参数（descriptor）⽤于描述该Symbol：const sym = Symbol('cat');注意：传⼊的参数对 Symbol 值的产⽣并⽆影响，因为就算每次传⼊的参数都⼀样，⽣成的Symbol值也是不等的。
该参数的作⽤仅⽤于描述被创建的Symbol，以便debug时可以识别出Symbol的含义。
所以，下列等式结果为 false：Symbol('cat') === Symbol('cat') // falseSymbol.for(key)和 Symbol() 类似，Symbol.for(key) 也可以创建⼀个Symbol，不⼀样的是：创建的 Symbol 是全局的（在全局Symbol表中注册），⽽如果全局已经存在相同 key 的Symbol，则直接返回该Symbol。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
jsPlumb介绍ShenBY 沈本义(qq:1617309239)2011-11-07以下jsPlumb介绍基于jsPlubm1.3.3版本，并且基础库是用jQuery1.3.x或以上，与其他版本基础库或jsPlumb的比较或后期版本升级，本文档不做介绍。
本人英文水平有限，有疑惑请自行到官网对照翻译。
摘要Jsplumb是Jquery的一个插件，它能够让你用动态的或静态的链接来连接html界面上行的元素，并且从1.1.0版本开始，提供用鼠标拖动来链接。
目前该插件支持三个javascript 库，有Jquery、MooToos、Yui3，jsplumb代码是开源的，并且是麻省理工学院许可，由google 进行代码托管。
官方示例：/jsPlumb/html/demo.html代码地址：/p/jsplumb/Jsplumb介绍地址：/JsPlumb允许您使用SVG、Canvas 或者VML链接屏幕上的元素，这些取决于您使用的浏览器的能力。
浏览器的兼容性jsPlumb 1.3.3 已经在以下浏览器测试：IE 6 on Windows XPIE 7 on Windows XPIE 8 on Windows XPFirefox 3.5.8 on Windows XPIE 9 on Windows 7Chrome 12 on Windows 7Firefox 3.5.8 on Windows 7Firefox 3.6.3 on Ubuntu 10.04Chrome on Ubuntu 10.04Safari 4 on Mac TigerSafari 4 on Windows VistaSafari 5.0.5 on Windows 7Opera 10.54 on Windows XP一．安装1.需要导入使用jsPlumb需要到如的类库文件，是根据您使用的javascript类库的不同而定，目前提供以下版本。
jQueryjquery的1.3.x或更高版本jquery ui的1.7.x或1.8.x(如果您需要支持拖放)MooToolsMooTools核心库版本1.2.4或更高版本(jsPlumb已在1.2.4和1.3.3版本上测试)MooTools的Drag.Move的1.2.4.4或更高版本YUI3YUI3.3.X ,目前jsPlumb只在YUI3.3.0上测试，YUI3其他版本可能也可以正常工作jsPlumb可以使用SVG，HTML5的画布元素或VML去呈现需要显示的对象，现代大部分浏览器都支持Canvas 和SVG,但是IE9以下都不支持这些，默认情况下，jsPlumb都使用canvas 去渲染，但如果在使用IE9以下的情况下，jsPlumb将使用vml去渲染，您可以通过下列方式调整渲染模式：二．简介1. 基本概念jsPlumb是将所有链接的东西放在一起，所以在jsPlumb中，核心是链接对象，jsPlumb本身可以分成四个组成部分锚(Anchor)：一个位置，放置端点的地方，相对于一个元素的来源，您不需要自己硬编码来创建它，jsPlumb提供给您各种功能，您只需要按照您的需要创建它就可以了。
它没有可视化的显示，只是一个逻辑位置，可以使用锚的id来引用它，jsPlumb支持这样做，并且您可以使用坐标来表示[x,y,x方向,y方向]端点(Endpoint)：链接的一端的可视化表示，您可以创建并可以链接他们；您可以让他们支持拖拽，或者您可以直接使用jsPlumb.connect()在创建链接时直接创建它们。
连接器(Connector)：链接两个元素的线，页面的可视化表示，jsPlumb有三种默认类型:Bezier曲线，直线，和流程图链接器，您不用去处理连接器，当您需要使用它们时，您只需要定义它们即可。
覆盖物(Overlay)：一个UI组件，是用来是用来装饰连接器，例如标签、箭头等。
2.锚(Anchors)锚的概念是指：定义一个链接线能够链接的点，jsPlumb有9个默认的锚点位置，您可以使用它们去链接元素，具体有：这些位置在jsplumb底层代码中都是以阵列语法表示的，[X,Y,DX,DY],其中X,Y是在区间[0,1]指定锚的位置，DX和DY是在区间[-1,1]指定曲线的事件锚的方向坐标，例如[0，0.5，-1，0]定义了一个“LeftCenter”连接器的曲线，从锚点单向向左的曲线.同样，[0.5，0，0，-1]，定义一个“CenterTop”锚连接器所产生的向上的曲线。
3.动态锚(Dynamic Anchors)这些都是可以在若干地点之一定位的锚点，当你每次移动一个元素时，会自动选择一个最合适的位置，没有特殊的语法来创建一个DynamicAnchor，你只需要提供一个独立的锚位置，例如数组：默认的动态锚：jsPlumb提供一个动态的锚，定名为“AutoDefault”默认位置有：TopCenter，RightMiddle，BottomCenter和LeftMiddle动态锚和可拖动的连接是可以进行互操作的，当你开始拖动连接或释放它时，jsPlumb会锁定一个动态的锚的位置，您可以在界面上看到链接锚点的切换变化。
4.连接器、端点，覆盖物(Connector, Endpoint & Overlay Definitions)在我们讨论连接器、终点和覆盖物之前，需要提醒的是：你需要定义一个连接器，端点或覆盖，您必须使用一个“定义”，而不是直接构建一个，这个定义可以是一个字符串，它指定你需要创建的对象。
或者您需要构件的对象的属性名组成的数组，您可以通过其构造函数来创建，例如也有三个参数的方法，可以让你指定两套参数，jsPlumb会自动为你合并，例如5.连接器(Connectors)链接的线，实际上是界面上的各个元素的链接线，jsPlumb有三条连接器实现，一条直线、Bezier曲线和”流程图”连线，默认的连接线是贝塞尔曲线，您可以有选择的设置一个链接器，可以通过设置“connector”来定义一个连接线，或者在添加端点时设置连接线，如果您没有为connector设置一个值，那么他会用他的默认值”Default”三种链接的定义语法类似贝塞尔曲线：贝塞尔曲线提供了两个端点之间的立方体路径，它支持一个构造函数参数，curviness -可选，默认为150，这定义的锚点位于贝塞尔曲线的控制点，以像素为单位的距离，但这并不意味着你的连接器会穿过从你的曲线到这个距离的点，这仅是一个标识而已。
直线：直连绘制直线的两个端点之间。
没有构造函数的参数支持，使用参数endpointStyle定义连接样式或添加端点时定义连接线样式流程图：这种类型的连接器，绘制一系列垂直或水平段组成的连接- 经典的流程图，支持一个单一的构造函数参数存根 -这是最小长度，以像素为单位，从端点发出的初始存根。
此参数是可选的，默认为30像素6.端点类型(Endpoint Types)一个端点的UI组件，标志着一个锚的位置，是连接器连接的点，jsPlumb有三个端点实现，点、矩形和图形，你可以指定端点的属性，在jsPlumb.connect时指定属性，或者jsPlumb.Addendpiont时指定，或者设置jsPlumbde target时设定属性，语法可参照connector。
三个可用的端点类型，他们的构造函数参数如下：点端点(Dot Endpoint)：此端点在屏幕上画一个点。
它支持一个构造函数参数：半径 -可选，默认为10个像素。
定义点的半径矩形端点(Rectangle Endpoint)：绘制一个矩形。
支持的构造函数的参数是：宽度 -可选;默认为20像素。
定义矩形的宽度。
高度 -可选，默认为20个像素。
定义矩形的高度。
图片端点(Image Endpoint)：从一个给定的的URL绘制图像。
此端点支持一个构造函数的参数：SRC -必需的。
指定要使用的图像的URL。
7.覆盖物类型(Overlay Types)覆盖界面上的链接元素，如标签或箭头等，jsPlumb有四个默认值：Arrow：可配置的箭头，放在两个点的连接线上，你可以控制箭头的长度和宽度，转折点：是一个折回点，方向点(允许值是1和-1，意味着是点的链接方向) Label：在点的连接器上的可配置的标签PlainArrow：一个三角形箭头，没有折回点Diamond:顾名思义，钻石最后的两个实际上市Arrow的配置的实例，当您调用jsPlumb.connect或jsPlumb.addEndpoint时，您可以指定一个或多个覆盖物。
1.这里我们举个例子，默认的箭头，上面加上文字”foo”，如图：这个链接将有一个箭头标签在连线的一般，并且文字标签在连线的四分之一处，可以注意下id属性，你可以用它来删除标签或做其他操作。
2.下面的实例，添加两个覆盖物，请注意，我们在这个例子中使用的参数“connectorOverlays，”而不是上面例子中的“overlays”，这是因为总有一天overlays 会用来作为终结点的覆盖物样式：这个链接将有一个10*30的的箭头和含有文字foo的标签，位置在连接线的开头，另外，需要注意每一个覆盖物的id。
3.PlainArrow这仅仅是一个特殊的Arrow的实例，内部jsPlumb给”foldback”硬编码为1，意思是一个平面的箭头尾部边缘，Arror的所有构造函数适用于PlainArrow.4.Diamond这也是一个特殊的Arrow实例，其中jsPlumb内部给foldback硬编码值为2，意味着箭头转变为Diamond,Arrow的所有构造函数适用于Diamond.ble提供了一个文本的标签来装饰连接器，可用的构造函数参数有：Lable：要显示的文字，你也可用提供一个函数放这儿，用来替代文本，他是做为连接的参数返回，应该返回一个string类型的字符串；cssClass：一个可选的用于lable的样式类，这是目前首选的”lableStyle”参数，样式有：Location：做为“Arrow”标签应该显示的位置,比例从0到1，包括1。
6.显示/隐藏覆盖你可用使用setVisible来控制Arrow的显示或隐藏，或者showOverlay（ID）方法，或者hideOverlay（ID）方法，请注意这里的参数id，是我们在设定各个元素时指定的，它可用用来找到那个元素。
简单的实例：并且，连接器connection也有很方便的方法用来替代上面的方法如图：连接器connection也提供删除覆盖物的方法，如图：8.默认值(Defaults)最简单的方式来设置你的pluming的显示外观等等，是重写这些元素的默认值，如果你不这么做，你得每次都手动的去提供这些值；每一个connect和addEndpoint方法都有一个关联的默认值，这些默认值存储在jsPlumb.Defaults里面，他是一个javascript 对象，这些参数的初始值是：您可用用类似下面的方法来覆盖默认值三．链接(Connections)1.基本链接(Programmatic Connections)a.最简单的链接，你可用这样写在这个例子中，我们已经创建了“element1的”element2的“连接。