连接两个div的直线，拖动时保持连线。

monw3c 发布于2019-08-21 17:31 / 1683人阅读

效果：连接两个div带箭头的虚线，拖动div时保持线条实时改变位置保持始终连接

效果图：

1.产品经理提出的需求

用带箭头的虚线将两个位置不固定的div连接起来,初听到这个需求一头雾水，传统的div可以做直线，但斜起来不太好做，幸亏之前接触过svg,里面有一个line标签，知道起始中止两个点的位置，就可以将两个点连接起来了。
至于箭头,可以这么做先定义箭头：

将箭头放在直线上：marker-end="url(#arrow)"

2.确定起始中止两个点左上角的位置

需要连接的两个div及SVG都相对于某一个div.wrap绝对定位，可以先求得两个div左上角相对与div.wrap坐标：

      //获取元素左上角相对于某一元素的的位置
      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轴坐标
                      left: l,//X轴坐标
                      width:w,//元素宽度
                      height:h//元素高度 
                  };
              }
     })

3.确定连接点在div上的位置：

分为两种情况：终点div位于起点div上方,终点div位于起点div下方。

   var pos1 = getElCoordinate($(".item1")[0])//起点div的位置
   var pos2 = getElCoordinate($(".item2")[0])//终点div的位置
   function getPos(pos1, pos2){
              //分两种情况
              var x1,y1,x2,y2;
              if(pos2.top
4.确定起止点位置后连线。
   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;//移动标记
                    var _x, _y;//鼠标离控件左上角的相对位置
                    var dragEle = $(dragEleDom)
                    dragEle.click(function () {
                        //alert("click");//点击（松开后触发）
                    }).mousedown(function (e) {
                        _move = true;
                        _x = e.pageX - parseInt(dragEle.css("left"));
                        _y = e.pageY - parseInt(dragEle.css("top"));
                        // dragEle.fadeTo(20, 0.9);//点击后开始拖动并透明显示
                    });
                    $(document).mousemove(function (e) {
                        if (_move) {
                            var x = e.pageX - _x;//移动时根据鼠标位置计算控件左上角的绝对位置
                            var y = e.pageY - _y;
                            dragEle.css({ top: y, left: x });//控件新位置
                            if(callback){callback()}
                        }
                    }).mouseup(function () {
                        _move = false;
                        dragEle.fadeTo("fast", 1);//松开鼠标后停止移动并恢复成不透明
                    });
                })
                
           }
梳理下流程：分析需求>确定使用SVG>找到连接点>连线>拖动时保持连线。
源码托管于github欢迎star

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89619.html

基于vue的简单流程图开发

摘要：拖了这么久，现在终于要开始硬着头皮写一篇基于的流程图伪教程文章了。本教程主要讲述一个基于如何实现一个简单的流程图，更多引发的思考是，什么项目更适合使用这种模式的框架，以及如何发挥的价值。严重拖延症，一方面这项目模块纯属个人娱乐。另一方面，流程图这块涉及的东西还是蛮多的，这次也只是介绍一些简单的部分。拖了这么久，现在终于要开始硬着头皮写一篇基于vue+svg的流程图伪教程文章了。初次献...

hover_lew 2019-08-21 17:06 评论0 收藏0
基于vue的简单流程图开发

摘要：拖了这么久，现在终于要开始硬着头皮写一篇基于的流程图伪教程文章了。本教程主要讲述一个基于如何实现一个简单的流程图，更多引发的思考是，什么项目更适合使用这种模式的框架，以及如何发挥的价值。严重拖延症，一方面这项目模块纯属个人娱乐。另一方面，流程图这块涉及的东西还是蛮多的，这次也只是介绍一些简单的部分。拖了这么久，现在终于要开始硬着头皮写一篇基于vue+svg的流程图伪教程文章了。初次献...

willin 2019-08-01 17:48 评论0 收藏0
快速开发基于 HTML5 网络拓扑图应用--入门篇（一）

摘要：计算机网络的拓扑结构是引用拓扑学中研究与大小，形状无关的点线关系的方法。这篇文章写的案例就是总线拓扑中的一个分支，我们一步一步来搭建这个拓扑图形。示例图片拓扑图形组件以下简称是框架中功能最丰富的组件，其相关类库都在包下。计算机网络的拓扑结构是引用拓扑学中研究与大小，形状无关的点、线关系的方法。把网络中的计算机和通信设备抽象为一个点，把传输介质抽象为一条线，由点和线组成的几何图形就是计...

baukh789 2019-08-05 12:44 评论0 收藏0
基于 HTML5 WebGL 的 3D “弹力”布局

摘要：提供了弹力布局也称为力导向布局的功能，即根据节点之间存在互斥力，相互连接的节点间存在引力，弹力布局运行一段时间后，整体拓扑网络结构会逐渐达到收敛稳定的平衡状态。介绍完封装的弹力布局的背景之后，接下来就是帮助你们也能轻松地实现这个效果。分子力(molecular force)，又称分子间作用力、范得瓦耳斯力，是指分子间的相互作用。当二分子相距较远时，主要表现为吸引力，这种力主要来源于一...

ymyang 2019-08-05 12:26 评论0 收藏0
根据矩阵变化实现基于 HTML5 的 WebGL 3D 自动布局

摘要：矩阵的主要应用是表示线性变换，即等线性函数的推广。从矩阵的特征值和特征向量中可以看到线性变换的几何结构以及其他信息。简单的说，线性变换可能拉伸坐标系，但不会弯曲或卷折坐标系。在数学中，矩阵是以行和列排列的数字，符号或表达式的矩形阵列，任何矩阵都可以通过相关字段的标量乘以元素。矩阵的主要应用是表示线性变换，即f（x）= 4 x等线性函数的推广。例如，旋转的载体在三维空间是一个线性变换，...

AlphaWatch 2019-08-05 17:58 评论0 收藏0