利用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与碰撞检测，自动生成流程图的过程基本就这样了。