我只想用JQuery和JavaScript在元素之间划一条线

问题: 我在第一行和第二行有许多“div”，我可以创建一个带有“pageY”和“pageX”以及位置的

矩形，但我想创建一个
行


有人知道我怎么做吗？


详细信息：当用户第一次单击两个点时，将创建一条线，并向点添加一个类以提高可见性。

用户第二次单击时，将删除类，然后，如果没有为两点添加类，则会再次创建新行。

如果用户单击某行，该行将被删除。

当我谈到“线”时，我指的是我想用线代替的“矩形”。


下面是我的JS代码：

让pTop=''，pLeft=''，pbotom=''，pRight=''；
$（'.row-rope-1.pin'）.off（'click'）.on（'click'，函数（左上角）{
if（$（this）.hasClass（'rope-loop'））{
$（this.removeClass（'rope-loop'）；
pTop=''；
pLeft=“”；
}否则{
$（this.addClass（'rope-loop'）；
pTop=$（this）.offset（）.top+37；
pLeft=$（this）.offset（）.left；
}
createElement（）；
});
$（'.row-rope-2 button.pin'）.off（'click'）.on（'click'，函数（右下角）{
if（$（this）.hasClass（'rope-loop'））{
$（this.removeClass（'rope-loop'）；
pBottom=''；
pRight=''；
}否则{
$（this.addClass（'rope-loop'）；
pBottom=$（this）.offset（）.top+37；
pRight=$（this）.offset（）.left；
}
createElement（）；
});
函数createElement（）{
设FpTop、FpLeft、FpBottom、FpRight；
如果（pTop！=''&&pLeft！=''&&PBOTOM！=''&&pRight！=''）{
让line=document.createElement（“span”）；
setAttribute（'class'，'rope-line'）；
FpTop=pTop；
FpLeft=pLeft；
FpBottom=pBottom；
FpRight=pRight；
如果（pLeft>pRight）{
FpLeft=pRight；
FpRight=pLeft；
}
如果（pTop>pbotom）{
FpTop=pBottom；
FpBottom=pTop；
}
line.setAttribute（'style'，'top:'+FpTop+'px；left:'+FpLeft+'px；bottom:calc（100%-'+FpBottom+'px）；right:calc（100%-'+FpRight+'px）；）；
$（'body'）。追加（行）；
pTop=''；
pLeft=“”；
pBottom=''；
pRight=''；
removeElement（）；
}
}
函数removeElement（）{
$（'.rope line'）。关闭（'click'）。打开（'click'，函数（）{
$（this.remove（）；
});
}

span.rope-line{
位置：绝对位置；
背景颜色：黄色；
光标：指针；
z指数：9；
}

让pTop=''，pLeft=''，pbotom=''，pRight=''；
$（'.row-rope-1.pin'）.off（'click'）.on（'click'，函数（左上角）{
if（$（this）.hasClass（'rope-loop'））{
$（this.removeClass（'rope-loop'）；
pTop=''；
pLeft=“”；
}否则{
$（this.addClass（'rope-loop'）；
pTop=$（this）.offset（）.top+37；
pLeft=$（this）.offset（）.left；
}
createElement（）；
});
$（'.row-rope-2 button.pin'）.off（'click'）.on（'click'，函数（右下角）{
if（$（this）.hasClass（'rope-loop'））{
$（this.removeClass（'rope-loop'）；
pBottom=''；
pRight=''；
}否则{
$（this.addClass（'rope-loop'）；
pBottom=$（this）.offset（）.top+37；
pRight=$（this）.offset（）.left；
}
createElement（）；
});
函数createElement（）{
设FpTop、FpLeft、FpBottom、FpRight；
如果（pTop！=''&&pLeft！=''&&PBOTOM！=''&&pRight！=''）{
让line=document.createElement（“span”）；
setAttribute（'class'，'rope-line'）；
FpTop=pTop；
FpLeft=pLeft；
FpBottom=pBottom；
FpRight=pRight；
如果（pLeft>pRight）{
FpLeft=pRight；
FpRight=pLeft；
}
如果（pTop>pbotom）{
FpTop=pBottom；
FpBottom=pTop；
}
line.setAttribute（'style'，'top:'+FpTop+'px；left:'+FpLeft+'px；bottom:calc（100%-'+FpBottom+'px）；right:calc（100%-'+FpRight+'px）；）；
$（'body'）。追加（行）；
pTop=''；
pLeft=“”；
pBottom=''；
pRight=''；
removeElement（）；
}
}
函数removeElement（）{
$（'.rope line'）。关闭（'click'）。打开（'click'，函数（）{
$（this.remove（）；
});
}

span.rope-line{
位置：绝对位置；
背景颜色：黄色；
光标：指针；
z指数：9；
}


第1点
第2点
第3点
第4点

如果您能帮我找到最简单的方法，我将不胜感激：）。

谢谢。
您可以使用CSS transform和transform origin。计算距离和角度，可以在二维空间中连接两个点


让selectedPin=null；
$（'.pin'）。在（'click'，函数（）{
设pin=$（这个）；
如果（selectedPin==null）{
selectedPin=pin；
返回；
}
让selectedPinPos={
x:selectedPin.offset（）.top，
y:已选择PIN.offset（）.左
}
让我们来看一下：{
x:pin.offset（）.top，
y:pin.offset（）.左
}
让距离=计算距离（选定的精确定位，精确定位）；
让角度=90度角（选择精确定位，精确定位）；
$（'#rope'）.css({
变换：“旋转（“+角度+”度）”，
宽度：距离+'px'，
顶部：selectedPinPos.x，
左：选择精确定位。y
});
selectedPin=null；
});
功能钙距离（p1、p2）
{
var dx=p2.x-p1.x；
变量dy=p2.y-p1.y；
返回Math.sqrt（dx*dx+dy*dy）；
}
函数角（p1，p2）
{
返回Math.atan2（p2.y-p1.y，p2.x-p1.x）*180/Math.PI；
}
span.rope-line{
位置：绝对位置；
背景颜色：黄色；
光标：指针；
z指数：9；
}
#绳索{
位置：绝对位置；
顶部：20px；
左：20px；
背景：#f00；
宽度：0；
高度：2倍；
变换：旋转（80度）；
变换原点：0%0%；
}

第1点
第2点
第3点