列表拖拽排序在开发中,是常常遇到的一个需求。现有的拖拽排序轮子已经不少了,做者为何开发一个呢? 作了一个小调查,现有的拖拽存在如下问题:react
正好做者的项目 yapi 须要用到拖拽排序功能,就作了这么一个轮子,专一于列表的拖动排序,不干其余事情。git
react-drag-sortgithub
下面是代码示例:npm
<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 组件包裹下列表,以下:api
<EasyDragSort onChange={this.handleDragMove} data={this.state.list}>
// list...
</EasyDragSort>
复制代码
你们若是用得上,能够关注下,目前尚未添加任何测试代码,你们想用直接复制源码吧。bash