對齊SVG：將可拖動的形狀與直線連接（即使拖動后，直線也應保持連接狀態）

Question

我認為我再次需要您的幫助。 我創建了3個svg矩形，我的目標是能夠用一條線將任意兩個矩形連接在一起。 問題是我的矩形是可拖動的，並且如果兩個矩形連接在一起，則它們需要保持連接狀態。 我做了一個jsbin來測試它：

https://jsbin.com/moxiyugovo/edit?html,js，控制台，輸出

可以通過單擊頂部的紫色圖標，然后在要連接的形狀上單擊一次來完成連接。

我的問題是以這種方式可以用一條線連接2個形狀，但是當我要建立另一個連接時，前一條線消失了。 我知道發生這種情況是因為我為我創建的每個新行都使用了相同的var名稱（L），因此它們傾向於彼此重疊。 如何區分這些線？ 假設我想將2個藍色矩形相互連接，並將2個紅色矩形相互連接，並保持這種方式，以便在拖動其中任何一個時，相應的線點都“跟隨”該形狀。 預先感謝任何簽出的人。

PS：用戶是需要選擇要連接的形狀的用戶，因此無法進行預連接。

Answer 1

我找到了一種方法，即使不建議使用全局變量作為一行。 它是可以使用的，但是當我有空閑時間時，我將需要對其進行編輯並使它變得更好。 但是對於那些對我的意思感興趣的人來說，這里是個垃圾桶：

https://jsbin.com/gudabijatu/edit?html,js，輸出