1.重點參考博文

https://blog.csdn.net/j_bean/article/details/78092647

2.關鍵點總結

1)實現可視區域圖形畫滿后，拖動整個畫布的效果

a.最好不要給畫圖形的容器預設置很大的寬、高，這樣遇到鉆牛角尖的用戶還是會將畫布拖到邊界。

b.換個思維，拖動畫布時，修改畫布上畫好的圖形的left、top值。比如向右拖動時，增大畫布上畫好的

所有圖形left值。這樣看起來的效果好像畫布像右動了，其實本質上是畫布上東西像右了，而畫布并

沒有真的移動。

而且這樣實現后，無論用戶像哪個方向拖動，永遠也拖不到盡頭

c.修改畫好的圖形的css樣式后，記得最后調用jsPlumb.repaintEverything()，來重新繪制畫面。

否則端點會與圖形脫離。

d.鼠標拖動效果如果不借助任何插件，可以用onmousedown、onmousemove、onmouseup三個事件共同

配合實現。

onmousedown當鼠標按下：設置按下標志置為true，并記錄當前的鼠標指針的位置

onmousemove當鼠標移動：判斷鼠標按下標志，如果按下了，則開始拖動邏輯(即修改被拖動

元素的css樣式)。用當前鼠標位置和onmousedown事件記錄的位置就能

計算出拖動的距離。

onmouseup當鼠標抬起：將鼠標按下標志置為false

2)jsPlumb.bind()方法可以給線綁定事件

3)兩個圖形之間只能畫1條線的效果

jsPlumb.bind("connection", function (conn, originalEvent) {

//查看被連接的兩個點間是否已經連接過

var conns=jsPlumb.getConnections({

source:conn.sourceId,

target:conn.targetId

});

//如果大于1條，則不在進行連接

if(conns.length>1){

jsPlumb.detach(conn);

}

});

4)當一個圖形上有多個點，用jsPlumb.connect()方法控制畫具體哪兩個端點間的線，使用uuids

a.? jsPlumb.connect( {uuids:[sourceUUid,targetUUid]} )//畫具體哪兩個點間的線

jsPlumb.connect( {source:123,target:456} )//用這個時jsplumb會隨機的選擇圖形上的兩個端點進行連接

b.? uuid屬于endpoint，uuid在添加端點時指定

var? port = jsPlumb.addEndpoint(id, { anchors: "TopCenter",uuid:123456789}, upport);

port.getUuid()//獲得端點的uuid

3)重要api

connection.getUuids()//獲得連接線兩個端點的UUID，返回為一個數組 [sourceUuid, targetUuid]

jsPlumbUtil.uuid()?//生成id

4)放大縮小

https://bitqiang.gitbooks.io/jsplumb/content/Chapter1_IMPORTS_AND_SETUP/section1.html

---------------------

作者：join_null

來源：CSDN

原文：https://blog.csdn.net/join_null/article/details/80266993

版權聲明：本文為博主原創文章，轉載請附上博文鏈接！

原文：https://www.cnblogs.com/zzsdream/p/10913815.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的jsplumb拖线_基于jsplumb插件制作可拖拽、保存流程图、重绘保存后的流程图总结...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。