分享一個本身開發的 react拖拽排序組件

列表拖拽排序在開發中，是常常遇到的一個需求。現有的拖拽排序輪子已經不少了，做者爲何開發一個呢？ 作了一個小調查，現有的拖拽存在如下問題：

1. 排序庫大多功能太全，支持各類場景的拖拽，致使包太大
2. 使用複雜，學習成本高
3. 跟 react 不搭配，react 基於 state控制組件的渲染，部分拖拽庫仍是基於 dom 操做

正好做者的項目 yapi 須要用到拖拽排序功能，就作了這麼一個輪子，專一於列表的拖動排序，不幹其餘事情。

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>
複製代碼

你們若是用得上，能夠關注下，目前尚未添加任何測試代碼，你們想用直接複製源碼吧。