当前位置：首页 > VUE

vue table实现拖拽

2026-02-17 01:43:39VUE

实现拖拽功能的基本思路

在Vue中实现表格拖拽功能通常需要借助HTML5的拖放API或第三方库。常见的方案包括使用原生API、Sortable.js或Vue.Draggable等库。

使用原生HTML5拖放API

原生HTML5拖放API可以直接在Vue组件中实现，无需额外依赖：

<template>
  <table>
    <tr 
      v-for="(item, index) in items" 
      :key="item.id"
      draggable="true"
      @dragstart="handleDragStart(index)"
      @dragover.prevent="handleDragOver(index)"
      @drop="handleDrop(index)"
    >
      <td>{{ item.name }}</td>
    </tr>
  </table>
</template>

<script>
export default {
  data() {
    return {
      items: [...],
      draggedIndex: null
    }
  },
  methods: {
    handleDragStart(index) {
      this.draggedIndex = index
    },
    handleDragOver(index) {
      // 必须阻止默认行为才能触发drop事件
    },
    handleDrop(index) {
      const itemToMove = this.items[this.draggedIndex]
      this.items.splice(this.draggedIndex, 1)
      this.items.splice(index, 0, itemToMove)
    }
  }
}
</script>

使用Sortable.js库

Sortable.js是一个功能强大的拖拽排序库，可以轻松实现表格行拖拽：

<template>
  <table ref="table">
    <tr v-for="item in items" :key="item.id">
      <td>{{ item.name }}</td>
    </tr>
  </table>
</template>

<script>
import Sortable from 'sortablejs'

export default {
  data() {
    return {
      items: [...]
    }
  },
  mounted() {
    this.initSortable()
  },
  methods: {
    initSortable() {
      new Sortable(this.$refs.table, {
        animation: 150,
        onEnd: (evt) => {
          const item = this.items[evt.oldIndex]
          this.items.splice(evt.oldIndex, 1)
          this.items.splice(evt.newIndex, 0, item)
        }
      })
    }
  }
}
</script>

使用Vue.Draggable组件

Vue.Draggable是基于Sortable.js的Vue组件，使用更加方便：

<template>
  <draggable 
    v-model="items" 
    tag="table"
    item-key="id"
    handle=".handle"
  >
    <template #item="{element}">
      <tr>
        <td class="handle">☰</td>
        <td>{{ element.name }}</td>
      </tr>
    </template>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: { draggable },
  data() {
    return {
      items: [...]
    }
  }
}
</script>

跨表格拖拽实现

如果需要实现表格间的拖拽功能，可以结合使用draggable和droppable区域：

<template>
  <div class="tables-container">
    <table class="source-table">
      <!-- 源表格内容 -->
    </table>

    <table class="target-table">
      <!-- 目标表格内容 -->
    </table>
  </div>
</template>

<script>
export default {
  methods: {
    handleDropToTarget(evt) {
      evt.preventDefault()
      const data = evt.dataTransfer.getData('text/plain')
      // 处理数据移动逻辑
    }
  }
}
</script>

性能优化建议

对于大型表格，虚拟滚动技术可以显著提升拖拽性能。可以考虑使用vue-virtual-scroller等库：

<template>
  <RecycleScroller
    :items="items"
    :item-size="50"
    key-field="id"
    v-slot="{ item }"
  >
    <!-- 拖拽行内容 -->
  </RecycleScroller>
</template>