美文网首页
jsplumb教程代码补全

jsplumb教程代码补全

作者: _SinF_ | 来源:发表于2018-07-18 15:19 被阅读0次

    参考教程: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;
      }
    

    相关文章

      网友评论

          本文标题:jsplumb教程代码补全

          本文链接:https://www.haomeiwen.com/subject/sfbopftx.html