当前位置：首页 > VUE

vue实现拖动效果

2026-03-10 10:12:24VUE

实现拖动效果的基本思路

在Vue中实现拖动效果通常涉及监听鼠标或触摸事件，通过计算元素位置变化来实现拖动。Vue的响应式特性可以简化状态管理，结合原生DOM操作或第三方库（如vuedraggable）能快速实现功能。

方法一：原生DOM事件实现

通过mousedown、mousemove和mouseup事件手动控制元素位置：

vue实现拖动效果

<template>
  <div 
    ref="draggableElement"
    @mousedown="startDrag"
    :style="{ left: position.x + 'px', top: position.y + 'px' }"
    class="draggable-element"
  >
    拖拽我
  </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.drag);
      document.addEventListener('mouseup', this.stopDrag);
    },
    drag(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.drag);
      document.removeEventListener('mouseup', this.stopDrag);
    }
  }
};
</script>

<style>
.draggable-element {
  position: absolute;
  width: 100px;
  height: 100px;
  background: #42b983;
  cursor: move;
}
</style>

方法二：使用`vuedraggable`库

适用于列表排序或复杂拖拽场景，基于Sortable.js封装：

安装依赖：
```
npm install vuedraggable
```

示例代码：


<template>
<draggable 
 v-model="list" 
 @end="onDragEnd"
 item-key="id"
>
 <template #item="{ element }">
   <div class="draggable-item">{{ element.name }}</div>
 </template>
</draggable>
</template>

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); } } }; .draggable-item { padding: 10px; margin: 5px; background: #f0f0f0; border: 1px solid #ddd; } ```

方法三：结合HTML5拖放API

适用于文件上传或跨元素拖拽：

<template>
  <div 
    @dragover.prevent
    @drop="handleDrop"
    class="drop-zone"
  >
    拖拽文件到此处
  </div>
</template>

<script>
export default {
  methods: {
    handleDrop(e) {
      const files = e.dataTransfer.files;
      console.log('拖拽的文件:', files);
    }
  }
};
</script>

<style>
.drop-zone {
  width: 300px;
  height: 200px;
  border: 2px dashed #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>