当前位置：首页 > VUE

vue拖拽实现布局

2026-02-17 15:31:31VUE

vue拖拽实现布局的方法

使用Vue实现拖拽布局可以通过多种方式完成，以下是几种常见的方法：

使用HTML5原生拖拽API

HTML5提供了原生的拖拽API，结合Vue的事件绑定可以实现基础的拖拽功能。

<template>
  <div 
    draggable="true" 
    @dragstart="handleDragStart" 
    @dragover.prevent 
    @drop="handleDrop"
  >
    拖拽元素
  </div>
</template>

<script>
export default {
  methods: {
    handleDragStart(e) {
      e.dataTransfer.setData('text/plain', e.target.id)
    },
    handleDrop(e) {
      e.preventDefault()
      const data = e.dataTransfer.getData('text/plain')
      e.target.appendChild(document.getElementById(data))
    }
  }
}
</script>

使用第三方库vue-draggable

vue-draggable是基于Sortable.js的Vue组件，提供了更强大的拖拽功能。

安装：

vue拖拽实现布局

npm install vuedraggable

使用示例：

<template>
  <draggable v-model="list" @end="onEnd">
    <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: {
    onEnd() {
      console.log('拖拽结束')
    }
  }
}
</script>

使用拖拽布局库vue-grid-layout

对于需要网格布局的场景，vue-grid-layout提供了响应式的网格拖拽功能。

vue拖拽实现布局

安装：

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"
      :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: '0' },
        { x: 2, y: 0, w: 2, h: 4, i: '1' }
      ]
    }
  }
}
</script>

自定义拖拽实现

对于需要完全自定义的拖拽行为，可以通过监听鼠标事件实现。

<template>
  <div 
    class="draggable-item"
    @mousedown="startDrag"
    :style="itemStyle"
  >
    可拖拽元素
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDragging: false,
      position: { x: 0, y: 0 },
      startPos: { x: 0, y: 0 }
    }
  },
  computed: {
    itemStyle() {
      return {
        transform: `translate(${this.position.x}px, ${this.position.y}px)`,
        cursor: this.isDragging ? 'grabbing' : 'grab'
      }
    }
  },
  methods: {
    startDrag(e) {
      this.isDragging = true
      this.startPos = {
        x: e.clientX - this.position.x,
        y: e.clientY - this.position.y
      }
      document.addEventListener('mousemove', this.onDrag)
      document.addEventListener('mouseup', this.stopDrag)
    },
    onDrag(e) {
      if (!this.isDragging) return
      this.position = {
        x: e.clientX - this.startPos.x,
        y: e.clientY - this.startPos.y
      }
    },
    stopDrag() {
      this.isDragging = false
      document.removeEventListener('mousemove', this.onDrag)
      document.removeEventListener('mouseup', this.stopDrag)
    }
  }
}
</script>