跨recyclerview item拖拽_react-dnd：实现跨表格的行拖拽

react-dnd：实现跨表格的行拖拽

时间：2019.03.20

应用场景

需求：

DanaStudio v4.2中数据治理 - 标准化：实现两个表格间行数据的拖拽联动效果

效果图：

图一

由Table拖拽排序带来的思考

一些尝试

最初曾尝试通过对Table组件的 columns 属性进行包裹，以期达到封装 DragSource 和 DropTarget 的效果，但后来发现，antd根部不会识别这样的修改。

那么antd到底是否开放了一些自定义事件供开发者使用呢？

官方案例

antd官方文档提供了Table单一表格的行拖拽排序，并没有暴露出更多可详细配置的API。

在拖拽排序的案例中，BodyRow既是DragSource，也是DopTarget。那么既然如此，理应也允许针对BodyRow进行二次封装，达到DragSource与DropTarget的独立，从而实现跨表格的行（row）或列（column）的拖拽。

在开始本文的探讨之前，先来回顾一下react dnd的基础知识。

React DnD回顾

• 什么是react dnd

React DnD是一组React高阶组件，它可以帮开发者构建复杂的拖放接口，同时保持组件解耦。借助react dnd的拖动事件在组件之间传输数据，组件根据拖放事件改变它们的外观和状态（数据）。

• 核心API

react-dnd使用的核心API有以下几个：

1. DragSource：用于包装你需要拖动的组件࿰