当前位置：首页 > VUE

vue 实现拖拉

2026-03-27 18:24:29VUE

Vue 拖拽功能实现方法

原生 HTML5 拖放 API

HTML5 提供了原生拖放 API，可以直接在 Vue 中使用。需要在元素上添加 draggable 属性并监听相关事件。

<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', '自定义数据')
    },
    handleDrop(e) {
      const data = e.dataTransfer.getData('text/plain')
      console.log('接收到的数据:', data)
    }
  }
}
</script>

使用第三方库

对于更复杂的拖拽需求，推荐使用成熟的第三方库如 vuedraggable 或 sortablejs。

安装 vuedraggable:

npm install vuedraggable

基本使用示例:

<template>
  <draggable 
    v-model="list"
    @start="onStart"
    @end="onEnd"
  >
    <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: {
    onStart() {
      console.log('拖拽开始')
    },
    onEnd() {
      console.log('拖拽结束')
    }
  }
}
</script>

自定义拖拽指令

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

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

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

使用自定义指令:

<div v-drag="'自定义数据'">拖拽我</div>

拖拽状态管理

在拖拽过程中维护状态可以提供更好的用户体验。

data() {
  return {
    isDragging: false,
    draggedItem: null
  }
},
methods: {
  startDrag(item) {
    this.isDragging = true
    this.draggedItem = item
  },
  endDrag() {
    this.isDragging = false
    this.draggedItem = null
  }
}

跨组件拖拽

通过事件总线或 Vuex 可以实现跨组件拖拽。

// 使用事件总线
this.$root.$emit('drag-start', data)

// 在接收组件中
this.$root.$on('drag-start', data => {
  // 处理拖拽数据
})

性能优化

对于大量可拖拽元素，使用虚拟滚动等技术优化性能。

vue 实现拖拉

<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>