jsplumb教程代码补全

参考教程: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;
  }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容