参考教程:https://segmentfault.com/a/1190000013422507#articleHeader5
最近在学习利用js绘制流程图,参考了部分博客,d3.js学习成本高昂,且跟react相关,遂放弃。,决定使用jsplumb.js来绘制。
发现这篇博客入门还不错,代码也很清晰。从控制台补充扒了一些css代码,这样更便于学习。
2.0 连接两个节点
#diagramContainer {
padding: 20px;
width: 80%;
height: 200px;
border: 1px solid gray;
}
.item {
height: 80px;
width: 80px;
border: 1px solid blue;
float: left;
}
2.1 可拖动节点
#diagramContainer {
padding: 20px;
width: 80%;
height: 200px;
border: 1px solid gray;
}
.item {
position: absolute; // 此处增加position的设置,使得<div>块可以停留在拖动后的位置
height: 80px;
width: 80px;
border: 1px solid blue;
// float: left;
}