当前位置：首页 > VUE

vue实现拖拽展示效果

2026-01-23 08:02:21VUE

实现拖拽展示效果的方法

在Vue中实现拖拽展示效果可以通过多种方式完成，以下是几种常见的方法：

使用HTML5原生拖拽API

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

vue实现拖拽展示效果

<template>
  <div>
    <div 
      draggable="true" 
      @dragstart="handleDragStart"
      @dragend="handleDragEnd"
    >
      拖拽元素
    </div>
    <div 
      @dragover.prevent
      @drop="handleDrop"
    >
      放置区域
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handleDragStart(e) {
      e.dataTransfer.setData('text/plain', 'drag-data')
    },
    handleDrop(e) {
      e.preventDefault()
      const data = e.dataTransfer.getData('text/plain')
      console.log('接收到的数据:', data)
    },
    handleDragEnd() {
      console.log('拖拽结束')
    }
  }
}
</script>

使用第三方库vue-draggable

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

安装依赖：

vue实现拖拽展示效果

npm install vuedraggable

示例代码：

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

<script>
import draggable from 'vuedraggable'

export default {
  components: { draggable },
  data() {
    return {
      list: [
        { id: 1, name: '项目1' },
        { id: 2, name: '项目2' },
        { id: 3, name: '项目3' }
      ]
    }
  },
  methods: {
    dragStart() {
      console.log('拖拽开始')
    },
    dragEnd() {
      console.log('拖拽结束')
    }
  }
}
</script>

自定义拖拽实现

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

<template>
  <div>
    <div 
      ref="draggable"
      @mousedown="startDrag"
      :style="dragStyle"
    >
      可拖拽元素
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDragging: false,
      startX: 0,
      startY: 0,
      currentX: 0,
      currentY: 0
    }
  },
  computed: {
    dragStyle() {
      return {
        position: 'absolute',
        left: `${this.currentX}px`,
        top: `${this.currentY}px`,
        cursor: this.isDragging ? 'grabbing' : 'grab'
      }
    }
  },
  methods: {
    startDrag(e) {
      this.isDragging = true
      this.startX = e.clientX - this.currentX
      this.startY = e.clientY - this.currentY
      document.addEventListener('mousemove', this.drag)
      document.addEventListener('mouseup', this.endDrag)
    },
    drag(e) {
      if (!this.isDragging) return
      this.currentX = e.clientX - this.startX
      this.currentY = e.clientY - this.startY
    },
    endDrag() {
      this.isDragging = false
      document.removeEventListener('mousemove', this.drag)
      document.removeEventListener('mouseup', this.endDrag)
    }
  }
}
</script>