基於jsplumb插件製做可拖拽、保存流程圖、重繪保存後的流程圖總結

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 版權聲明：本文爲博主原創文章，轉載請附上博文連接！