当前位置：首页 > VUE

vue实现面板拖拽

2026-01-16 01:05:27VUE

Vue 实现面板拖拽的方法

使用 HTML5 原生拖拽 API

HTML5 提供了原生的拖拽 API，可以通过 draggable 属性和相关事件实现拖拽功能。

在 Vue 模板中为元素添加 draggable 属性：

<div 
  draggable="true"
  @dragstart="handleDragStart"
  @dragend="handleDragEnd"
  @dragover="handleDragOver"
  @drop="handleDrop"
>
  拖拽元素
</div>

在 Vue 的 methods 中定义事件处理函数：

methods: {
  handleDragStart(e) {
    e.dataTransfer.setData('text/plain', e.target.id);
  },
  handleDragOver(e) {
    e.preventDefault();
  },
  handleDrop(e) {
    e.preventDefault();
    const data = e.dataTransfer.getData('text/plain');
    const draggedElement = document.getElementById(data);
    e.target.appendChild(draggedElement);
  }
}

使用第三方库 vue-draggable

vue-draggable 是基于 Sortable.js 的 Vue 拖拽组件，适合列表或面板拖拽场景。

vue实现面板拖拽

安装 vue-draggable：

npm install vuedraggable

在组件中使用：

vue实现面板拖拽

<template>
  <draggable v-model="list" @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('拖拽结束');
    }
  }
};
</script>

自定义拖拽实现

对于更复杂的拖拽需求，可以结合鼠标事件手动实现拖拽逻辑。

在 Vue 模板中监听鼠标事件：

<div 
  @mousedown="startDrag"
  @mousemove="onDrag"
  @mouseup="stopDrag"
  :style="{ left: position.x + 'px', top: position.y + 'px' }"
>
  可拖拽面板
</div>

在 Vue 组件中定义拖拽逻辑：

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
    };
  },
  onDrag(e) {
    if (!this.isDragging) return;
    this.position = {
      x: e.clientX - this.startPos.x,
      y: e.clientY - this.startPos.y
    };
  },
  stopDrag() {
    this.isDragging = false;
  }
}