当前位置：首页 > VUE

vue栅格拖拽怎么实现

2026-01-19 23:25:10VUE

实现Vue栅格拖拽的方法

使用Vue实现栅格拖拽功能可以通过第三方库或原生HTML5拖拽API完成。以下是几种常见实现方式：

使用Vue.Draggable库

Vue.Draggable是基于Sortable.js的Vue组件，适合列表和栅格拖拽场景。

安装依赖：

npm install vuedraggable

基础示例代码：

<template>
  <draggable 
    v-model="items" 
    @end="onDragEnd"
    class="grid-container"
    :options="{ animation: 150 }">
    <div v-for="item in items" :key="item.id" class="grid-item">
      {{ item.text }}
    </div>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable'
export default {
  components: { draggable },
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' }
      ]
    }
  },
  methods: {
    onDragEnd() {
      console.log('拖拽完成后的顺序:', this.items)
    }
  }
}
</script>

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

使用Grid Layout库

对于更复杂的栅格拖拽布局，可使用vue-grid-layout专业库。

安装：

npm install vue-grid-layout

示例代码：

<template>
  <grid-layout
    :layout.sync="layout"
    :col-num="12"
    :row-height="30"
    :is-draggable="true"
    :is-resizable="true">
    <grid-item v-for="item in layout" 
      :x="item.x"
      :y="item.y"
      :w="item.w"
      :h="item.h"
      :i="item.i"
      :key="item.i">
      {{ item.i }}
    </grid-item>
  </grid-layout>
</template>

<script>
import { GridLayout, GridItem } from 'vue-grid-layout'
export default {
  components: { GridLayout, GridItem },
  data() {
    return {
      layout: [
        { x: 0, y: 0, w: 2, h: 2, i: '1' },
        { x: 2, y: 0, w: 2, h: 4, i: '2' }
      ]
    }
  }
}
</script>

原生HTML5拖拽API

不需要额外依赖的原生实现方案：

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

<script>
export default {
  data() {
    return {
      items: [/* 数据 */],
      draggedItem: null
    }
  },
  methods: {
    handleDragStart(e, id) {
      this.draggedItem = this.items.find(item => item.id === id)
      e.dataTransfer.effectAllowed = 'move'
    },
    handleDrop(e, targetId) {
      const targetIndex = this.items.findIndex(item => item.id === targetId)
      const draggedIndex = this.items.findIndex(item => item.id === this.draggedItem.id)
      // 交换元素位置
      this.items.splice(targetIndex, 1, this.draggedItem)
      this.items.splice(draggedIndex, 1, this.items[targetIndex])
    }
  }
}
</script>