vue用sortablejs怎么实现跨表格拖拽

这个问题属于技术问题，我可以回答。在Vue中实现跨表格拖拽，可以使用sortablejs插件。首先，在组件中引入sortablejs，然后在需要拖拽的元素上加上v-sortable属性，同时在拖拽元素的目标位置上加上v-sortable="{group: 'tableName'}"，其中group后面的参数为表格的名称。这样就可以实现跨表格拖拽了。

相关问题

vue2+antd表格+sortablejs 实现两个表格数据拖拽完整代码

下面是一个完整的示例代码，基于Vue2，antd和sortablejs实现了两个表格之间的数据拖拽功能。

<template>
  <div>
    <h2>表格1</h2>
    <a-table :columns="columns" :dataSource="list1" rowKey="id">
      <template #name="{text, record}">
        <span v-text="text" v-sortable="'table1'"></span>
      </template>
    </a-table>
    <h2>表格2</h2>
    <a-table :columns="columns" :dataSource="list2" rowKey="id">
      <template #name="{text, record}">
        <span v-text="text" v-sortable="'table2'"></span>
      </template>
    </a-table>
  </div>
</template>

<script>
import Sortable from 'sortablejs'
import { Table } from 'ant-design-vue'

export default {
  components: {
    'a-table': Table,
  },
  data() {
    return {
      columns: [
        { title: '姓名', dataIndex: 'name' },
        { title: '年龄', dataIndex: 'age' },
      ],
      list1: [
        { id: 1, name: '张三', age: 18 },
        { id: 2, name: '李四', age: 20 },
        { id: 3, name: '王五', age: 22 },
      ],
      list2: [],
    }
  },
  mounted() {
    Sortable.create(this.$el.querySelector('.ant-table-tbody'), {
      group: {
        name: 'table1',
        put: ['table2'],
      },
      animation: 150,
      fallbackOnBody: true,
      swapThreshold: 0.65,
      onEnd: this.onEnd,
    })
    Sortable.create(this.$el.querySelectorAll('.ant-table-tbody')[1], {
      group: {
        name: 'table2',
        put: ['table1'],
      },
      animation: 150,
      fallbackOnBody: true,
      swapThreshold: 0.65,
      onEnd: this.onEnd,
    })
  },
  methods: {
    onEnd(evt) {
      const { oldIndex, newIndex, item } = evt
      if (oldIndex !== newIndex) {
        const table = evt.to.dataset.table
        if (table === 'table1') {
          // 从表格1拖拽到表格2
          this.list2.splice(newIndex, 0, this.list1.splice(oldIndex, 1)[0])
        } else {
          // 从表格2拖拽到表格1
          this.list1.splice(newIndex, 0, this.list2.splice(oldIndex, 1)[0])
        }
      }
    },
  },
}
</script>

在此示例中，我们使用了Ant Design Vue中的`<a-table>`组件来渲染表格，并在模板中使用了Vue的`v-sortable`指令来绑定Sortable实例。在mounted钩子函数中，我们为每个表格的tbody元素创建了Sortable实例，并将它们分组为“table1”和“table2”。然后，我们在onEnd方法中处理拖拽完成事件，并根据拖拽的方向和目标表格移动数据。

需要注意的是，在模板中，我们使用了`<span>`元素包装了表格中的文本数据，来实现拖拽时只能拖拽文本数据而不是整个行。同时，在Sortable实例的options中，我们设置了`fallbackOnBody`为true，这样拖拽元素在拖拽结束时会回到原来的位置，而不是消失。

vue2实现使用SortableJs插件进行表格内的数据项拖拽排序 加点击事件无反应

在Vue 2中，要使用SortableJS插件对表格内的数据项进行拖拽排序并添加点击事件，首先你需要安装SortableJS库以及Vue-Sortable-Table组件（如果你还没有安装的话）。你可以通过npm或yarn进行安装：

npm install sortablejs @vue/sortable-table
# 或者
yarn add sortablejs @vue/sortable-table

接下来，创建一个SortableTable组件，并在其中绑定SortableJS实例。同时，设置`handleClick`函数监听点击事件：

<template>
  <div>
    <table :sortable="options" @click="handleClick">
      <!-- 表格列和行 -->
      <tr v-for="(item, index) in items" :key="index">
        <!-- 数据项和拖拽操作 -->
        <td contenteditable="true" :class="{ dragged: draggingItem === item }"
            @mousedown.prevent="startDrag(item)" @mouseup="endDrag(item)">
          {{ item.value }}
        </td>
        <!-- 点击事件处理 -->
        <td @click="onRowClick(item)">点击</td>
      </tr>
    </table>
  </div>
</template>

<script>
import Sortable from 'sortablejs';

export default {
  data() {
    return {
      items: [], // 初始化的数据数组
      draggingItem: null,
      options: {
        group: '__items__', // 组名
        animation: 150, // 动画效果时间
        onSortEnd: (evt) => {
          this.updateOrder(evt.newIndex, evt.oldIndex);
        },
      },
    };
  },
  methods: {
    startDrag(item) {
      this.draggingItem = item;
    },
    endDrag(item) {
      this.draggingItem = null;
    },
    updateOrder(newIndex, oldIndex) {
      const newItems = [...this.items];
      [newItems[newIndex], newItems[oldIndex]] = [newItems[oldIndex], newItems[newIndex]];
      this.items = newItems;
    },
    handleClick(item) {
      console.log('点击了第', item.index, '行');
      // 这里可以根据需要处理点击事件
    },
    onRowClick(item) {
      this.handleClick(item);
    },
  },
};
</script>

在这个例子中，`handleClick`函数会在点击数据项时打印日志，你可以根据需求自定义这个功能。注意要在组件内部注册Sortable实例，并在`@click`事件上监听`onRowClick`。