vue实现树形拖拽

Vue 实现树形拖拽功能

使用 vue-draggable 库

安装 vue-draggable 库：

npm install vuedraggable

在组件中引入并使用：

<template>
  <draggable
    v-model="treeData"
    group="tree"
    @end="onDragEnd"
    :animation="200"
  >
    <div v-for="item in treeData" :key="item.id">
      {{ item.name }}
      <draggable
        v-if="item.children"
        v-model="item.children"
        group="tree"
        @end="onDragEnd"
      >
        <div v-for="child in item.children" :key="child.id">
          {{ child.name }}
        </div>
      </draggable>
    </div>
  </draggable>
</template>

<script>
import draggable from "vuedraggable";

export default {
  components: { draggable },
  data() {
    return {
      treeData: [
        { id: 1, name: "Node 1", children: [
          { id: 2, name: "Node 1.1" },
          { id: 3, name: "Node 1.2" }
        ]},
        { id: 4, name: "Node 2" }
      ]
    };
  },
  methods: {
    onDragEnd() {
      console.log("拖拽完成", this.treeData);
    }
  }
};
</script>

使用 element-ui 的树形拖拽

安装 element-ui：

npm install element-ui

实现树形拖拽：

<template>
  <el-tree
    :data="treeData"
    draggable
    @node-drop="handleDrop"
    :allow-drop="allowDrop"
  ></el-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        { id: 1, label: "Node 1", children: [
          { id: 2, label: "Node 1.1" },
          { id: 3, label: "Node 1.2" }
        ]},
        { id: 4, label: "Node 2" }
      ]
    };
  },
  methods: {
    handleDrop(draggingNode, dropNode, type) {
      console.log("拖拽完成", this.treeData);
    },
    allowDrop(draggingNode, dropNode, type) {
      return type !== "inner" || dropNode.level < 3;
    }
  }
};
</script>

自定义实现树形拖拽

通过原生 HTML5 拖拽 API 实现：

<template>
  <div
    v-for="item in treeData"
    :key="item.id"
    draggable
    @dragstart="handleDragStart($event, item)"
    @dragover="handleDragOver($event, item)"
    @drop="handleDrop($event, item)"
  >
    {{ item.name }}
    <div
      v-if="item.children"
      v-for="child in item.children"
      :key="child.id"
      draggable
      @dragstart="handleDragStart($event, child)"
      @dragover="handleDragOver($event, child)"
      @drop="handleDrop($event, child)"
    >
      {{ child.name }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        { id: 1, name: "Node 1", children: [
          { id: 2, name: "Node 1.1" },
          { id: 3, name: "Node 1.2" }
        ]},
        { id: 4, name: "Node 2" }
      ],
      draggedItem: null
    };
  },
  methods: {
    handleDragStart(e, item) {
      this.draggedItem = item;
      e.dataTransfer.setData("text/plain", "");
    },
    handleDragOver(e, item) {
      e.preventDefault();
    },
    handleDrop(e, item) {
      e.preventDefault();
      if (this.draggedItem === item) return;

      // 实现拖拽逻辑
      console.log("拖拽完成", this.draggedItem, item);
    }
  }
};
</script>

注意事项

• 使用第三方库（如 vue-draggable 或 element-ui）可以快速实现拖拽功能，但可能需要调整样式或逻辑。
• 自定义实现灵活性更高，但需要处理更多细节（如父子节点关系、拖拽限制等）。
• 拖拽后需要更新数据状态，确保视图与数据同步。