vue实现拖拽配置

Vue 拖拽配置实现方法

使用 HTML5 原生拖拽 API

HTML5 提供了原生的拖拽 API，可以通过 draggable 属性、dragstart、dragend、dragover 和 drop 事件实现基础拖拽功能。

<template>
  <div>
    <div 
      v-for="item in list" 
      :key="item.id"
      draggable="true"
      @dragstart="handleDragStart($event, item)"
      @dragend="handleDragEnd"
    >
      {{ item.name }}
    </div>
    <div 
      @dragover.prevent
      @drop="handleDrop"
    >
      拖拽到这里
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' }
      ],
      draggedItem: null
    }
  },
  methods: {
    handleDragStart(e, item) {
      this.draggedItem = item
      e.dataTransfer.effectAllowed = 'move'
    },
    handleDragEnd() {
      this.draggedItem = null
    },
    handleDrop() {
      if (this.draggedItem) {
        // 处理拖拽逻辑
      }
    }
  }
}
</script>

使用第三方库 Vue.Draggable

Vue.Draggable 是一个基于 Sortable.js 的 Vue 拖拽组件，提供了更丰富的功能和更好的兼容性。

安装依赖：

npm install vuedraggable

基本用法：

<template>
  <draggable 
    v-model="list"
    @end="onDragEnd"
  >
    <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' }
      ]
    }
  },
  methods: {
    onDragEnd() {
      console.log('拖拽结束', this.list)
    }
  }
}
</script>

自定义拖拽指令

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

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

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

使用方式：

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

拖拽排序实现

结合 Vue 的响应式特性，可以实现列表的拖拽排序。

methods: {
  handleDrop(e) {
    e.preventDefault()
    const newIndex = // 计算新位置
    const oldIndex = this.list.findIndex(item => item.id === this.draggedItem.id)

    this.list.splice(oldIndex, 1)
    this.list.splice(newIndex, 0, this.draggedItem)
  }
}

跨组件拖拽

通过 Vuex 或事件总线实现跨组件数据传递，完成跨组件拖拽功能。

// 使用事件总线
this.$emit('drag-start', item)
// 另一个组件
this.$on('drag-start', item => {
  this.draggedItem = item
})

性能优化建议

对于大型列表，使用虚拟滚动技术（如 vue-virtual-scroller）配合拖拽功能，避免渲染大量DOM节点影响性能。

<virtual-scroller :items="list">
  <template v-slot="{ item }">
    <div draggable="true" @dragstart="handleDragStart($event, item)">
      {{ item.name }}
    </div>
  </template>
</virtual-scroller>

移动端适配

对于移动端设备，需要使用 touch 事件替代鼠标事件，或使用支持移动端的库如 interact.js。

el.addEventListener('touchstart', handleTouchStart)
el.addEventListener('touchmove', handleTouchMove)
el.addEventListener('touchend', handleTouchEnd)

以上方法可以根据具体需求选择使用，Vue.Draggable 提供了最完整的解决方案，适合大多数场景。原生API适合简单需求，自定义指令和跨组件方案适合特殊场景。