当前位置：首页 > VUE

使用vue实现拖拽功能

2026-02-20 17:37:53VUE

使用 Vue 实现拖拽功能

原生 HTML5 拖拽 API 实现

Vue 可以直接封装 HTML5 的拖拽 API，通过事件绑定实现基础拖拽功能。以下是核心实现步骤：

<template>
  <div 
    class="draggable-item" 
    draggable="true"
    @dragstart="handleDragStart"
    @dragend="handleDragEnd"
  >
    拖拽元素
  </div>
  <div 
    class="drop-zone" 
    @dragover="handleDragOver"
    @drop="handleDrop"
  >
    放置区域
  </div>
</template>

<script>
export default {
  methods: {
    handleDragStart(e) {
      e.dataTransfer.setData('text/plain', e.target.id)
      e.target.classList.add('dragging')
    },
    handleDragOver(e) {
      e.preventDefault() // 必须阻止默认行为
    },
    handleDrop(e) {
      e.preventDefault()
      const id = e.dataTransfer.getData('text/plain')
      const draggableElement = document.getElementById(id)
      e.target.appendChild(draggableElement)
    },
    handleDragEnd(e) {
      e.target.classList.remove('dragging')
    }
  }
}
</script>

使用第三方库 vue-draggable

对于更复杂的场景（如列表排序），推荐使用专为 Vue 设计的拖拽库 vue-draggable：

安装依赖：

npm install vuedraggable

基础列表拖拽示例：

使用vue实现拖拽功能

<template>
  <draggable 
    v-model="list" 
    @end="onDragEnd"
    item-key="id"
  >
    <template #item="{element}">
      <div class="item">{{ element.name }}</div>
    </template>
  </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 自定义指令：

Vue.directive('drag', {
  bind(el, binding) {
    el.setAttribute('draggable', true)

    el.addEventListener('dragstart', (e) => {
      e.dataTransfer.setData('text', binding.value)
      el.style.opacity = '0.5'
    })

    el.addEventListener('dragend', () => {
      el.style.opacity = '1'
    })
  }
})

使用方式：

使用vue实现拖拽功能

<div v-drag="item.id" v-for="item in list">{{ item.text }}</div>

跨组件拖拽实现

通过 Vuex 或事件总线实现跨组件数据同步：

// 在拖拽放置区域
handleDrop(e) {
  const itemId = e.dataTransfer.getData('text')
  this.$store.commit('moveItem', {
    from: this.sourceComponent,
    to: this.targetComponent,
    id: itemId
  })
}

性能优化建议

大型列表场景下添加虚拟滚动支持使用 CSS transform 代替 top/left 定位减少重绘对静态元素使用 v-once 减少不必要的更新通过 requestAnimationFrame 节流拖拽事件

移动端适配方案

添加 touch 事件支持：

el.addEventListener('touchmove', (e) => {
  e.preventDefault()
  const touch = e.touches[0]
  el.style.transform = `translate(${touch.clientX}px, ${touch.clientY}px)`
})

引入 hammer.js 等手势库处理复杂交互