拖拽功能之水平拖动图片

1实现技术

• 项目运行环境：ant pro
• 拖拽技术插件：

              react-sortable-hoc        实现拖拽功能

             array-move                   实现拖拽过程中数据处理

两个重要的API

react-sortable-hoc - npm

import { SortableContainer, SortableElement } from 'react-sortable-hoc';  

       react-sortable-hoc 的两个 HOC， HOC，本质上高阶组件是参数为组件，返回值为新组件的函数。 

SortableElement

      每个需要被拖拽元素的容器，使用时传入每个拖拽元素对应的组件即可

const SortablePic = SortableElement((props: any) => <Pic {...props} />);