前言：

jsplumb 有2个版本一个Toolkit Edition（付费版），另外一个就是Community Edition（社区版本）。Toolkit Edition版本功能集成的比较丰富，社区版本的就差好多，很多功能都没有，需要我们自己去添加，当然了自己添加多多少少有些麻烦，而且也不完善。但是我们还是用Community Edition（社区版本），毕竟不收费，没办法，下边所说的版本默认都是以社区版。

最近公司项目有用到这个流程图，所以也就看到了这个框架，这个框架是英文版本的，地址：https://jsplumbtoolkit.com/community/doc/home.html（可以用浏览器翻译了看）。他的缺陷就是文档不全，api感觉也有点乱，实例交代的也不清楚，github地址是：https://github.com/jsplumb/jsplumb （里面有demo，自己可以下载运行，多动手试试）。如果只是简单的画个图，这个框架是没有什么问题的，demo里也有，但是如果要实现高级的动能呢鞥，还是得多多尝试。此文也是记录一下我自己用到的一些功能，很多我还没用到，用到了在慢慢补充。

 
jsplumb.png

上图也就是我这次用到的jsplumb实现的功能，连接线能够拖拽生成，也可以删除，编辑label。

1、数据结构

  1. {
  2.   "nodes": [{  //节点集合
  3.     "icon": "el-icon-loading",
  4.     "id": "start",
  5.     "nodeStyle": {
  6.       "top": 100,
  7.       "left": 200
  8.     },
  9.     "text": "开始",
  10.     "type": "circle"
  11.   }, {
  12.     "icon": "el-icon-upload",
  13.     "id": "end",
  14.     "nodeStyle": {
  15.       "top": 300,
  16.       "left": 400
  17.     },
  18.     "text": "结束",
  19.     "type": "circle"
  20.   }] ,
  21.   "connections": [{  //连接线集合
  22.       "sourceId": "start",
  23.       "targetId": "end",
  24.       "label":"编辑"
  25.     }]
  26. }

jsplumb实例里面的数据结构就是这样的，这里我们沿用他的数据结构，你也可以自己定义自己想的数据结构，但是对比起来这个结构是最清晰也最方便的。

2、初始化

jsplumb在DOM渲染完毕之后才会执行，所以需要为jsplumb的执行代码绑定一个ready事件：

  1. jsPlumb.ready(function() {
  2.     // your jsPlumb related init code goes here
  3. });

jsplumb默认是注册在浏览器窗口的，将整个页面提供给我们作为一个实例，但我们也可以使用getInstance方法建立页面中一个独立的实例：

  1. var _instance = jsPlumb.getInstance();

3、功能实现（允许哪些元素拖拽，允许拆卸连接）

  1. let instance = jsPlumb.getInstance({
  2.                 PaintStyle:{
  3.                     strokeWidth:2,
  4.                     stroke:"#567567",
  5.                 }
  6.             })
  7.         //拖拽功能
  8.         var els = document.querySelectorAll(".box");//.box是允许拖拽的元素class类名
  9.         instance.draggable(els,{
  10.            containment:true,
  11.            filter: ".ep",//除去不能拖拽的，这里是个class类名
  12.         });
  13.         //不允许拆卸连接，不设置的话默认是可以的
  14.         instance.importDefaults({
  15.           ConnectionsDetachable:false
  16.         });

4、连线监听事件（拖动connection 事件）

  1.         // 监听拖动connection 事件，判断是否有重复链接
  2.         instance.bind("beforeDrop", function(info) {
  3.             // info.connection.getOverlay("label").setLabel(info.connection.id);
  4.             // 判断是否已有该连接
  5.             let isSame = true;
  6.             //下边的forEach循环就是处理数据结构里的connections不能自己跟自己连线。当然你也可以处理其他
  7.             _this.chartData.connections.forEach(item => {
  8.               if ((item.targetId === info.targetId && item.sourceId === info.sourceId) ||  (item.targetId === info.sourceId && item.sourceId === info.targetId)) {
  9.                 isSame = false;
  10.               }
  11.             });
  12.             if (isSame) {
  13.                 //允许连线后处理的情况
  14.             } else {
  15.               alert("不允许重复连接！");
  16.             }
  17.             return isSame;//这里返回了ture就会自定进行连线。
  18.         });

5、上图实现的完整代码

下边代码就是实现上图的，需要指出的是运用了vue，但是里面掺杂了jquery，和jquery-ui,其实不想用这2个的，但是项目紧，之前项目也用到了，所以就延续了。还有就是上面代码是我自己的测试代码，写的可能有些杂乱，就是测试一个一个功能而写，写的有点乱。

还有一个想说的就是之前想实现，缩放，引入了panzoom.js，流程图也实现了滚动鼠标放大放小，但是有个问题就是滚动鼠标放大放小后如果拖动单个元素或者连线，你就会发现鼠标点对不齐了，这点还没有解决，如果有好的方案，可以告知我下。Toolkit Edition（付费版）的这些功能都有，就不会出现这样的问题。

  1. <template>
  2.   <div id="test6" style="height:100%;position:relative">
  3.       <section id="focal"  style="position:relative;overflow:hidden;width:610px;height:610px;background:#fff;border:1px solid red">
  4.         <div class="parent" id="parent" style="height:100%;">
  5.           <div class="panzoom" id="panzoom" style="border:1px solid blue;width:6000px;height:6000px; transform:translate(-50%, -50%);position:absolute;">
  6.             <div class="box" :id="item.id" :style="{'top':item.nodeStyle.top+'px','left':item.nodeStyle.left+'px'}" v-for="item in chartData.nodes" :key="item.id">
  7.                 <i :class="item.icon" class="oldIcon" :title="item.text"></i>
  8.                 <i class="el-icon-circle-close" style="display:none" :title="item.text" :id="item.id"></i>
  9.                 <div class="ep"></div>
  10.             </div>
  11.           </div>
  12.       </div>
  13.     </section>
  14.     <div class="source">
  15.         <ul>
  16.             <li v-for="(item,index) in list" :id="item.id" :key="index" class="sourceLi" :disabled="true" :data-icon="item.icon" :data-text="item.text" :data-type="item.type">{{item.text}}</li>
  17.         </ul>
  18.     </div>
  20.         <el-dialog
  21.               title="修改label名称"
  22.               :visible.sync="dialogVisible"
  23.               width="30%"
  24.               :before-close="handleClose">
  25.               <el-input v-model="labelName" placeholder="请输入"></el-input>
  26.               <span slot="footer" class="dialog-footer">
  27.                 <el-button @click="dialogVisible = false">取 消</el-button>
  28.                 <el-button type="primary" @click="changeNote">确 定</el-button>
  29.               </span>
  30.             </el-dialog>
  31.   </div>
  32. </template>
  33. <script>
  34. import ChartNode from "@/components/ChartNode";
  35. export default {
  36.   name: "test6",
  37.   data() {
  38.     return {
  39.         dialogVisible:false,
  40.         labelName:"",
  41.         curSourceId:'',
  42.         curTargetId:'',
  43.         addLabelText:'',//拖拽后生成的连线label文字
  44.         jsp:null,
  45.         myscale:1,
  46.         curScreen:[],//当前屏幕宽高
  47.         chartData: {
  48.             nodes: [],
  49.             connections: [],//{ "targetId": "box2", "sourceId": "box1" }
  50.             props: {},
  51.             screen:[610,610]//提交屏幕宽高
  52.         },
  53.         list: [
  54.           {
  55.             icon: "el-icon-goods",
  56.             text: "伴随车牌",
  57.             type: "circle",
  58.             id:'li1'
  59.           },
  60.           {
  61.             icon: "el-icon-bell",
  62.             text: "常住人口筛选",
  63.             type: "diamond",
  64.             id:"li2"
  65.           },
  66.           {
  67.             icon: "el-icon-date",
  68.             text: "伴随imsi",
  69.             type: "circle",
  70.             id:"li3"
  71.           }
  72.         ]
  73.     };
  74.   },
  75.   mounted() {
  77.     let _this = this
  78.     jsPlumb.ready(function() {
  79.         var $section = $('#focal');
  80.         var $panzoom = $section.find('.panzoom').panzoom({
  81.              minScale: 0.3,
  82.              maxScale:2,
  83.              eventNamespace: ".panzoom",
  84.              $zoomRange: $(".jtk-endpoint"),
  85.              $set: $section.find('.jtk-overlay'),
  86.              eventsListenerElement: document.querySelector('.box')
  87.         });
  89.         $(document).on('mouseover','.box,.jtk-draggable,.jtk-overlay,.ep',function(){
  90.           $('.panzoom').panzoom("disable");
  91.         })
  93.         $(document).on('mouseleave','.box,.jtk-draggable,.jtk-overlay,.ep',function(){
  94.           $('.panzoom').panzoom("enable");
  95.         })
  97.         let instance = jsPlumb.getInstance({
  98.                 PaintStyle:{
  99.                     strokeWidth:2,
  100.                     stroke:"#567567",
  101.                 },
  102.                 // Connector: ["Straight", { stub: [0,0], gap:[-30,-30] }],
  103.                 Connector:[ "Straight", { curviness: 0 } ],
  104.                 Endpoint: ["Blank",{ cssClass: "chart-dot", hoverClass: "chart-dot-hover", radius: 5 }],
  105.                 EndpointStyle : { fill: "blue"  },
  106.                 HoverPaintStyle:{
  107.                     stroke:"red",
  108.                 },
  109.                 DragOptions: { cursor: "pointer", zIndex: 2000 },
  110.                 ConnectionOverlays: [
  111.                   [
  112.                     "Arrow",
  113.                     {
  114.                       location: 1,
  115.                       visible: true,
  116.                       width: 11,
  117.                       length: 11,
  118.                       id: "ARROW",
  119.                       events: {
  120.                         click: function() {
  121.                           alert("you clicked on the arrow overlay");
  122.                         }
  123.                       }
  124.                     }
  125.                   ],
  126.                   ["Label", { label: "", id: "label", cssClass: "aLabel" }]
  127.                 ],
  128.                 Container: "panzoom"
  129.             })
  130.         _this.jsp = instance;
  131.         //拖拽功能
  132.         var els = document.querySelectorAll(".box");
  133.         instance.draggable(els,{
  134.            containment:true,
  135.            filter: ".ep",//除去不能拖拽的
  136.            grid:[50,50]
  137.         });
  138.         //不允许拆卸连接，不设置的话默认是可以的
  139.         instance.importDefaults({
  140.           ConnectionsDetachable:false
  141.         });
  142.         // 监听拖动connection 事件，判断是否有重复链接
  143.         instance.bind("beforeDrop", function(info) {
  144.             // info.connection.getOverlay("label").setLabel(info.connection.id);
  145.             console.log(info);
  146.             // 判断是否已有该连接
  147.             let isSame = true;
  148.             _this.chartData.connections.forEach(item => {
  149.               if ((item.targetId === info.targetId && item.sourceId === info.sourceId) ||  (item.targetId === info.sourceId && item.sourceId === info.targetId)) {
  150.                 isSame = false;
  151.               }
  152.             });
  153.             if (isSame) {
  154.                 _this.addLabelText = "新label"
  155.                 _this.chartData.connections.push({
  156.                     sourceId: info.sourceId,
  157.                     targetId: info.targetId,
  158.                     label:_this.addLabelText
  159.                 });
  160.             } else {
  161.               alert("不允许重复连接！");
  162.             }
  163.             return isSame;
  164.         });
  166.             var initNode = function(el) {
  167.                      instance.draggable(el, {
  168.                       // containment: true,
  169.                       start(params) {
  170.                         // 拖动开始
  171.                         // console.log(params);
  172.                       },
  173.                       drag(params) {
  174.                         // 拖动中
  175.                         // console.log(params);
  176.                       },
  177.                       stop(params) {
  178.                         // 拖动结束
  179.                         console.log(params);
  180.                         let id = params.el.id;
  181.                         _this.chartData.nodes.forEach(item => {
  182.                           if (item.id === id) {
  183.                             item.nodeStyle.left = params.pos[0];
  184.                             item.nodeStyle.top = params.pos[1] ;
  185.                           }
  186.                         });
  187.                       }
  188.                     });
  189.                     instance.makeSource(el, {
  190.                         filter: ".ep",
  191.                         anchor: ["Perimeter", { shape: "Rectangle" }],
  192.                         // anchor: ["Perimeter", { shape: "Dot" }],
  193.                         connectorStyle: {
  194.                             stroke: "#5c96bc",
  195.                             strokeWidth: 2,
  196.                             outlineStroke: "transparent",
  197.                             outlineWidth: 4
  198.                         },
  199.                         extract: {
  200.                             action: "the-action"
  201.                         },
  202.                         maxConnections: -1,
  203.                         onMaxConnections: function(info, e) {
  204.                             alert("Maximum connections (" + info.maxConnections + ") reached");
  205.                         }
  206.                     });
  207.                     instance.makeTarget(el, {
  208.                       dropOptions: { hoverClass: "dragHover" },
  209.                       anchor: ["Perimeter", { shape: "Rectangle" }],
  210.                       allowLoopback: false
  211.                     });
  213.                     // instance.fire("jsPlumbDemoNodeAdded", el);
  214.                 };
  215.             //初始化遮罩层
  216.             var init = function(connection) {
  217.                 if(_this.addLabelText){
  218.                     connection.getOverlay("label").setLabel(_this.addLabelText);
  219.                 }else{
  220.                      connection.getOverlay("label").setLabel('编辑');
  221.                 }
  222.                 $(connection.getOverlay("label").canvas).attr('mySourceId',connection.sourceId)
  223.                 $(connection.getOverlay("label").canvas).attr('myTargetId',connection.targetId)
  224.             };
  226.   // 将模块拖入画板中
  227.       $(".sourceLi").draggable({
  228.         scope: "plant",
  229.         helper: "clone",
  230.         opacity: 0.7,
  231.         containment: $("#test1")
  232.       });
  234.       $("#panzoom").droppable({
  235.         scope: "plant",
  236.         drop: function(ev, ui) {
  237.           console.log(ev, ui);
  238.           let helper = ui.helper;
  239.           let id = jsPlumbUtil.uuid();
  240.           let item = {
  241.             id,
  242.             icon: helper.attr("data-icon"),
  243.             type: helper.attr("data-type"),
  244.             text: helper.attr("data-text"),
  245.             nodeStyle: {
  246.               top: ui.offset.top - $("#panzoom").offset().top ,
  247.               left: ui.offset.left - $("#panzoom").offset().left
  248.             }
  249.           };
  250.           console.log(ui.position)
  251.           _this.chartData.nodes.push(item);
  252.           _this.$nextTick(() => {
  253.             initNode(id);
  254.           });
  255.         }
  256.       });
  258.          instance.batch(() => {
  260.                 jsPlumb.getSelector(".box").forEach(item => {
  261.                     console.log(item)
  262.                     initNode(item);
  263.                 });
  265.                 instance.bind("connection", function(connInfo, originalEvent) {
  266.                     init(connInfo.connection);
  267.                     //显示删除按钮
  268.                     $(connInfo.connection.getOverlay("label").canvas).hover(function() {
  269.                         $(this).append('<div class="x" style="position: absolute;">X</div>');
  270.                     }, function() {
  271.                         $(this).find(".x").stop().remove();
  272.                     })
  273.                     //删除连接
  274.                     $(connInfo.connection.getOverlay("label").canvas).on('click','.x',function(){
  275.                         console.log("shanchu")
  276.                         let _connections = _this.chartData.connections;
  277.                         _connections.forEach((val,index)=>{
  278.                             if(val.targetId == connInfo.connection.targetId && val.sourceId == connInfo.connection.sourceId){
  279.                                 _connections.splice(index,1)
  280.                             }
  281.                         })
  282.                         instance.deleteConnection(connInfo.connection);
  283.                         $('.panzoom').panzoom("enable");//这个是为了杜绝删除前的禁止拖拽事件
  284.                     })
  285.                     //label双击事件
  286.                     $(connInfo.connection.getOverlay("label").canvas).on("dblclick",function(conn, connInfo){
  287.                         let _allConnections = _this.jsp.getAllConnections();
  288.                         _this.dialogVisible = true
  289.                         _this.curSourceId = $(conn.target).attr('mySourceId')
  290.                         _this.curTargetId = $(conn.target).attr('myTargetId')
  291.                         _allConnections.forEach((val,index)=>{
  292.                             if(val.targetId == $(conn.target).attr('myTargetId') && val.sourceId == $(conn.target).attr('mySourceId')){
  293.                                 _this.labelName =  val.getOverlay('label').label
  294.                             }
  295.                         })
  296.                     })
  297.                 });
  298.         });
  299.         instance.fire("jsPlumbDemoLoaded", instance);
  300.         $(document).on("dblclick",".box",function(){
  301.             $(this).find(".oldIcon").css('display','none')
  302.             $(this).find('.el-icon-circle-close').css('display','inline-block')
  303.         })
  304.         $(document).on("click",".el-icon-circle-close",function(){
  305.             let _note = _this.chartData.nodes
  306.             let _id = $(this).attr("id")
  307.             let _connections = _this.chartData.connections;
  308.             let _allConnections = instance.getAllConnections();
  309.             _this.chartData.connections = _connections.filter((val)=>{
  310.                 return (val.targetId != _id && val.sourceId != _id)
  311.             })
  312.             _note.forEach((val,index)=>{
  313.                 if(val.id == _id){
  314.                     _note.splice(index,1)
  315.                 }
  316.             })
  317.               _allConnections.forEach((val,index)=>{
  318.                 if(val.targetId == _id || val.sourceId == _id){
  319.                     instance.deleteConnectionsForElement(_id)
  320.                 }
  321.             })
  322.         })
  323.             _this.handleClickTemp(1)
  325. });
  327.   },
  328.   methods:{
  329.         myclick(){
  330.             alert("myclickmyclickmyclickmyclick")
  331.         },
  332.         // 初始化node节点
  333.         initNode(el) {
  334.           // initialise draggable elements.
  335.           // 元素拖动，基于 katavorio.js 插件
  336.           let _self = this;
  337.           this.jsp.draggable(el, {
  338.             // containment: true,
  339.             start(params) {
  340.               // 拖动开始
  341.               // console.log(params);
  342.             },
  343.             drag(params) {
  344.               // 拖动中
  345.               // console.log(params);
  346.             },
  347.             stop(params) {
  348.               // 拖动结束
  349.               console.log(params);
  350.               let id = params.el.id;
  351.               _self.chartData.nodes.forEach(item => {
  352.                 if (item.id === id) {
  353.                   item.nodeStyle.left = params.pos[0]
  354.                   item.nodeStyle.top = params.pos[1]
  355.                 }
  356.               });
  357.             }
  358.           });
  360.           this.jsp.makeSource(el, {
  361.             filter: ".ep",
  362.             // anchor: "Continuous",
  363.             anchor: ["Perimeter", { shape: "Rectangle" }],
  364.             connectorStyle: {
  365.               stroke: "#5c96bc",
  366.               strokeWidth: 2,
  367.               outlineStroke: "transparent",
  368.               outlineWidth: 4
  369.             },
  370.             extract: {
  371.               action: "the-action"
  372.             },
  373.             maxConnections: -1,
  374.             onMaxConnections: function(info, e) {
  375.               alert("Maximum connections (" + info.maxConnections + ") reached");
  376.             }
  377.           });
  379.           this.jsp.makeTarget(el, {
  380.             dropOptions: { hoverClass: "dragHover" },
  381.             anchor: ["Perimeter", { shape: "Rectangle" }],
  382.             allowLoopback: false
  383.           });
  385.           // this is not part of the core demo functionality; it is a means for the Toolkit edition's wrapped
  386.           // version of this demo to find out about new nodes being added.
  387.           //
  388.           this.jsp.fire("jsPlumbDemoNodeAdded", el);
  389.         },
  390.         handleClickTemp(key) {
  391.           this.chartData = {
  392.             nodes: [],
  393.             connections: [],
  394.             props: {}
  395.           };
  396.           this.jsp.empty("panzoom");
  397.           if (key) {
  398.             let url = "/static/json/" + 1 + ".json";
  399.             this.$axios
  400.               .get(url)
  401.               .then(resp => {
  402.                 console.log(resp);
  404.                 let _data = resp.data
  405.                 let _reloatScreen = _data.screen
  406.                 let _scale = $("#focal").width() / _data.screen[0]
  407.                 let _focalWidth = $("#focal").width()
  408.                 let _focalHeight = $("#focal").height()
  409.                 let _panzoomWidth = $("#panzoom").width()
  410.                 debugger
  411.                 _data.nodes.forEach((val,index)=>{
  412.                     val.nodeStyle.left = parseInt(val.nodeStyle.left) * _scale - (_panzoomWidth*_scale-_panzoomWidth)/2
  413.                     val.nodeStyle.top  = parseInt(val.nodeStyle.top) * _scale - (_panzoomWidth*_scale-_panzoomWidth)/2
  414.                 })
  415.                 // $("#panzoom").css({'width':_panzoomWidth*_scale+'px','height':_panzoomWidth*_scale+'px'})
  416.                 this.chartData = _data;
  417.                 this.$nextTick(() => {
  418.                   this.chartData.nodes.forEach(item => {
  419.                     this.initNode(item.id);
  420.                   });
  421.                   this.chartData.connections.forEach(item => {
  422.                     let _connects = this.jsp.connect({
  423.                       source: item.sourceId,
  424.                       target: item.targetId
  425.                     });
  426.                      _connects.getOverlay("label").setLabel(item.label)
  427.                      $(_connects.getOverlay("label").canvas).attr('mySourceId',item.sourceId)
  428.                      $(_connects.getOverlay("label").canvas).attr('myTargetId',item.targetId)
  429.                   });
  430.                 });
  431.               })
  432.               .catch(err => {
  433.                 console.log(err);
  434.               });
  435.           } else {
  436.             this.$nextTick(() => {
  437.               this.chartData.nodes.push({
  438.                 id: "start",
  439.                 icon: "el-icon-loading",
  440.                 type: "circle",
  441.                 text: "开始",
  442.                 nodeStyle: {
  443.                   top: "100px",
  444.                   left: "300px"
  445.                 }
  446.               });
  447.               this.$nextTick(() => {
  448.                 this.jsp.batch(() => {
  449.                   this.initNode(jsPlumb.getSelector("#start"));
  450.                 });
  451.               });
  452.             });
  453.           }
  454.         },
  455.         changeNote(){//修改label
  456.             if(!this.labelName){
  457.                 alert("名称没有填写")
  458.                 return false
  459.             }
  460.             let _allConnections = this.jsp.getAllConnections();
  461.             _allConnections.forEach((val,index)=>{
  462.                 if(val.sourceId == this.curSourceId && val.targetId == this.curTargetId ){
  463.                     val.getOverlay("label").setLabel(this.labelName)
  464.                 }
  465.             })
  466.             this.chartData.connections.forEach(val => {
  467.                 if(val.sourceId == this.curSourceId && val.targetId == this.curTargetId ){
  468.                     val.label = this.labelName
  469.                 }
  470.            });
  471.            this.dialogVisible = false
  472.         },
  473.         handleClose(){
  474.             this.dialogVisible = false
  475.         }
  477.   },
  478.   components: {
  479.     ChartNode
  480.   }
  481. };
  482. </script>
  484. <style lang="scss" scoped>
  485. #test1{
  486.   position:relative;
  487.   width:90%;
  488.   height:90%;
  489.   border:1px solid #ddd;
  490.   background:#fff;
  491. }
  492. .box{
  493.     border-radius:50%;
  494.     text-align: center;
  495.     cursor: pointer;
  496.   background-color: white;
  497.   border: 1px solid #346789;
  498.   text-align: center;
  499.   z-index: 24;
  500.   cursor: pointer;
  501.   box-shadow: 2px 2px 19px #aaa;
  502.   -o-box-shadow: 2px 2px 19px #aaa;
  503.   -webkit-box-shadow: 2px 2px 19px #aaa;
  504.   -moz-box-shadow: 2px 2px 19px #aaa;
  506.   position: absolute;
  507.   color: black;
  508.   padding: 0.5em;
  509.   width: 40px;
  510.   height: 40px;
  511.   display: flex;
  512.   align-items: center;
  513.   justify-content: center;
  514.   -webkit-transition: -webkit-box-shadow 0.15s ease-in;
  515.   -moz-transition: -moz-box-shadow 0.15s ease-in;
  516.   -o-transition: -o-box-shadow 0.15s ease-in;
  517.   transition: box-shadow 0.15s ease-in;
  518.     .ep {
  519.         opacity: 0;
  520.         position: absolute;
  521.         right: -10px;
  522.         top: 0;
  523.         width: 10px;
  524.         height: 10px;
  525.         background: #409eff;
  526.         border-radius: 5px;
  527.       }
  528.       &:hover {
  529.         .ep {
  530.           opacity: 1;
  531.         }
  532.       }
  533.       &.dragHover {
  534.         .ep {
  535.           opacity: 0;
  536.         }
  537.       }
  538.   }
  540. .box:hover {
  541.   border: 1px solid #123456;
  542.   box-shadow: 2px 2px 19px #444;
  543.   -o-box-shadow: 2px 2px 19px #444;
  544.   -webkit-box-shadow: 2px 2px 19px #444;
  545.   -moz-box-shadow: 2px 2px 19px #fff;
  546.   opacity: 0.9;
  547. }
  548. .box:hover,
  549. .box.jtk-source-hover,
  550. .box.jtk-target-hover {
  551.   border: 1px solid orange;
  552.   color: orange;
  553. }
  555. .box1{
  556.   top:50px;
  557.   left:50px;
  558. }
  559. .box2{
  560.   top:160px;
  561.   left:250px;
  562. }
  563. .box3{
  564.   top:360px;
  565.   left:150px;
  566. }
  567. .box4{
  568.   top:350px;
  569.   left:450px;
  570. }
  572. .chart-dot-hover{
  573.   display: block;
  574.   background: red
  575. }
  577. .source{
  578.     position:absolute;
  579.     top:50px;
  580.     right:50px;
  581.     border:1px solid red;
  582.     width:200px;
  583.     height:300px;
  584.     li{
  585.         line-height:36px;
  586.         border:1px solid #ddd;
  587.         margin-bottom:10px;
  588.         cursor:pointer
  589.     }
  590. }
  591. </style>
  593. <style>.aLabel{
  594.        border: 1px solid blue;
  595.        padding: 4px;
  596. }
  597. .x{
  598.     top:-10px;
  599.     right:-10px;
  600.     cursor: pointer;
  601. }
  602. .jtk-overlay{
  603.     padding: 0
  604. }
  605. </style>

 

jsplumb 流程图，常用功能配置记录的更多相关文章

  1. Nginx常用功能配置一

    Nginx常用功能配置 参数include配置 说明:如果日常工作中server标签存在太多,可以采用include配置模式,Nginx的主配置文件包含的所有虚拟主机的子配置文件会统一放入extra目 ...

  2. Nginx常用功能配置二

    Nginx常用功能配置二 Nginx location匹配设置 location作用:可以根据用户请求的URI来执行不同的应用,根据用户请求的网站的地址URL匹配. location语法: locat ...

  3. Apache运维中常用功能配置笔记梳理

    Apache 是一款使用量排名第一的 web 服务器,LAMP 中的 A 指的就是它.由于其开源.稳定.安全等特性而被广泛使用.下边记录了使用 Apache 以来经常用到的功能,做此梳理,作为日常运维 ...

  4. nginx常用功能配置

    一.规范优化nginx配置文件 nginx的主配置文件为nginx.conf,主配置文件包含的所有虚拟主机的子配置文件会统一放入extra目录中,虚拟主机的配置文件按照网站的域名或功能取名,例如www ...

  5. Ubuntu 常用环境配置记录

    引言 经常使用 Ubuntu 虚拟机,双系统,WSL,服务器等等,每次配置常用开发环境都要去百度细节,故在此记录一下. 更换软件源 阿里云镜像 清华镜像 # 更新 sudo apt update &a ...

  6. vim 常用命令逐渐熟悉以及常用的配置记录

    本篇博客记录的是我自己学习vim的常用命令的过程中,各个命令的逐渐熟悉的顺序(有一部分已经熟悉的命令没有列出),已经对vim编辑器本身的一些设置的记录 1.G 快速将光标切换到文件的最底部 2.u 撤 ...

  7. nginx下目录浏览及其验证功能配置记录

    工作中常常有写不能有网页下载东西的需求,在Apache下搭建完成后直接导入文件即可达到下载/显示文件的效果;而Nginx的目录列表功能默认是关闭的,如果需要打开Nginx的目录列表功能,需要手动配置, ...

  8. Echarts图表常用功能配置，Demo示例

    先看下效果图: 就如上图所示,都是些常用的基本配置. Legend分页,X轴设置,Y轴设置,底部缩放条设置, 数值显示样式设置,工具箱设置,自定义工具按钮, 绑定点击事件等等.这些配置代码中都做了简单 ...

  9. centos中apache自用常用额外配置记录(xwamp)

    xwamp套件中apache配置,记录下,以免忘记. 配置路径 ${wwwroot_dir}/conf/httpd.conf 配置内容 <ifmodule mod_deflate.c> D ...

随机推荐

  1. go常量的定义和枚举类型

    const a,b int = 1,2 const a,b     = 1,2 const ( a = "hello" b,c =3,4 ) 常量数值可作为各种类型使用 枚举类型的 ...

  2. CSS定位有几种？分别描述其不同

    static(静态定位):即默认值,元素框正常生成的,top.right.bottom.left这些偏移属性不会影响静态定位的正常显示(属性不应用): relative(相对定位):元素相对自身偏移某 ...

  3. js 数组中如何删除字典

    区别: []表示是一个数组,如var strs = ['a','b','c'].{}表示是一个对象,比如,var obj = {name: '宙斯',sex: 1} 如何在数组中删除指定对象呢?? [ ...

  4. Spring框架加案例

    依赖: <!-- https://mvnrepository.com/artifact/org.springframework/spring-beans --> <dependenc ...

  5. Oracle 绑定变量窥视

    绑定变量窥视功能是数据库的一个特性,自ORACLE9i版本开始引入,默认是开启的. “绑定变量窥视”表示,查询优化器在第一次调用游标时,会观察用户定义的绑定变量的值,允许优化器来确认过滤条件的选择性, ...

  6. Elasticsearch 索引文档的增删改查

    利用Elasticsearch-head可以在界面上(http://127.0.0.1:9100/)对索引进行增删改查 1.RESTful接口使用方法 为了方便直观我们使用Head插件提供的接口进行演 ...

  7. 【原创】go语言学习（十七）接口应用实战--日志库

    目前 日志库需求分析 日志库接口设计 文件日志库开发 Console日志开发 日志使用以及测试 日志库需求分析 1.日志库需求分析 A. 程序运行是个黑盒B. 而日志是程序运行的外在表现C. 通过日志 ...

  8. 修改rabbitmq web-UI端口号

    一.拷贝配置文件 [root@test03 ~]# cd /usr/share/doc/rabbitmq-server-3.6.15/ [root@test03 rabbitmq-server-3.6 ...

  9. 【SPOJ】Longest Common Substring

    [SPOJ]Longest Common Substring 求两个字符串的最长公共子串 对一个串建好后缀自动机然后暴力跑一下 废话 讲一下怎么跑吧 从第一个字符开始遍历,遍历不到了再沿着\(pare ...

  10. 搞定TADA68机械键盘的固件修改

    一.先到http://config.qmk.fm,在键盘型号中选择tada68,千万不要选择错了,可在kdemap name中为自己的键位名个名,例如:vimgood 二.修改自己的键位,都是可视化的 ...