当前位置：首页 > VUE

vue实现拖拽实现组件嵌套

2026-01-08 05:31:38VUE

Vue 拖拽实现组件嵌套

使用 Vue 实现拖拽组件嵌套功能可以通过原生 HTML5 拖拽 API 或第三方库如 vuedraggable 实现。以下是两种方法的详细说明：

使用 HTML5 拖拽 API

HTML5 拖拽 API 提供原生支持，适合简单场景。

模板部分

<template>
  <div>
    <div 
      v-for="(item, index) in list" 
      :key="index"
      draggable="true"
      @dragstart="handleDragStart($event, index)"
      @dragover.prevent="handleDragOver($event, index)"
      @drop="handleDrop($event, index)"
    >
      {{ item.name }}
    </div>
  </div>
</template>

脚本部分

<script>
export default {
  data() {
    return {
      list: [
        { name: 'Item 1' },
        { name: 'Item 2' },
        { name: 'Item 3' }
      ],
      draggedItem: null
    }
  },
  methods: {
    handleDragStart(event, index) {
      this.draggedItem = this.list[index]
      event.dataTransfer.effectAllowed = 'move'
      event.dataTransfer.setData('text/html', event.target.innerHTML)
    },
    handleDragOver(event, index) {
      event.preventDefault()
      event.dataTransfer.dropEffect = 'move'
    },
    handleDrop(event, index) {
      event.preventDefault()
      const draggedOverItem = this.list[index]
      if (this.draggedItem !== draggedOverItem) {
        const draggedIndex = this.list.indexOf(this.draggedItem)
        this.list.splice(draggedIndex, 1)
        this.list.splice(index, 0, this.draggedItem)
      }
    }
  }
}
</script>

使用 vuedraggable 库

vuedraggable 是基于 Sortable.js 的 Vue 拖拽组件，功能更强大且易于使用。

安装依赖

vue实现拖拽实现组件嵌套

npm install vuedraggable

模板部分

<template>
  <div>
    <draggable 
      v-model="list" 
      group="items" 
      @start="drag=true" 
      @end="drag=false"
    >
      <div v-for="(item, index) in list" :key="index">
        {{ item.name }}
      </div>
    </draggable>
  </div>
</template>

脚本部分

<script>
import draggable from 'vuedraggable'

export default {
  components: { draggable },
  data() {
    return {
      list: [
        { name: 'Item 1' },
        { name: 'Item 2' },
        { name: 'Item 3' }
      ]
    }
  }
}
</script>

实现嵌套拖拽

嵌套拖拽需要为每个可嵌套层级设置独立的 draggable 组件和 group 属性。

vue实现拖拽实现组件嵌套

模板示例

<template>
  <div>
    <draggable 
      v-model="parentList" 
      group="parent" 
      @start="drag=true" 
      @end="drag=false"
    >
      <div v-for="(parent, pIndex) in parentList" :key="pIndex">
        {{ parent.name }}
        <draggable 
          v-model="parent.children" 
          group="children" 
          @start="drag=true" 
          @end="drag=false"
        >
          <div v-for="(child, cIndex) in parent.children" :key="cIndex">
            {{ child.name }}
          </div>
        </draggable>
      </div>
    </draggable>
  </div>
</template>

脚本示例

<script>
import draggable from 'vuedraggable'

export default {
  components: { draggable },
  data() {
    return {
      parentList: [
        { 
          name: 'Parent 1',
          children: [
            { name: 'Child 1' },
            { name: 'Child 2' }
          ]
        },
        { 
          name: 'Parent 2',
          children: [
            { name: 'Child 3' },
            { name: 'Child 4' }
          ]
        }
      ]
    }
  }
}
</script>

样式优化

拖拽过程中可以添加样式增强用户体验。

CSS 示例

.draggable-item {
  padding: 10px;
  margin: 5px;
  background: #f5f5f5;
  border: 1px solid #ddd;
  cursor: move;
}
.draggable-item:hover {
  background: #e9e9e9;
}
.draggable-item.dragging {
  opacity: 0.5;
}