当前位置：首页 > VUE

vue实现拖拽界面布局

2026-01-21 15:37:11VUE

Vue 实现拖拽界面布局的方法

使用 vue-draggable 库

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

安装依赖：

npm install vuedraggable

基础示例代码：

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

<script>
import draggable from 'vuedraggable'

export default {
  components: { draggable },
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' }
      ]
    }
  },
  methods: {
    onDragEnd() {
      console.log('拖拽完成', this.list)
    }
  }
}
</script>

使用 HTML5 原生拖拽 API

通过 Vue 结合 HTML5 的 drag and drop API 实现自定义拖拽功能。

示例代码：

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Item A' },
        { id: 2, text: 'Item B' }
      ],
      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>

实现可拖拽布局系统

构建类似仪表盘的拖拽布局系统需要结合网格布局和拖拽功能。

关键实现步骤：

<template>
  <div class="grid-container">
    <div 
      v-for="(item, index) in layout" 
      :key="item.id"
      class="grid-item"
      :style="getItemStyle(item)"
      draggable="true"
      @dragstart="dragStart(index)"
      @dragover.prevent
      @drop="drop(index)"
    >
      {{ item.content }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      layout: [
        { id: 1, x: 0, y: 0, w: 2, h: 2, content: 'Widget 1' },
        { id: 2, x: 2, y: 0, w: 2, h: 1, content: 'Widget 2' }
      ],
      draggedIndex: null
    }
  },
  methods: {
    getItemStyle(item) {
      return {
        gridColumn: `${item.x + 1} / span ${item.w}`,
        gridRow: `${item.y + 1} / span ${item.h}`
      }
    },
    dragStart(index) {
      this.draggedIndex = index
    },
    drop(targetIndex) {
      if (this.draggedIndex !== null) {
        const [item] = this.layout.splice(this.draggedIndex, 1)
        this.layout.splice(targetIndex, 0, item)
        this.draggedIndex = null
      }
    }
  }
}
</script>

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

使用第三方布局库

对于复杂的拖拽布局系统，可以使用专业库如 Vue Grid Layout：

安装：

npm install vue-grid-layout

使用示例：

<template>
  <grid-layout
    :layout.sync="layout"
    :col-num="12"
    :row-height="30"
    :is-draggable="true"
  >
    <grid-item v-for="item in layout" :key="item.i"
      :x="item.x" :y="item.y" :w="item.w" :h="item.h"
    >
      {{ item.text }}
    </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', text: 'Item 1' },
        { x: 2, y: 0, w: 2, h: 4, i: '2', text: 'Item 2' }
      ]
    }
  }
}
</script>