Javascript 当div1和div2在同一行中时，连接线是隐藏的

有两个div，即box1和box2，通过

.line

连接。当

box2

左侧的“box1”或“box2”右侧的

box1

时，连接线工作正常。但是，如果两者位于同一行中（一个在顶部，另一个在底部），线路将被删除

当DIV位于同一线路中时，为什么要拆下连接线路

$（函数（）{
$（'.box'）.draggable（）.on（'drag'，函数（）{
var x1=$（'.box1'）.position（）.left；
变量y1=$（'.box1'）.position（）.top；
var x2=$（'.box2'）.position（）.left；
变量y2=$（'.box2'）.position（）.top；
如果（x1>x2）{
var x3=x1；
变量y3=y1；
x1=x2；
y1=y2；
x2=x3；
y2=y3；
}
如果（x1==x2）{
$（'.line'）.css({
高度：数学绝对值（y2-y1），
左：x1+（$（'.box1'）.width（）/2），
宽度：1，
“-webkit变换”：“旋转（0度）”，
“-moz变换”：“旋转（0度）”，
“-ms变换”：“旋转（0度）”，
“-o变换”：“旋转（0度）”，
“变换”：“旋转（0度）”，
“缩放”：1
});
}else{//else计算角度并旋转直线
变量a=（y2-y1）/（x2-x1）；
var弧度=数学常数（a）；
var度=弧度*（180/数学π）；
$（'.line'）.css({
顶部：y1+（$（'.box1'）.height（）/2），
左：x1+（$（'.box1'）.width（）/2），
宽度：数学绝对值（x2-x1），
身高:1,，
“转换原点”：“0”，
“-webkit变换”：“旋转（“+度+”度）”，
“-moz变换”：“旋转（“+度+”度）”，
“-ms变换”：“旋转（“+度+”度）”，
“-o变换”：“旋转（“+度+”度）”，
“变换”：“旋转（“+度+”度）”，
“缩放”：1
});
}
});
});
.box{draggable:true；位置：绝对；宽度：100px；高度：100px；背景：红色；光标：移动；}
.box1{top:25px；}
.box2{左：200px；}
.line{高度：1px；宽度：1px；背景：蓝色；位置：绝对；-moz变换原点：0%0%；-webkit变换原点：0%0%；变换原点：0%0%；}
当x1！=x2：


在JS中：

Math.sqrt(Math.pow((x2 - x1), 2) + Math.pow((y2 - y1), 2))


$（函数（）{
$（'.box'）.draggable（）.on（'drag'，函数（）{
var x1=$（'.box1'）.position（）.left；
变量y1=$（'.box1'）.position（）.top；
var x2=$（'.box2'）.position（）.left；
变量y2=$（'.box2'）.position（）.top；
如果（x1>x2）{
var x3=x1；
变量y3=y1；
x1=x2；
y1=y2；
x2=x3；
y2=y3；
}
如果（x1==x2）{
$（'.line'）.css({
高度：数学绝对值（y2-y1），
左：x1+（$（'.box1'）.width（）/2），
宽度：1，
“-webkit变换”：“旋转（0度）”，
“-moz变换”：“旋转（0度）”，
“-ms变换”：“旋转（0度）”，
“-o变换”：“旋转（0度）”，
“变换”：“旋转（0度）”，
“缩放”：1
});
}else{//else计算角度并旋转直线
变量a=（y2-y1）/（x2-x1）；
var弧度=数学常数（a）；
var度=弧度*（180/数学π）；
$（'.line'）.css({
顶部：y1+（$（'.box1'）.height（）/2），
左：x1+（$（'.box1'）.width（）/2），
宽度：Math.sqrt（Math.pow（（x2-x1），2）+Math.pow（（y2-y1），2）），
身高:1,，
“转换原点”：“0”，
“-webkit变换”：“旋转（“+度+”度）”，
“-moz变换”：“旋转（“+度+”度）”，
“-ms变换”：“旋转（“+度+”度）”，
“-o变换”：“旋转（“+度+”度）”，
“变换”：“旋转（“+度+”度）”，
“缩放”：1
});
}
});
});
.box{draggable:true；位置：绝对；宽度：100px；高度：100px；背景：红色；光标：移动；}
.box1{top:25px；}
.box2{左：200px；}
.line{高度：1px；宽度：1px；背景：蓝色；位置：绝对；-moz变换原点：0%0%；-webkit变换原点：0%0%；变换原点：0%0%；}

您的代码在哪里？你需要在你的房间里有一个房间question@j08691问题中添加了代码。预期的行为是什么？线并不总是精确地画在每个正方形的中心，这不仅发生在一个正方形高于另一个正方形时。预期的行为是连接线必须始终连接且可见