如何使用Vue draggable实现表格td单元格之间的div元素拖拽

现有代码的核心问题 #

• 属性名错误：tags是无效属性，Vue Draggable 定义渲染标签的属性为tag，属性名写错会导致组件渲染不符合预期
• DOM结构不合法：直接将draggable作为table的直接子元素，不符合HTML表格结构规范，浏览器会自动将draggable生成的元素移出表格，导致绑定的列表结构错乱，拖拽完全失效
• 逻辑不匹配：现有代码将整行tr作为拖拽项，实现的是整行排序功能，和「td内div跨单元格拖拽」的需求完全不符

调整方案 #

前置准备 #

先安装对应Vue版本的依赖包：

• Vue2 对应安装vuedraggable@2.x版本
• Vue3 对应安装vuedraggable@4.x版本

代码调整 #

template部分

<template>
  <div class="row">
    <div class="col-8">
      <h3>Draggable table div</h3>
      <table class="table table-striped">
        <thead class="thead-dark">
          <tr>
            <th scope="col">Id</th>
            <th scope="col">Name</th>
            <th scope="col">Sport</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, rowIndex) in list" :key="item.rowId">
            <!-- 每个td内单独嵌套draggable，相同group配置支持跨单元格拖拽 -->
            <td scope="row">
              <draggable 
                v-model="item.idCell" 
                group="cellDiv"
                item-key="id"
                @start="drag = true"
                @end="drag = false"
              >
                <template #item="{ element }">
                  <div class="item">{{ element.value }}</div>
                </template>
              </draggable>
            </td>
            <td>
              <draggable 
                v-model="item.nameCell" 
                group="cellDiv"
                item-key="id"
                @start="drag = true"
                @end="drag = false"
              >
                <template #item="{ element }">
                  <div class="item">{{ element.value }}</div>
                </template>
              </draggable>
            </td>
            <td>
              <draggable 
                v-model="item.sportCell" 
                group="cellDiv"
                item-key="id"
                @start="drag = true"
                @end="drag = false"
              >
                <template #item="{ element }">
                  <div class="item">{{ element.value }}</div>
                </template>
              </draggable>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

script部分（以Vue2为例）

<script>
import draggable from 'vuedraggable'
export default {
  components: { draggable },
  data() {
    return {
      drag: false,
      // 调整数据结构，每个单元格对应独立的列表存储拖拽项
      list: [
        {
          rowId: 1,
          idCell: [{ id: 'id-1', value: 1 }],
          nameCell: [{ id: 'name-1', value: '张三' }],
          sportCell: [{ id: 'sport-1', value: '篮球' }]
        },
        {
          rowId: 2,
          idCell: [{ id: 'id-2', value: 2 }],
          nameCell: [{ id: 'name-2', value: '李四' }],
          sportCell: [{ id: 'sport-2', value: '足球' }]
        }
      ]
    }
  }
}
</script>

可选配置 #

如果需要拖拽时直接移动元素（而非复制原元素），可以把group属性修改为：
group: { name: 'cellDiv', pull: 'move', put: true }

内容的提问来源于stack exchange，提问作者chaya lax