Vue实现拖拽布局

Vue 实现拖拽布局的方法

使用 Vue.Draggable 库

Vue.Draggable 是基于 Sortable.js 的 Vue 组件，适合实现列表或网格的拖拽排序。

安装依赖：

npm install vuedraggable

基本用法示例：

<template>
  <draggable v-model="items" @end="onDragEnd">
    <div v-for="item in items" :key="item.id">{{ item.name }}</div>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable'
export default {
  components: { draggable },
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' }
      ]
    }
  },
  methods: {
    onDragEnd() {
      console.log('Drag ended', this.items)
    }
  }
}
</script>

使用原生 HTML5 拖放 API

通过 HTML5 的 drag 和 drop 事件实现基础拖拽功能。

示例代码：

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

<script>
export default {
  data() {
    return {
      items: [...],
      draggedItem: null
    }
  },
  methods: {
    handleDragStart(e, item) {
      this.draggedItem = item
      e.dataTransfer.effectAllowed = 'move'
    },
    handleDrop(e, targetItem) {
      const draggedIndex = this.items.indexOf(this.draggedItem)
      const targetIndex = this.items.indexOf(targetItem)
      this.items.splice(draggedIndex, 1)
      this.items.splice(targetIndex, 0, this.draggedItem)
    }
  }
}
</script>

实现网格拖拽布局

对于更复杂的网格布局拖拽，可以结合 CSS Grid 和拖拽库。

示例使用 Vue.Draggable：

<template>
  <draggable 
    v-model="gridItems" 
    v-bind="gridOptions"
    @end="onDragEnd"
    class="grid-container"
  >
    <div v-for="item in gridItems" :key="item.id" class="grid-item">
      {{ item.content }}
    </div>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable'
export default {
  components: { draggable },
  data() {
    return {
      gridItems: [...],
      gridOptions: {
        group: 'grid',
        animation: 150,
        ghostClass: 'ghost'
      }
    }
  }
}
</script>

<style>
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.grid-item {
  border: 1px solid #ccc;
  padding: 20px;
}
.ghost {
  opacity: 0.5;
}
</style>

实现跨组件拖拽

需要在不同组件间共享状态，可以使用 Vuex 或 provide/inject。

示例使用 Vuex：

// store.js
export default new Vuex.Store({
  state: {
    draggableItems: [...]
  },
  mutations: {
    updateItems(state, payload) {
      state.draggableItems = payload
    }
  }
})

组件中使用：

<template>
  <draggable 
    v-model="items" 
    group="shared"
    @change="updateStore"
  >
    <!-- 拖拽内容 -->
  </draggable>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  computed: {
    ...mapState(['draggableItems']),
    items: {
      get() {
        return this.draggableItems
      },
      set(value) {
        this.updateItems(value)
      }
    }
  },
  methods: {
    ...mapMutations(['updateItems']),
    updateStore() {
      // 可添加额外逻辑
    }
  }
}
</script>

性能优化建议

对于大量拖拽元素，使用虚拟滚动技术减少 DOM 节点。

示例使用 vue-virtual-scroll-list：

<template>
  <draggable v-model="items">
    <virtual-list :size="50" :remain="20">
      <div v-for="item in items" :key="item.id">
        {{ item.content }}
      </div>
    </virtual-list>
  </draggable>
</template>

触摸设备支持

确保拖拽功能在移动设备上正常工作，可能需要添加额外配置。

Vue.Draggable 的触摸配置：

{
  touchStartThreshold: 3,
  forceFallback: true,  // 在某些移动设备上更好支持
  fallbackClass: 'dragging'
}