/** * 整体思路 * 1. 将传入的 children 全部拷贝并添加拖拽属性/方法 * 2. 当触发拖拽事件(dragStart)时,隐藏原元素,拷贝副本作为拖拽动画 * a. 通过 createPortal 将副本元素挂载到 body 上 * b. 副本元素位置通过 fakeVDOMAxis 属性来设置 * c. 全局监听 dragOver 事件,通过鼠标位置计算元素位置,从而更新 fakeVDOMAxis -> 触发视图更新 * 3. 拖拽完成后触发 dragEnd 事件,进行收尾逻辑 * 4. 开放 onChange 回调,并传入更新后的虚拟 DOM 列表,交换元素的 index 值 * 5. 开放 onDragEnd 回调,对应原生事件 * * 待优化项 * 1. 拖拽过程中每调用一次 protal 方法,都会重新生成一个虚拟节点,无法复用原有节点,造成资源浪费 * */ import React from 'react'; import { DragProps } from './interface'; declare const DragList: React.FC; export default DragList;