vue实现拖拽实现组件嵌套

Vue 实现拖拽组件嵌套

使用 vue-draggable-next 库

安装依赖：

npm install vue-draggable-next

基础实现代码：

<template>
  <draggable 
    v-model="list" 
    group="components" 
    @start="drag=true" 
    @end="drag=false"
  >
    <div v-for="element in list" :key="element.id">
      {{ element.name }}
    </div>
  </draggable>
</template>

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

export default {
  components: { draggable },
  setup() {
    const list = ref([
      { id: 1, name: '组件A' },
      { id: 2, name: '组件B' }
    ]);
    return { list };
  }
};
</script>

嵌套拖拽实现

多层嵌套结构示例：

<template>
  <draggable 
    v-model="treeData" 
    group="nested" 
    item-key="id"
    :component-data="{ tag: 'ul', type: 'transition-group' }"
  >
    <template #item="{ element }">
      <li>
        {{ element.name }}
        <draggable 
          v-if="element.children" 
          v-model="element.children"
          group="nested"
          item-key="id"
        >
          <template #item="{ element: child }">
            <div>{{ child.name }}</div>
          </template>
        </draggable>
      </li>
    </template>
  </draggable>
</template>

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

export default {
  components: { draggable },
  setup() {
    const treeData = ref([
      {
        id: 1,
        name: '父组件1',
        children: [
          { id: 11, name: '子组件1-1' },
          { id: 12, name: '子组件1-2' }
        ]
      },
      {
        id: 2,
        name: '父组件2',
        children: [
          { id: 21, name: '子组件2-1' }
        ]
      }
    ]);
    return { treeData };
  }
};
</script>

自定义拖拽样式

添加拖拽样式控制：

.drag-item {
  padding: 8px;
  margin: 4px;
  background: #f0f0f0;
  border: 1px dashed #ccc;
}

.drag-ghost {
  opacity: 0.5;
  background: #c8ebfb;
}

事件处理

常用事件处理示例：

const handleDragStart = (event) => {
  console.log('开始拖拽', event.item);
};

const handleDragEnd = (event) => {
  console.log('结束拖拽', event.item);
};

const handleChange = (event) => {
  console.log('位置变化', event);
};

移动端适配

添加触摸支持：

const dragOptions = {
  animation: 200,
  touchStartThreshold: 3,
  forceFallback: true
};

性能优化

大数据量优化方案：

const virtualOptions = {
  itemSize: 50,
  height: 500,
  delay: 100
};