效果圖：

用帶箭頭的虛線將兩個位置不固定的div連接起來,初聽到這個需求一頭霧水，傳統(tǒng)的div可以做直線，但斜起來不太好做，幸虧之前接觸過svg,里面有一個line標(biāo)簽，知道起始中止兩個點(diǎn)的位置，就可以將兩個點(diǎn)連接起來了。
  至于箭頭,可以這么做先定義箭頭：

將箭頭放在直線上：marker-end="url(#arrow)"

需要連接的兩個div及SVG都相對于某一個div.wrap絕對定位，可以先求得兩個div左上角相對與div.wrap坐標(biāo)：

      //獲取元素左上角相對于某一元素的的位置
      function getElCoordinate(dom) {
                  var t = dom.offsetTop;
                  var l = dom.offsetLeft;
                  var w = dom.offsetWidth;
                  var h = dom.offsetHeight;
                  dom = dom.offsetParent;
                  while (!$(dom).hasClass("wrap")) {
                      t += dom.offsetTop;
                      l += dom.offsetLeft;
                      dom = dom.offsetParent;
                  }; return {
                      top: t,//Y軸坐標(biāo)
                      left: l,//X軸坐標(biāo)
                      width:w,//元素寬度
                      height:h//元素高度 
                  };
              }
     })

分為兩種情況：終點(diǎn)div位于起點(diǎn)div上方,終點(diǎn)div位于起點(diǎn)div下方。

   var pos1 = getElCoordinate($(".item1")[0])//起點(diǎn)div的位置
   var pos2 = getElCoordinate($(".item2")[0])//終點(diǎn)div的位置
   function getPos(pos1, pos2){
              //分兩種情況
              var x1,y1,x2,y2;
              if(pos2.top
4.確定起止點(diǎn)位置后連線。
   function move(){
               var pos1 = getElCoordinate($(".item1")[0])
               var pos2 = getElCoordinate($(".item2")[0])
               var start = getPos(pos1, pos2).start
               var end = getPos(pos1, pos2).end

               $("#line").attr({ x1: start.x, y1: start.y, x2: end.x, y2: end.y })
               $("#path").attr({ d: "M20,20 L100,100" })
           }
           move()
5.兩個div分別拖動并保持線始終連接
             drag($(".item"), move)
             function drag(obj,callback) {
                var dragEles = obj;
                dragEles.each(function(index, dragEleDom){
                    var _move = false;//移動標(biāo)記
                    var _x, _y;//鼠標(biāo)離控件左上角的相對位置
                    var dragEle = $(dragEleDom)
                    dragEle.click(function () {
                        //alert("click");//點(diǎn)擊（松開后觸發(fā)）
                    }).mousedown(function (e) {
                        _move = true;
                        _x = e.pageX - parseInt(dragEle.css("left"));
                        _y = e.pageY - parseInt(dragEle.css("top"));
                        // dragEle.fadeTo(20, 0.9);//點(diǎn)擊后開始拖動并透明顯示
                    });
                    $(document).mousemove(function (e) {
                        if (_move) {
                            var x = e.pageX - _x;//移動時(shí)根據(jù)鼠標(biāo)位置計(jì)算控件左上角的絕對位置
                            var y = e.pageY - _y;
                            dragEle.css({ top: y, left: x });//控件新位置
                            if(callback){callback()}
                        }
                    }).mouseup(function () {
                        _move = false;
                        dragEle.fadeTo("fast", 1);//松開鼠標(biāo)后停止移動并恢復(fù)成不透明
                    });
                })
                
           }
梳理下流程：分析需求>確定使用SVG>找到連接點(diǎn)>連線>拖動時(shí)保持連線。
源碼托管于github歡迎star