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&