vue3.x 使用jsplumb进行多列拖拽连线

前言：

最近很多小伙伴问到使用jsplumb进行多列拖拽连线怎么实现？
下面介绍vue3.x 使用jsplumb进行多列拖拽连线示例，以三列举例：

1. 安装 npm install --save jsplumb
2. 引入

<script lang="ts" setup>
  import {ref, reactive,onMounted} from 'vue'
  import jsPlumb from 'jsplumb'
</script>

3. 使用
   

<template>
    <h3>jsplumb使用 ( 多列 )</h3>
    <div id="container">
        <div class="col1">
            <div v-for="item in list1" :key="item.nodeId" :id="item.nodeId" name="source">{{ item.name }}</div>
        </div>
        <div class="col2">
            <div v-for="item in list2" :key="item.nodeId" :id="item.nodeId" name="center">{{ item.name }}</div>
        </div>
        <div class="col3">
            <div v-for="item in list3" :key="item.nodeId" :id="item.nodeId" name="target">{{ item.name }}</div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import jsPlumb from 'jsplumb'
//jsplumb使用
let $jsPlumb = jsPlumb.jsPlumb;
let jsPlumb_instance = null; // 缓存实例化的jsplumb对象
const list1 = reactive([
    { name: "name1", nodeId: "name1" },
    { name: "name2", nodeId: "name2" },
    { name: "name3", nodeId: "name3" },
    { name: "name4", nodeId: "name4" },
    { name: "name5", nodeId: "name5" },
    { name: "name6", nodeId: "name6" }
]);
const list2 = reactive([
    { name: '数据2-1', nodeId: 'data2-1' },
    { name: '数据2-2', nodeId: 'data2-2' },
    { name: '数据2-3', nodeId: 'data2-3' },
    { name: '数据2-4', nodeId: 'data2-4' },
    { name: '数据2-5', nodeId: 'data2-5' },
    { name: '数据2-6', nodeId: 'data2-6' }
]);
const list3 = reactive([
    { name: '数据3-1', nodeId: 'data3-1' },
    { name: '数据3-2', nodeId: 'data3-2' },
    { name: '数据3-3', nodeId: 'data3-3' },
    { name: '数据3-4', nodeId: 'data3-4' },
    { name: '数据3-5', nodeId: 'data3-5' },
    { name: '数据3-6', nodeId: 'data3-6' }
]);

onMounted(() => {
    showPlumb();
})

const showPlumb = () => {
    jsPlumb_instance = $jsPlumb.getInstance({
        Container: 'container', // 选择器id
        EndpointStyle: { radius: 0.11, fill: '#fff' }, // 端点样式
        PaintStyle: { stroke: '#000', strokeWidth: 2 }, // 绘画样式，默认8px线宽  #456
        HoverPaintStyle: { stroke: '#1E90FF' }, // 默认悬停样式  默认为null
        ConnectionOverlays: [ // 此处可以设置所有箭头的样式，因为我们要改变连接线的样式，故单独配置
            ['Arrow', { // 设置参数可以参考中文文档
                location: 1,
                length: 10,
                paintStyle: {
                    stroke: '#000',
                    fill: '#000'
                }
            }]
        ],
        Connector: ['Straight'], // 要使用的默认连接器的类型：直线，折线，曲线等
        DrapOptions: { cursor: 'crosshair', zIndex: 2000 }
    },)

    console.log(jsPlumb_instance)

    jsPlumb_instance.batch(() => {

        for (let i = 0; i < list1.length; i++) {
            initLeaf(list1[i].nodeId, 'source')
        }
        for (let i = 0; i < list2.length; i++) {
            initLeaf(list2[i].nodeId, 'center')
        }
        for (let i = 0; i < list3.length; i++) {
            initLeaf(list3[i].nodeId, 'target')
        }
    })


    jsPlumb_instance.bind('click', (conn, originalEvent) => {
        jsPlumb_instance.deleteConnection(conn)
    })

}

// 初始化具体节点
const initLeaf = (id, type) => {
    const ins = jsPlumb_instance;
    const elem = document.getElementById(id)
    if (type == 'source') {
        ins.makeSource(elem, {
            anchor: 'Right',
            allowLoopback: false,
            maxConnections: 1
        })
    } else if (type == 'center') {//中间列，即能主动连接，也能被动连接
        ins.makeSource(elem, {
            anchor: 'Right',
            allowLoopback: false,
            maxConnections: 1
        })
        ins.makeTarget(elem, {
            anchor: 'Left',
            allowLoopback: false,
            maxConnections: 1
        })
    } else {
        ins.makeTarget(elem, {
            anchor: 'Left',
            allowLoopback: false,
            maxConnections: 1
        })
    }
}

</script>

<style scoped lang="less">
#container {
    position: relative;
    margin-top: 20px;
    width: 100%;
    height: 300px;
}

.col2,
.col1,
.col3 {
    float: left;
    text-align: center;
}

.col1 {
    width: 80px;
}

.col2 {
    width: 120px;
    margin-left: 80px;
}

.col3 {
    width: 120px;
    margin-left: 80px;
}

#container>div>div {
    line-height: 30px;
    margin: 0 0 17px 0;
    background: #ef631e;
    color: #fff;
}
</style>

小伙伴们对jsplumb感兴趣的话，可以查看我的其他几篇关于jsplumb文章。