当前位置：首页 > VUE

vue中拖拽实现布局

2026-01-22 15:43:18VUE

Vue 中实现拖拽布局的方法

使用 HTML5 原生拖拽 API

HTML5 提供了原生拖拽 API，可以通过 draggable 属性、dragstart、dragend、dragover 和 drop 事件实现基础拖拽功能。

<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) {
      const id = e.dataTransfer.getData('text/plain');
      const draggableElement = document.getElementById(id);
      e.target.appendChild(draggableElement);
    }
  }
}
</script>

使用第三方库 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>

使用拖拽布局库 Vue-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: '0' },
        { x: 2, y: 0, w: 2, h: 4, i: '1' }
      ]
    };
  }
};
</script>

自定义拖拽实现

通过鼠标事件（mousedown、mousemove、mouseup）实现更灵活的拖拽逻辑。

<template>
  <div
    class="draggable-item"
    :style="{ left: position.x + 'px', top: position.y + 'px' }"
    @mousedown="startDrag"
  >
    拖拽我
  </div>
</template>

<script>
export default {
  data() {
    return {
      position: { x: 0, y: 0 },
      isDragging: false,
      startPos: { x: 0, y: 0 }
    };
  },
  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>

<style>
.draggable-item {
  position: absolute;
  cursor: move;
}
</style>

拖拽边界与限制

通过计算边界条件限制拖拽范围，确保元素不会超出容器。

onDrag(e) {
  if (!this.isDragging) return;
  const newX = e.clientX - this.startPos.x;
  const newY = e.clientY - this.startPos.y;
  const containerWidth = this.$el.parentNode.clientWidth;
  const containerHeight = this.$el.parentNode.clientHeight;

  this.position = {
    x: Math.max(0, Math.min(newX, containerWidth - this.$el.clientWidth)),
    y: Math.max(0, Math.min(newY, containerHeight - this.$el.clientHeight))
  };
}

以上方法覆盖了从基础到高级的拖拽布局实现，可根据具体需求选择适合的方案。

vue中拖拽实现布局