当前位置：首页 > VUE

利用vue实现拖拽

2026-01-16 04:03:07VUE

使用 Vue 实现拖拽功能

原生 HTML5 拖拽 API

Vue 可以结合 HTML5 的拖拽 API 实现基础拖拽功能。以下是一个简单示例：

<template>
  <div>
    <div 
      draggable="true" 
      @dragstart="handleDragStart"
      @dragend="handleDragEnd"
    >
      拖拽元素
    </div>

    <div 
      @dragover.prevent
      @dragenter.prevent
      @drop="handleDrop"
    >
      放置区域
    </div>
  </div>
</template>

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

使用第三方库 vue-draggable

对于更复杂的拖拽场景，推荐使用成熟的第三方库如 vue-draggable：

安装依赖：

npm install vuedraggable

基本用法：

<template>
  <draggable 
    v-model="list"
    @start="dragStart"
    @end="dragEnd"
  >
    <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: '项目1' },
        { id: 2, name: '项目2' }
      ]
    }
  },
  methods: {
    dragStart() {
      console.log('开始拖拽');
    },
    dragEnd() {
      console.log('结束拖拽');
    }
  }
}
</script>

自定义拖拽指令

对于需要完全自定义的场景，可以创建 Vue 指令：

Vue.directive('drag', {
  bind(el, binding) {
    let startX, startY, initialX, initialY

    el.style.position = 'absolute'
    el.style.cursor = 'move'

    el.addEventListener('mousedown', startDrag)

    function startDrag(e) {
      startX = e.clientX
      startY = e.clientY
      initialX = el.offsetLeft
      initialY = el.offsetTop

      document.addEventListener('mousemove', drag)
      document.addEventListener('mouseup', stopDrag)
      e.preventDefault()
    }

    function drag(e) {
      el.style.left = `${initialX + e.clientX - startX}px`
      el.style.top = `${initialY + e.clientY - startY}px`
    }

    function stopDrag() {
      document.removeEventListener('mousemove', drag)
      document.removeEventListener('mouseup', stopDrag)
    }
  }
})

使用指令：

<div v-drag>可拖拽元素</div>

拖拽排序实现

结合 Vue 的响应式特性实现拖拽排序：

<template>
  <div class="container">
    <div 
      v-for="(item, index) in items"
      :key="item.id"
      class="draggable-item"
      draggable="true"
      @dragstart="handleDragStart(index)"
      @dragover.prevent="handleDragOver(index)"
      @dragenter="handleDragEnter(index)"
      @dragend="handleDragEnd"
    >
      {{ item.text }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: '项目1' },
        { id: 2, text: '项目2' },
        { id: 3, text: '项目3' }
      ],
      draggedIndex: null,
      dragOverIndex: null
    }
  },
  methods: {
    handleDragStart(index) {
      this.draggedIndex = index
    },
    handleDragOver(index) {
      this.dragOverIndex = index
    },
    handleDragEnter(index) {
      if (this.draggedIndex !== null && this.draggedIndex !== index) {
        const draggedItem = this.items[this.draggedIndex]
        this.items.splice(this.draggedIndex, 1)
        this.items.splice(index, 0, draggedItem)
        this.draggedIndex = index
      }
    },
    handleDragEnd() {
      this.draggedIndex = null
      this.dragOverIndex = null
    }
  }
}
</script>

跨组件拖拽

实现跨组件拖拽需要利用 Vue 的事件总线或状态管理：

// eventBus.js
import Vue from 'vue'
export const EventBus = new Vue()

// 拖拽源组件
methods: {
  startDrag() {
    EventBus.$emit('drag-start', this.item)
  }
}

// 放置目标组件
created() {
  EventBus.$on('drag-start', (item) => {
    this.draggedItem = item
  })
}

这些方法涵盖了从基础到高级的 Vue 拖拽实现方案，可根据具体需求选择合适的实现方式。

利用vue实现拖拽