vue往表格内拖拽实现

实现表格内拖拽功能，可以使用`vuedraggable`插件。该插件是基于Sortable.js构建的，可以很方便地实现拖拽排序、列表拖拽等功能。

具体实现步骤如下：

1. 安装`vuedraggable`插件

npm install vuedraggable --save

2. 在Vue组件中引入`vuedraggable`

import draggable from 'vuedraggable'

export default {
  components: {
    draggable
  },
  // ...
}

3. 准备数据

data () {
  return {
    tableData: [
      { id: 1, name: 'John', age: 28 },
      { id: 2, name: 'Jane', age: 24 },
      { id: 3, name: 'Jack', age: 30 },
      { id: 4, name: 'Bob', age: 26 }
    ]
  }
}

4. 在模板中使用`draggable`组件

<template>
  <div>
    <draggable v-model="tableData" :options="{handle:'.handle'}">
      <table>
        <thead>
          <tr>
            <th>id</th>
            <th>name</th>
            <th>age</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in tableData" :key="item.id">
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.age }}</td>
            <td>
              <span class="handle">拖拽</span>
            </td>
          </tr>
        </tbody>
      </table>
    </draggable>
  </div>
</template>

在上面的代码中，我们将`tableData`数组绑定到`draggable`组件上，并设置了一个句柄（handle）来控制只有在拖拽句柄上才能拖拽。

至此，我们就完成了表格内拖拽的实现。用户可以通过点击拖拽句柄来拖动表格行，实现排序或列表拖拽等功能。