如何连接 SVG 与 2 div Jquery

Question

我有 2 个可拖动的 div，我需要连接这些 div 的符号线，我不想使用 canvas，我正在尝试使用 SVG 线，但是我无法理解这个元素的行为，我使用每个元素的位置来填充线条坐标，但没有成功。

我需要将 right/center 元素 1 连接到 left/center 元素 2

看：

           $( document ).ready(function() {
           console.log( "ready!" );
           });

           $('.quadro, .quadro2').draggable({containment: ".principal"});
           $('svg#linha').draggable({containment: ".principal"});

           $('.quadro, .quadro2').on( "drag", function( event, ui ) {

               x1 = $('.quadro').position().left;
               y1 = $('.quadro').position().top;
               x2 = $('.quadro2').position().left;
               y2 = $('.quadro2').position().top;
               $(event.target).children(1).text('left:'+x1+'top:'+y1);

               $("#linha").attr({
                   x1: x1,
                   y1: y1,
                   x2: x2,
                   y2: y2,
               });
           });

.principal {
    display: flex;
    width: 900px;
    height: 900px;
    text-align: center;
    justify-content: space-evenly;
    align-items: center;
}

.quadro {
    background-color: blue;
    width: 200px;
    height: 200px;
}


.quadro2 {
    background-color: brown;
    width: 200px;
    height: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
    <link rel="stylesheet" href="teste.css">

    <title>Title</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
    <link rel="stylesheet" href="teste.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Kanit:wght@200;300&display=swap" rel="stylesheet">
</head>
<body>
    <div class="principal">
        <div class="quadro">
            <h2>DRAG</h2>
        </div>
        <div class="quadro2">
            <h2>DRAG</h2>
        </div>
        <svg height="900" width="900">
          <line id='linha' x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
        </svg>
    </div>




<script src="https://code.jquery.com/jquery-3.6.0.js"  integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


<script>
           $( document ).ready(function() {
           console.log( "ready!" );
           });

           $('.quadro, .quadro2').draggable({containment: ".principal"});
           $('svg#linha').draggable({containment: ".principal"});

           $('.quadro, .quadro2').on( "drag", function( event, ui ) {

               x1 = $('.quadro').position().left;
               y1 = $('.quadro').position().top;
               x2 = $('.quadro2').position().left;
               y2 = $('.quadro2').position().top;
               $(event.target).children(1).text('left:'+x1+'top:'+y1);

               $("#linha").attr({
                   x1: 0,
                   y1: y1,
                   x2: x2,
                   y2: y2,
               });
           });


</script>
</body>
</html>

Answer 1

问题是您的 svg 显示在有限的 space 个框之外。它所需要的只是定位在 absolute 坐标：

//for better performance it's better store elements in a variable instead of use jquery on every event.
let principal = $('.principal'),
    quadro = $('.quadro'),
    quadro2 = $('.quadro2');

$( document ).ready(function() {
  console.log( "ready!" );
  //set width/height of the svg based on it's parent size,
  //this way the sized can be controlled via one place in CSS
  principal.find("svg").attr("height", principal.height()).attr("width", principal.width());
});

$('.quadro, .quadro2').draggable({containment: ".principal"});
$('svg#linha').draggable({containment: ".principal"});

$('.quadro, .quadro2').on( "drag", function( event, ui ) {

  x1 = quadro.position().left;
  y1 = quadro.position().top;
  x2 = quadro2.position().left;
  y2 = quadro2.position().top;

  if (event.target.classList.contains("quadro"))
    $(event.target).children(1).text('left:'+x1+'\ntop:'+y1);
  else
    $(event.target).children(1).text('left:'+x2+'\ntop:'+y2);

  $("#linha").attr({
    x1: x1,
    y1: y1,
    x2: x2,
    y2: y2,
  });
});

html,
body
{
  height: 100%;
}
.principal {
  display: flex;
  width: 900px;
  height: 900px;
  text-align: center;
  justify-content: space-evenly;
  align-items: center;
}

.quadro {
  background-color: blue;
  width: 200px;
  height: 200px;
}


.quadro2 {
  background-color: brown;
  width: 200px;
  height: 200px;
}
.principal > svg
{
  position: absolute;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
    <link rel="stylesheet" href="teste.css">

    <title>Title</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
    <link rel="stylesheet" href="teste.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Kanit:wght@200;300&display=swap" rel="stylesheet">
</head>
<body>
    <div class="principal">
        <svg height="0" width="0">
          <line id='linha' x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(255,0,0);stroke-width:2" />
        </svg>
        <div class="quadro">
            <h2>DRAG</h2>
        </div>
        <div class="quadro2">
            <h2>DRAG</h2>
        </div>
    </div>




<script src="https://code.jquery.com/jquery-3.6.0.js"  integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>



</body>
</html>

P.S。仅供参考，页面加载了 2 个不同版本的 jquery。

如何连接 SVG 与 2 div Jquery

How connect SVG with 2 div Jquery

html

javascript

css

jquery

jquery-ui-draggable