table能够像antd react版本那样提供行数据拖拽排序的demo

[gaorubin1990]

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

希望table能够像antd react版本那样提供行数据拖拽排序的demo

What does the proposed API look like?

提供完成demo

[5dong]

同样遇到这个需求，暂时没想到解决文案，感觉不是很好加其它拖拽组件

[SeasonGuo]

这个需求我使用H5的Draggable自己封装实现的。
主要使用customRow属性。把attrs的draggable设置为true，
然后实现h5的draggable的几个事件就可以了。

[SeasonGuo]

不晓得这个需求使用Vue-Dragable怎么实现操作，能贴一下代码吗？

[kiteoath]

@SeasonGuo 说的对，原理就是用dragable组件绑定拖拽事件，然后改变column的width属性就可以了
但是在1.4版本的:scroll='{x:2000}'中2000不能设置成true
示例代码可以看这里：https://www.jianshu.com/p/89b8ccd1eca0

[zkwolf]

https://codesandbox.io/s/draggable-table-e07sm 用vue-draggable简单做了一个，没仔细测

[NBGGA]

https://codesandbox.io/s/draggable-table-e07sm用vue-draggable简单做了一个，没仔细测

确实，对于我的项目来说稍微改动一下就能用了，我使用的是Ant Design Pro of Vue的<s-table>，对于使用<a-table>的同学来说会更方便，需要改进的地方是拖动的时候动画不那么明显

[ikarosu]

这个需求我使用H5的Draggable自己封装实现的。
主要使用customRow属性。把attrs的draggable设置为true，
然后实现h5的draggable的几个事件就可以了。

你可以贴一个你原生js实现的版本demo

[ypzhenga]

https://codesandbox.io/s/draggable-table-e07sm 用vue-draggable简单做了一个，没仔细测

请教个问题 这个地方为何要使用事件总线去进行消息的传递呢 直接emit会有什么问题吗

[zkwolf]

https://codesandbox.io/s/draggable-table-e07sm 用vue-draggable简单做了一个，没仔细测

请教个问题 这个地方为何要使用事件总线去进行消息的传递呢 直接emit会有什么问题吗

直接emit好像是接收不到吧，中间有很多层组件

[ypzhenga]

https://codesandbox.io/s/draggable-table-e07sm 用vue-draggable简单做了一个，没仔细测

请教个问题 这个地方为何要使用事件总线去进行消息的传递呢 直接emit会有什么问题吗

直接emit好像是接收不到吧，中间有很多层组件

好的这个我了解了！

还有个问题就是示例里面的move方法貌似不起作用呢

[YangHeLi]

https://codesandbox.io/s/draggable-table-e07sm 用vue-draggable简单做了一个，没仔细测

请教个问题 这个地方为何要使用事件总线去进行消息的传递呢 直接emit会有什么问题吗

直接emit好像是接收不到吧，中间有很多层组件

好的这个我了解了！

还有个问题就是示例里面的move方法貌似不起作用呢

我想问下,这个问题解决了么

[zkwolf]

https://codesandbox.io/s/draggable-table-e07sm 用vue-draggable简单做了一个，没仔细测

请教个问题 这个地方为何要使用事件总线去进行消息的传递呢 直接emit会有什么问题吗

直接emit好像是接收不到吧，中间有很多层组件

好的这个我了解了！

还有个问题就是示例里面的move方法貌似不起作用呢

我想问下,这个问题解决了么

后面看了一下其实不需要用move方法，Vue.Draggable会自动修改数据

[hezhongfeng]

https://codesandbox.io/s/draggable-table-e07sm 用vue-draggable简单做了一个，没仔细测

请教个问题 这个地方为何要使用事件总线去进行消息的传递呢 直接emit会有什么问题吗

直接emit好像是接收不到吧，中间有很多层组件

这里可以利用provide一个onDrag，然后在wrapper里面调用this.onDrag这种方式，比事件总线方便和优雅点

[celizi]

https://codepen.io/xiongq/pen/BaLMbNj

[xiaoxin-sky]

vue3 antd antdesign table 拖拽实现 Hook 实现

/* Vue table draggable Hook  */
/* antd vue 版本 table 拖拽 hook  */
/**
 * antd vue 版本 table 拖拽 hook
 * @param dataSource table数据集合
 * @returns customRow 行属性方法
 */
function DraggableHook<T>(dataSource: Array<T>) {
  let dragItem: T;
  let targItem: T;
  const customRow = (record: T) => {
    return {
      draggable: true,
      ondrag(e: DragEvent) {
        dragItem = record;
      },
      ondrop(e: DragEvent) {
        targItem = record;
      },
      ondragend(e: DragEvent) {
        if (dragItem !== targItem) {
          const dragItemIndex = dataSource.indexOf(dragItem);
          const targItemIndex = dataSource.indexOf(targItem);
          // 解构交换
          [dataSource[dragItemIndex], dataSource[targItemIndex]] = [
            dataSource[targItemIndex],
            dataSource[dragItemIndex],
          ];
        }
      },
      ondragover(e: DragEvent) {
        return false;
      },
    };
  };
  return customRow;
}

export default DraggableHook;

用法

<template>
  <a-table :dataSource="dataSource" :columns="columns" :customRow="customRow" />
</template>
const customRow = DraggableHook<TabItem>(dataSource);
setup(){
  return {
    customRow
  }
}

[github-actions]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.