新的轮子, React 拖拽排序

·  阅读 2226

React-Dnd 官网就有一个不错的例子,如果不纠结的话,应该够用。如果你也有其他方面的需求,不妨看看下面几个功能:

1. 支持嵌套

    拖拽嵌套应该是一个很常见的功能,而且拖拽应该是可以跨层拖拽。  

2. 支持拖入新增

3. 支持水平及垂直列表

4. 支持 Grid

5. 支持拖拽删除

6. 更真实的交换元素判断

React-Dnd 例子

这样会有一个问题,只要未越过中线,就不会发生交换。因为是按照鼠标的位置判断中线,而不是块本身的位置。如下

优化方法,按照块本身的边界去判断中线,而非鼠标位置

7. 移出边界,恢复最初状态

8. 动画

动画使用 `react-flip-toolkit` 库实现

项目地址:github.com/limaofeng/a…

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改