vue实现列拖拽

Vue 实现列拖拽功能

使用原生 HTML5 拖放 API

在 Vue 中可以通过原生 HTML5 的拖放 API 实现列拖拽功能。需要处理 draggable、dragstart、dragover 和 drop 事件。

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

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4'],
      draggedIndex: null
    }
  },
  methods: {
    handleDragStart(event, index) {
      this.draggedIndex = index
      event.dataTransfer.effectAllowed = 'move'
    },
    handleDragOver(event, index) {
      event.preventDefault()
      event.dataTransfer.dropEffect = 'move'
    },
    handleDrop(event, index) {
      if (this.draggedIndex !== null) {
        const item = this.items.splice(this.draggedIndex, 1)[0]
        this.items.splice(index, 0, item)
        this.draggedIndex = null
      }
    }
  }
}
</script>

<style>
.draggable-item {
  padding: 10px;
  margin: 5px;
  background: #f0f0f0;
  cursor: move;
}
</style>

使用第三方库 Vue.Draggable

Vue.Draggable 是一个基于 Sortable.js 的 Vue 组件，可以更简单地实现拖拽功能。

安装依赖：

npm install vuedraggable

使用示例：

<template>
  <div>
    <draggable 
      v-model="items" 
      @start="drag=true" 
      @end="drag=false"
      item-key="id"
    >
      <template #item="{element}">
        <div class="draggable-item">
          {{ element.name }}
        </div>
      </template>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: { draggable },
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ],
      drag: false
    }
  }
}
</script>

<style>
.draggable-item {
  padding: 10px;
  margin: 5px;
  background: #f0f0f0;
}
</style>

实现表格列拖拽

对于表格列的拖拽，可以使用类似的原理，但需要处理表头元素的拖放。

<template>
  <table>
    <thead>
      <tr>
        <th 
          v-for="(col, index) in columns" 
          :key="col.key"
          draggable="true"
          @dragstart="handleDragStart($event, index)"
          @dragover.prevent="handleDragOver($event, index)"
          @drop="handleDrop($event, index)"
        >
          {{ col.title }}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in data" :key="row.id">
        <td v-for="col in columns" :key="col.key">
          {{ row[col.key] }}
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { key: 'name', title: 'Name' },
        { key: 'age', title: 'Age' },
        { key: 'address', title: 'Address' }
      ],
      data: [
        { id: 1, name: 'John', age: 20, address: 'New York' },
        { id: 2, name: 'Jane', age: 24, address: 'London' }
      ],
      draggedColumnIndex: null
    }
  },
  methods: {
    handleDragStart(event, index) {
      this.draggedColumnIndex = index
      event.dataTransfer.effectAllowed = 'move'
    },
    handleDragOver(event, index) {
      event.preventDefault()
      event.dataTransfer.dropEffect = 'move'
    },
    handleDrop(event, index) {
      if (this.draggedColumnIndex !== null) {
        const column = this.columns.splice(this.draggedColumnIndex, 1)[0]
        this.columns.splice(index, 0, column)
        this.draggedColumnIndex = null
      }
    }
  }
}
</script>

注意事项

• 移动设备不支持原生 HTML5 拖放 API，需要使用触摸事件或专门的移动端库
• 复杂的拖拽场景建议使用成熟的第三方库如 Vue.Draggable
• 拖拽操作会影响数据顺序，需要确保数据同步更新
• 对于大型列表，考虑添加拖拽时的视觉反馈和性能优化

以上方法可以根据具体需求选择适合的实现方式，Vue.Draggable 提供了更多高级功能如动画、拖拽手柄、限制区域等，适合复杂场景。