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
版权声明：本文为博主原创文章，转载请附上博文链接！