分享一個自己開發的 react拖拽排序元件

hellosean發表於2019-03-01
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>
複製程式碼

大家如果用得上，可以關注下，目前還沒有新增任何測試程式碼，大家想用直接複製原始碼吧。

相關文章