当前位置：首页 > VUE

用vue实现拖拽

2026-02-18 11:08:57VUE

Vue 拖拽实现方法

使用 HTML5 原生拖拽 API

在 Vue 中可以通过 HTML5 的 draggable 属性和相关事件实现基础拖拽功能。

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

    <div 
      @dragover="handleDragOver"
      @drop="handleDrop"
    >
      放置区域
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handleDragStart(e) {
      e.dataTransfer.setData('text/plain', 'drag-data')
    },
    handleDragOver(e) {
      e.preventDefault()
    },
    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 组件，适合列表排序等复杂拖拽场景。

安装依赖：

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: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    }
  },
  methods: {
    dragStart() {
      console.log('拖拽开始')
    },
    dragEnd() {
      console.log('拖拽结束')
    }
  }
}
</script>

自定义拖拽指令

可以创建自定义指令实现更灵活的拖拽控制。

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

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

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

使用指令：

<div v-drag="'custom-data'">拖拽我</div>

拖拽状态管理

在复杂场景中，建议使用 Vuex 管理拖拽状态。

const store = new Vuex.Store({
  state: {
    draggedItem: null,
    dropTarget: null
  },
  mutations: {
    setDraggedItem(state, item) {
      state.draggedItem = item
    },
    setDropTarget(state, target) {
      state.dropTarget = target
    }
  }
})

跨组件拖拽

通过事件总线实现跨组件拖拽通信。

// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()

发送拖拽事件：

EventBus.$emit('item-dragged', payload)

接收拖拽事件：

EventBus.$on('item-dragged', (payload) => {
  // 处理拖拽数据
})

性能优化建议

对于大量可拖拽元素，使用虚拟滚动技术减少 DOM 数量。

<draggable v-model="list">
  <virtual-list :size="50" :remain="10">
    <div v-for="item in list" :key="item.id">
      {{ item.name }}
    </div>
  </virtual-list>
</draggable>

移动端适配

移动端需要额外处理 touch 事件。

el.addEventListener('touchstart', handleStart)
el.addEventListener('touchmove', handleMove)
el.addEventListener('touchend', handleEnd)

样式处理

拖拽过程中添加视觉反馈。

用vue实现拖拽

.draggable-item {
  transition: transform 0.2s ease;
}
.draggable-item.dragging {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}