PTT數位生活區 / Web_Design

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

看板Web_Design作者 (ipad)時間5年前 (2019/03/22 10:36), 5年前編輯推噓3(3推 0噓 6→)
留言9則, 4人參與, 5年前最新討論串1/1
目前想做出幾個物件可以透過拉線，連接想接的物件！（像流程圖那樣） 物件也能拖拉，但線不能斷要跟這移動！ 在網上找過用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
推
03/22 11:00, 5年前 , 1F
mousedown 時 document.createElement('svg')
03/22 11:00, 1F
→
03/22 11:01, 5年前 , 2F
mousemove 時畫 Line, mouseup 時對接完成存物件到陣列
03/22 11:01, 2F
→
03/22 11:02, 5年前 , 3F
拖動物件時把關聯的 svg 重繪起點跟終點座標
03/22 11:02, 3F
→
03/22 11:03, 5年前 , 4F
所以重點是你自己要寫一段 code 把線跟物件的關聯記起來
03/22 11:03, 4F
→
03/22 11:03, 5年前 , 5F
這樣改動物件時你可以從陣列中讀出相關的線一起改變
03/22 11:03, 5F
→
03/22 11:04, 5年前 , 6F
你工作真好，我不愛套件但老闆很愛規定要找套件不能自寫..
03/22 11:04, 6F
推
03/22 14:55, 5年前 , 7F
真假 我以為公司都愛自行開發欸~(? by大學生幻想
03/22 14:55, 7F
推
03/23 13:36, 5年前 , 8F
公司階段不同有差
03/23 13:36, 8F
→
03/30 21:19, 5年前 , 9F
用 d3.js 做過
03/30 21:19, 9F
‣ 更多 pptipad 的文章
文章代碼(AID): #1Sb4eW3p (Web_Design)
Web_Design 近期熱門文章
更多 近期熱門文章 >>
PTT數位生活區 即時熱門文章
更多 即時熱門文章 >>
‣ 更多 pptipad 的文章
文章代碼(AID): #1Sb4eW3p (Web_Design)