vue+draggable +jsPlumb 表格数据连线

最新推荐文章于 2024-08-29 15:10:00 发布

m0_51113907

最新推荐文章于 2024-08-29 15:10:00 发布

阅读量2k

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_51113907/article/details/127774633

版权

这篇博客介绍了如何使用Vue.js结合draggable和jsPlumb库，实现类似Navcat中视图可视化的操作，包括拖动列表生成表格以及支持表格内数据的连线功能。通过自定义可拖拽组件，配合数据源准备和初始化方法，实现了一个完整的前端连线解决方案。

摘要由CSDN通过智能技术生成

业务逻辑，类似与navcat中的视图可视化的操作拖动列表生成表格并支持连线

展示效果

    <el-row>
      <el-col :span="4">
        <draggable
          v-model="tableData"
          @end="onEnd"
          :group="{ name: 'test', pull: 'clone', put: 'false' }"
          :sort="false"
          @start="startDra"
        >
          <div v-for="(element, index) in tableData" :key="index">
            {
  { element.name }}
          </div>
        </draggable></el-col
      >
      <el-col :span="12">
        <draggable
          draggable
          style="height: 100vh; position: relative"
          v-model="tableData2"
          :group="{ name: 'test', pull: '' }"
          @add="addList"
          id="container"
        >
          <div v-for="(element, index) in tableData2" :key="index">
            <div
              class="chatBox fx-d-c"
              v-drag
              :id="element.name + '_' + element.node"
            >
              <div class="topBar fx-a-c">
                <div class="flex1 fx-a-c drayView" style="width: 100%">
                  <span class="chatName">{
  { element.name }}</span>
                </div>
                <i
                  class="el-icon-edit"
                  style="
                    margin-right: 10px;
                    height: 55px;
                    width: 30px;
                    line-height: 55px;
                    cursor: pointer;
                  "
                  @click="closeChatBox($event)"
                ></i>
              </div>
              <ul>
                <li
                  v-for="(item, index) in element.list"
                  :key="'left' + index"
                  :id="item.id"
                  name="source"
                  class="lines"
                >
                  {
  { item.name }}
                </li>
              </ul>
            </div>
          </div>
        </draggable></el-col
      >
    </el-row>

vue 自定义的可拖拽组件

import Vue from 'vue';
Vue.directive('drag', function (el, binding, vnode, oldVnode) {
  const dialogHeaderEl = el.querySelector('.drayView');
  // 监听 当前绑定指令元素的鼠标点下去的事件
  dialogHeaderEl.onmousedown = function (e) {
    const { ox, oy } = {
      ox: e.clientX - el.offsetLeft,
      oy: e.clientY - el.offsetTop,
    };
    let fit = false;
    let clear = true;
    // 监听鼠标来回移动的事件
    document.onmousemove = function (em) {
      const { left, top } = {
        left: em.clientX - ox,
        top: em.clientY - oy,
      };
      if ((left != 0 || top != 0) && clear) {
        vnode.context.clearLine();
        clear = false;
      }
      // ;
      // 将鼠标 换成小手
      el.style.cursor = 'pointer';
      // 和盒子的定位 改变left 和 top的值
      el.style.left = left + 'px';
      el.style.top = top + 'px';
    };
    // 监听鼠标抬起的事件
    document.onmouseup = function (eu) {
      document.onmousemove = null;
      if (!fit) {
        fit = true;
        vnode.context.ConnectLine();
      }
      el.style.cursor = 'default';
    };
  };
});

数据源的准备工作

 tableData: [
        {
          date: '2016-05-02',
          name: '王涛',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
          node: '1