如何拖曳線段讓兩個物件接起來?

#jquery #jqueryui #javascript

COCO 2019-03-21 13:42:50 ‧ 1816 瀏覽

分享至

想問各位大神如何拖曳其中一個黑色小方塊拉出一條線連到另外一個方塊上呢?
想了3天還是不知道怎麼實作出來?

leonliu777 iT邦新手 5 級 ‧ 2019-03-21 14:20:59 檢舉

css clip-path 用多邊形拉很細黑底當作是線試試看 (我沒做過但是感覺可行

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

居然解出來了

iT邦好手 1 級 ‧ 2019-03-21 13:55:15

可參考這篇:https://www.cnblogs.com/dyllove98/p/3221763.html

回應 6
分享
檢舉

看更多先前的回應...收起先前的回應...

Homura iT邦高手 1 級 ‧ 2019-03-21 14:13:02 檢舉

這是要叫他用Canvas來畫嗎?@@

COCO iT邦新手 5 級 ‧ 2019-03-21 14:15:41 檢舉

其實我有實作過類似用canvas畫~但是日後我要做到的效果是拖動其中一個物件(DIV)那個線會跟著跑~

居然解出來了 iT邦好手 1 級 ‧ 2019-03-21 14:50:41 檢舉

那可能要用jsPlumb個人覺得這是目前最符合你需求的做法xd
若簡單來說就是每次你移動就必須將線條擦拭掉在重畫

居然解出來了 iT邦好手 1 級 ‧ 2019-03-21 14:58:08 檢舉

https://codepen.io/jimid/pen/zyxMJY?page=1&

淺水員 iT邦大師 6 級 ‧ 2019-03-21 15:54:37 檢舉

如果要自己寫的話，感覺 svg 會比 canvas 容易實作。

COCO iT邦新手 5 級 ‧ 2019-03-21 15:59:26 檢舉

是要自己寫喔~有想過用jsPlumb
但是成品可能會發很多線,去接到每個div~
但如果有兩個物件距離比較遠,又不希望連接線蓋到其他物件~
似乎jsPlumb無法解決這個問題~才想說自己寫看看!!
哈哈~但自己寫似乎以我目前的程度是有點難度!

還是謝謝大家的藥方啊!

登入發表回應

海綿寶寶

iT邦大神 1 級 ‧ 2019-03-21 14:56:24

jsPlumb+1

回應
分享
檢舉

登入發表回應

我要發表回答

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22077 篇

完賽人數

594 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙