[請益] 可以拉線拖曳的效果怎麼做呢？

[pptipad (ipad)]

目前想做出幾個物件可以透過拉線，連接想接的物件！（像流程圖那樣）

物件也能拖拉，但線不能斷要跟這移動！
在網上找過用flow chart跟jsPlumb但公司希望我不要用那些套件，因此實作上完全不知
如何著手，想請問如附圖這效果如何完成心願呢？
https://i.imgur.com/JrkqRpk.jpg


謝謝各位大俠的圍觀與幫助！感恩

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 39.8.76.13
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1553222176.A.0F3.html
※ 編輯: pptipad (39.8.76.13), 03/22/2019 10:37:07
推 shter: mousedown  時  document.createElement('svg')
→ shter: mousemove 時畫 Line,  mouseup 時對接完成存物件到陣列
→ shter: 拖動物件時把關聯的 svg 重繪起點跟終點座標
→ shter: 所以重點是你自己要寫一段 code 把線跟物件的關聯記起來
→ shter: 這樣改動物件時你可以從陣列中讀出相關的線一起改變
→ shter: 你工作真好，我不愛套件但老闆很愛規定要找套件不能自寫..
推 HenryLiKing: 真假  我以為公司都愛自行開發欸~(? by大學生幻想
推 ymcheung: 公司階段不同有差
→ JPMini: 用 d3.js 做過