我看到了其他一些相关的帖子，但是在将新行添加到SVG之后出现了问题。当我再次拖动点时，看不到div之间的连接。我试图给div和line元素赋予id。
请任何人帮助解决此问题。
这是我的代码，并带有其他代码的改编：
$('.te').click(function(){
var id=0;
id++;
$('.cont').append('<div class="box b1" id="box1'+id+'"></div>')
$(document.createElementNS('http://www.w3.org/2000/svg','line')).attr({
id:"line"+id,
x1:15,
y1:15,
x2:40,
y2:15
}).appendTo("#map");
$('.cont').append('<div class="box b2" id="box2'+id+'"></div>')
$('.box').draggable({
drag:function(){
$('#line'+id).attr({
//id:"line"+id,
x1:$('#box1'+id).offset().left,
y1:$('#box1'+id).offset().top,
x2:$('#box2'+id).offset().left,
y2:$('#box2'+id).offset().top
})
}
})
}).b1{
background-color:black;
height:10px;
width:10px;
position:absolute;
top:20px;
left:20px;
}
.b2{
background-color:black;
height:10px;
width:10px;
position:absolute;
top:20px;
left:50px;
}
.te{
position:absolute;
top:10px;
right:10px;
}
#map{
position:absolute;
top:10px;
left:10px;
height:500px;
width:500px;
border:1px solid black;
z-index:-1
}
line{
stroke:red;
stroke-width:1;
}<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</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>
</head>
<body>
<button class="te">test</button>
<div class="cont"></div>
<svg id="map"></svg>
</body>
</html>已解决！
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</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>
<style>
.b1{
background-color:black;
height:10px;
width:10px;
position:absolute;
top:20px;
left:20px;
}
.b2{
background-color:black;
height:10px;
width:10px;
position:absolute;
top:20px;
left:50px;
}
.te{
position:absolute;
top:10px;
right:10px;
}
#map{
position:absolute;
top:10px;
left:10px;
height:500px;
width:500px;
border:1px solid black;
z-index:-1
}
line{
stroke:red;
stroke-width:1;
}
</style>
</head>
<body>
<button class="te">test</button>
<div class="cont"></div>
<svg id="map"></svg>
<script>
$(document).ready(function(){
var id=0, cuBox1="", cuBox2="", cuLine="";
$('.te').click(function(){
//var id=0, cuBox1="", cuBox2="", cuLine="";
$('.cont').append('<div class="box b1" id="box1'+id+'"></div>')
$(document.createElementNS('http://www.w3.org/2000/svg','line')).attr({
id:'"line'+id+'"',
x1:15,
y1:15,
x2:40,
y2:15
}).appendTo("#map");
$('.cont').append('<div class="box b2" id="box2'+id+'"></div>')
cuBox1="box1"+id;
cuBox2="box2"+id;
cuLine="line"+id;
id++;
// $('#'+cuBox1).draggable();
// $('#'+cuBox2).draggable();
$('.box').draggable({
drag:function(){
$('line').last().attr({
id:cuLine,
x1:$("#"+cuBox1).offset().left,
y1:$('#'+cuBox1).offset().top,
x2:$('#'+cuBox2).offset().left,
y2:$('#'+cuBox2).offset().top
})
}
})
})
})
</script>
</body>
</html>