两个div间创建连线

最新推荐文章于 2023-10-24 20:19:05 发布

weixin_43179300

最新推荐文章于 2023-10-24 20:19:05 发布

阅读量5.1k

点赞数 2

本文链接：https://blog.csdn.net/weixin_43179300/article/details/110127645

版权

效果：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        position: relative;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }
      body,
      html {
        width: 100%;
        height: 100%;
      }
      .one {
        position: absolute;
        top: 100px;
        left: 100px;
      }
      .two {
        position: absolute;
        top: 300px;
        left: 300px;
        cursor: pointer;
      }
      svg {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div class="one">one</div>
    <div class="two">two</div>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <line id="line" style="stroke:rgb(255,0,0);stroke-width:2" />
    </svg>
  </body>
  <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script>
    var startX = $(".one").offset().left + $(".one").width();
    var startY = $(".one").offset().top + $(".one").height() / 2;
    var endX = $(".two").offset().left;
    var endY = $(".two").offset().top + $(".two").height() / 2;
    // console.log(startX, startY, endX, endY);
    $("#line").attr({ x1: startX, y1: startY, x2: endX, y2: endY });

    var flag = false;
    $(".two")[0].onmousedown = function() {
      flag = true;
    };

    document.onmousemove = function() {
      if (flag == true) {
        // console.log("111111111");
        var endX = event.clientX;
        var endY = event.clientY;
        // console.log("endX", endX);
        // console.log("endY", endY);
        $(".two").css({ left: endX, top: endY });
        $("#line").attr({ x1: startX, y1: startY, x2: endX, y2: endY });
      }
    };
    document.onmouseup = function() {
      flag = false;
    };
    // $("#line").attr({ x1: "100", y1: "100", x2: "500", y2: "520" });
  </script>
</html>

weixin_43179300

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
4
评论
两个div间创建连线

效果：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> &lt
复制链接

扫一扫