stackoom
  简体   繁体   中英

How connect SVG with 2 div Jquery

 原文  2021-04-25 01:02:12  6   1    javascript/ html/ jquery/ css/ jquery-ui-draggable

Question

I have 2 draggable div and I need to connect these divs usign line, I would'nt like to use canvas, I'm trying usign SVG line, however I can't understand behaviour of this element, I'm usign position of each element to fill lines coordinates, but no success.

I need connect right/center element 1 to left/center element2

look: 

 $( 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>

1 answers

solution1
 0 ACCPTED  2021-04-25 16:23:08

The problem is your svg displayed outside limited space of boxes. All it needed was to position at absolute coordinates: 

 //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>

PS FYI you have 2 different versions of jquery loaded with the page.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question jQuery script - scroll to div by SVG id Keith Wood JQuery SVG: the SVG does not drawn in the div How to place svg inside the div How to center a svg in a div container How to scale div containing SVG? How to remove svg inside a div How to add div after svg to an existing div How to animate existing SVG element with jQuery svg? How to include jQuery SVG source in SVG? How to move a SVG using jQuery SVG?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM