jsplumb实现树形拖拽简单效果

有一个需求是要求制作一个可拖拽树图的展示效果（可拖拽），由于仅仅是是展示，因此只需实现最简单的即可，这里使用到的插件便是jsplumb。

1.首先先安装jsplumb

npm install jsplumb

2.在需要使用的页面引入：

import {jsPlumb} from 'jsplumb'

3.新建一个jsplumb_instance对象（通过其进行相关操作）：

let plunbInstance = jsPlumb.getInstance();

4.首先先调用jsplumb_instance对象中的ready方法，里面的参数是一个回调函数：

plunbInstance.ready(function() {
    //相关操作
});

5.使用connect开始进行连接

里面通过source与target决定链接的起始，两个变量对应的值是指定dom的id（注：此dom的定位应设置为absolute等）：

html部分（仅参考）：

    <div class="outter">
      <div class="line-part">
        <div id="item_1" class="inner">card1</div>
        <div id="item_2" class="inner" style="left: 150px;">card2</div>
        <div id="item_3" class="inner" style="top: 150px;">card3</div>
      </div>
    </div>

下面创建了两个链接：

      plunbInstance.connect({
        source: 'item_1',
        target: 'item_2',
      })
      plunbInstance.connect({
        source: 'item_1',
        target: 'item_3',
      })

此时图中的效果基本就出来了

6.优化项：

（1）但通过上图，你会很明显的发现线的样式比较乱，可以通过在connent里面的对象中添加connector为直线等方法使其变直。

connector: ['Straight']

（2）通过上图我们还发现线横穿了card，这是因为锚点（anchor）设置不合理导致的，再添加锚点设置为自适应即可：

anchor:"Continuous",

7.实现节点拖拽。

jsplumb_instance对象中提供draggable方法可以使其实现拖拽效果，直接对每一个关联节点使用即可。

    let nodeList = document.querySelectorAll('.inner');
    nodeList.forEach((node) => {
      plunbInstance.draggable(node)
        // 下面一行可以防止线的端点被拖拽从而导致因没有配置而消失
      plunbInstance.addEndpoint(node)
    })

那么整体的 简单版 效果就实现了（下图为拖拽后效果）：

下面为整体参考代码：（html部分见上文）

css部分（注意一定要设置absolute）

<style lang="less">
.outter {
  background-color: #fff;
  .line-part {
    display: block;
    .inner {
      width: 100px;
      height: 50px;
      background-color: aliceblue;
      line-height: 50px;
      text-align: center;
      border: 1px solid lightseagreen;
      display: inline-block;
      margin: 20px;
      position: absolute;
    }
  }
}
</style>

 js部分：

  mounted() {
    let plunbInstance = jsPlumb.getInstance();
    plunbInstance.ready(function() {
      plunbInstance.connect({
        source: 'item_1',
        target: 'item_2',
        anchor:"Continuous",
        connector: ['Straight']
      })
      plunbInstance.connect({
        source: 'item_1',
        target: 'item_3',
        anchor:"Continuous",
        connector: ['Straight']
      })
    });

    let nodeList = document.querySelectorAll('.inner');
    nodeList.forEach((node) => {
      plunbInstance.draggable(node)
      plunbInstance.addEndpoint(node)
    })
  }

 

希望本文会对您有所帮助^_^