vue实现拖拽替换

实现拖拽替换的基本思路

使用HTML5的拖放API结合Vue的响应式数据绑定，可以轻松实现元素的拖拽替换功能。核心是利用draggable属性、dragstart、dragover和drop事件。

基础HTML结构

<div v-for="(item, index) in items" :key="index"
     draggable="true"
     @dragstart="handleDragStart(index)"
     @dragover.prevent
     @drop="handleDrop(index)">
  {{ item }}
</div>

Vue数据与方法

data() {
  return {
    items: ['Item 1', 'Item 2', 'Item 3', 'Item 4'],
    draggedIndex: null
  }
},
methods: {
  handleDragStart(index) {
    this.draggedIndex = index
  },
  handleDrop(targetIndex) {
    const draggedItem = this.items[this.draggedIndex]
    this.items.splice(this.draggedIndex, 1)
    this.items.splice(targetIndex, 0, draggedItem)
  }
}

样式增强

为提升用户体验，可以添加拖拽时的样式反馈：

[draggable="true"] {
  cursor: move;
  padding: 8px;
  margin: 4px;
  background: #f5f5f5;
}

[draggable="true"]:hover {
  background: #e0e0e0;
}

进阶优化

对于更复杂的场景，可以使用第三方库如vuedraggable：

npm install vuedraggable

import draggable from 'vuedraggable'

export default {
  components: { draggable },
  data() {
    return {
      list: ['Item 1', 'Item 2', 'Item 3']
    }
  }
}

<draggable v-model="list" group="items">
  <div v-for="(element, index) in list" :key="index">
    {{ element }}
  </div>
</draggable>

注意事项

实现拖拽替换时需注意浏览器默认行为的阻止，特别是在dragover事件中要调用preventDefault()。跨组件拖拽时可能需要使用Vuex管理状态。移动端支持需要考虑触摸事件的处理。