当前位置：首页 > VUE

vue实现拖拽实现组件嵌套

2026-03-28 06:00:00VUE

Vue 拖拽实现组件嵌套

使用 vue-draggable-next 库

vue-draggable-next 是基于 Sortable.js 的 Vue 3 拖拽组件库，支持组件嵌套拖拽。

安装依赖：

vue实现拖拽实现组件嵌套

npm install vue-draggable-next

基础实现代码：

<template>
  <draggable 
    v-model="list"
    group="components"
    @end="onDragEnd">
    <component
      v-for="(item, index) in list"
      :key="item.id"
      :is="item.type"
      v-bind="item.props"/>
  </draggable>
</template>

<script setup>
import { ref } from 'vue';
import draggable from 'vue-draggable-next';

const list = ref([
  { id: 1, type: 'ComponentA', props: { title: 'A' } },
  { id: 2, type: 'ComponentB', props: { content: 'B' } }
]);
</script>

嵌套拖拽实现

对于多层嵌套结构，需要递归使用 draggable 组件：

vue实现拖拽实现组件嵌套

<template>
  <draggable
    v-model="treeData"
    group="nested"
    item-key="id">
    <template #item="{ element }">
      <div class="node">
        {{ element.name }}
        <nested-draggable 
          v-if="element.children"
          :items="element.children"/>
      </div>
    </template>
  </draggable>
</template>

<script>
export default {
  components: {
    NestedDraggable: () => import('./NestedDraggable.vue')
  }
}
</script>

自定义拖拽手柄

通过 handle 属性指定可拖拽区域：

<draggable handle=".handle">
  <div v-for="item in items">
    <span class="handle">≡</span>
    {{ item.text }}
  </div>
</draggable>

拖拽状态样式控制

通过 CSS 类名控制拖拽过程中的样式变化：

.draggable-item {
  transition: all 0.3s;
}
.draggable-item.sortable-chosen {
  background: #f0f0f0;
}
.draggable-item.sortable-ghost {
  opacity: 0.5;
}