需求：vue+svg实现连线功能

问题描述：如标题所示

参考了svg.js和jquery实现连线功能

需求：
1.右侧两个方框可以合成一个bond，点击bond之后又可以恢复。
2.一对一连接
3.有回显功能

package.json
@svgdotjs/svg.js: “^3.1.1”

解决方法:
svg_style.css

.draw-container {
   
    position: relative;
    margin-top: 50px;
}

.data-list {
   
    position: absolute;
}

.question-list {
   
    left: 8%;
}

.answer-list {
   
    right: 10%;
}


.question-list li, .answer-list li {
   
    width: 113px;
    background: #FFFFFF;
    border-radius: 7px;
    margin-bottom: 16px;
    line-height: 56px;
    text-align: center;
    box-shadow: 0px 2px 9px 0px rgba(0, 0, 0, 0.14);
}

.question-list li {
   
    border-left: 2px solid #F57474;
    cursor: crosshair;
}


.answer-list li {
   
    border-left: 2px solid #4F90F0;
    position: relative;
    cursor: pointer;
}

.hover-g {
   
    cursor: pointer;
    opacity: 1;
    stroke-width: 4;
}

.bondGray, .bondBlue {
   
    width: 116px;
    height: 56px;
    box-shadow: 0px 2px 9px 0px rgba(0, 0, 0, 0.14);
    border-radius: 7px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    color: #ffffff;
    margin-bottom: 16px;
    position: relative;
    cursor: pointer;
}


.bondGray {
   
    background: #c6c6c6 !important;
    border-left: 2px solid #c6c6c6 !important;
}

.bondBlue {
   
    background: #4F90F0 !important;
}

.infoListStyle {
   
    /*width: 120px;*/
    height: 20px;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    border-radius: 2px;
    position: absolute;
    left: 113px;
    top: 5px;
    cursor: default;
    margin-right: 10px;
    display: flex;
    pointer-events: none;
}

.netcardStyle {
   
    width: 90px;
    color: #659EF3;
    background: #D6E6FF;
    top: 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-right: 5px;
}

.speedStyle {
   
    max-width: 100px;
    height: 20px;
    font-size: 16px;
    line-height: 20px;
    text-align: left;
    color: #333;
    margin-right: 10px;
    cursor: default;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

}


.bondGray > div:last-child {
   
    top: 30px
}

.bondBlue > div:last-child {
   
    top: 30px
}

link.vue

<template>
    <div class="xx_info">
        <div class="link_box container">
            <div class="link_warp">
                <div class="draw-container" id="draw" ref="drawDom">
                    <ul class="left_box question-list data-list">
                        <li
                            v-for="(item, index) in netList"
                            :key="index"
                            :data-question="item.name"
                            :data-answer="item.value"
                            class="question-li"
                            ref="leftBox"
                            style="user-select: none"
                        >
                            {
   {
    item.name }}
                        </li>
                    </ul>
                    <ul class="right_box answer-list data-list" ref="dataListBox">
                        <li
                            v-for="(item, index) in dataList"
                            :key="index"
                            :style="item.status == 'No' ? 'border-left:2px solid #C6C6C6' : ''"
                            :data-answer="item.name"
                            class="answer-li"
                            ref="rightBox"
                            draggable="true"
                            @dragstart.stop="startDrag($event, item)"
                            @dragover.stop="overDrop($event)"
                            @drop.stop="endDrop($event, index, item)"
                        >
                            {
   {
    item.name }}
                        </li>
                    </ul>
                </div>
                <ul class="info">
                    <li>
                        <p class="color_red"></p>
                        <p class="title">xx</p>
                    </li>
                    <li>
                        <p class="color_blue"></p>
                        <p class="title">xx(已通)</p>
                    </li>
                    <li>
                        <p class="color_gray"></p>
                        <p class="title">xx未通)</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import {
   SVG} from "@svgdotjs/svg.js";

export default {
   
    name: "index",
    data() {
   
        return {
   

            //  左侧数据
            netList: [
                {
   
                    name: "1"
                },
                {
   
                    name: "2"
                },
                {
   
                    name: "3"
                },
                {
   
                    name: "4"
                },
                {
   
                    name: "5"
                }
            ],
            // 右侧数据
            dataList: [],
            //svg
            draw: null,
            // 保存数据
            lineArr: [],
            currentInfo: {
   },
            //bond 第一个数据element
            startLi: null,
            //bond 第一个数据
            startData: null,
            newArr: [],
            scrollTop: 0
        };
    },
    methods: {
   
     
        /**
         * 连线操作
         */
        // 合并开始
        startDrag(e, val) {
   
            this.startLi = e.target;
            this.startData = val;
        },
        // 合并中
        overDrop(e) {
   
            e.preventDefault();
        },
        // 合并结束
        endDrop(ev, index, val) {
   
            if (ev.target != this.startLi) {
   
                /**
                 *  合并
                 */
                let node = document.createElement("li");
                // li标签的值value
                node.innerHTML = "bond";
                // li标签 className
                node.classList.add("answer-li");
                // li标签className
                if (val.status == "No" && this.startData.status == "No") {
   
                    node.classList.add("bondGray");
                } else {
   
                    node.classList.add("bondBlue");