分享一个自己开发的 react拖拽排序组件
发布于 6 年前 作者 suxiaoxin 8032 次浏览 来自 分享

列表拖拽排序在开发中,是经常遇到的一个需求。现有的拖拽排序轮子已经很多了,作者为什么开发一个呢? 做了一个小调查,现有的拖拽存在以下问题:

  1. 排序库大多功能太全,支持各种场景的拖拽,导致包太大
  2. 使用复杂,学习成本高
  3. 跟 react 不搭配,react 基于 state控制组件的渲染,部分拖拽库还是基于 dom 操作

正好作者的项目 yapi 需要用到拖拽排序功能,就做了这么一个轮子,专注于列表的拖动排序,不干其他事情。 https://github.com/suxiaoxin/react-drag-sort 下面是代码示例:

<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>

大家如果用得上,可以关注下,目前还没有添加任何测试代码,大家想用直接复制源码吧,未来如果有必要,我会发到 Npm

回到顶部