分类导航

程序问答发布时间：2022-06-02 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了如何将 SVG 与 2 div Jquery 连接起来，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决如何将 SVG 与 2 div Jquery 连接起来？

开发过程中遇到如何将 SVG 与 2 div Jquery 连接起来的问题如何解决？下面主要结合日常开发的经验，给出你关于如何将 SVG 与 2 div Jquery 连接起来的解决方法建议，希望对你解决如何将 SVG 与 2 div Jquery 连接起来有所启发或帮助；

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

我需要将右/中心元素 1 连接到左/中心元素 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,});
           });@H_944_14@
.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;
}@H_944_14@
<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);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,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,});
           });


</script>
</body>
</HTML>@H_944_14@

解决方法

问题是您的 svg 显示在有限的盒子空间之外。它所需要的只是定位在 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,});
});@H_944_14@
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;
}@H_944_14@
<!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);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>@H_944_14@

附言仅供参考，您在页面上加载了 2 个不@R_379_11197@的 jquery。

大佬总结

以上是大佬教程为你收集整理的如何将 SVG 与 2 div Jquery 连接起来全部内容，希望文章能够帮你解决如何将 SVG 与 2 div Jquery 连接起来所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：2 div 与如何将连接起来

上一篇: 想知道为什么 xarray 在读取我的... 下一篇:如何不让 firebase 函数进入睡眠...

猜你在找的程序问答相关文章

在烧瓶中重定向时发出POST请求 2022-06-02
从 CreateWindow() 返回的 HWND 的格式值是多少？ 2022-05-31
使用nodejs打印json对象内容 2022-05-31
useEffect 无限循环仅在测试时发生，否则不会发生 - 尽管使用 useReducer 2022-05-31
从雅虎财经检索 ESG 分数 2022-05-31
Gulp：获取“必须指定任务功能”错误，但我只有 1 个任务 2022-05-31
JavaScript 将平面数组转换为嵌套/分组和排序数组 2022-05-31
405 Method Not Allowed 当提交表单到 Flask 时，即使路由有 ['GET', 'PO... 2022-05-31
Mongodb 错误码和对应的 http 状态码 2022-05-31
连接到上游时 Nginx connect() 失败（111：连接被拒绝），客户端：192.168.128.1，服务... 2022-05-31