列表拖拽排序在开发中,是经常遇到的一个需求。现有的拖拽排序轮子已经很多了,作者为什么开发一个呢? 做了一个小调查,现有的拖拽存在以下问题:
正好作者的项目 yapi http://yapi.qunar.com 需要用到拖拽排序功能,就做了这么一个轮子,专注于列表的拖动排序,不干其他事情。
github.com/suxiaoxin/r…
下面是代码示例:
- <EasyDragSort onChange={this.handleDragMove} data={this.state.list} >
- {this.state.list.map( (item, index) =>{
- return <div className={this.state.curMoveItem === index? 'item active' : 'item'}
- key={item.name}
- onClick={()=> {
- let newItems = this.state.list.slice();
- newItems.splice(index, 1);
- this.setState({list: newItems});
- }}
- >{item.name}</div>
- })}
- </EasyDragSort>
目前还没有发到 npm,使用是非常简单的,用EasyDragSort 组件包裹下列表,如下:
- <EasyDragSort onChange={this.handleDragMove} data={this.state.list}>
- // list...
- </EasyDragSort>
大家如果用得上,可以关注下,目前还没有添加任何测试代码,大家想用直接复制源码吧。
来源: https://juejin.im/post/5a2dfb6cf265da431440a540