List drag-and-drop sorting is a common requirement in development. There are already a lot of drag sorting wheels, why did the author develop one? A small investigation was done and the existing drag-and-drop had the following problems:

  1. Most of the sorting libraries are too full, supporting various scenarios of drag and drop, resulting in packages too large
  2. Complex to use and costly to learn
  3. React does not match react. React controls the rendering of components based on state, and part of the drag-and-drop library is still dom based

As the author’s project YAPI requires drag and drop sorting, he created a wheel that focuses on dragging and sorting lists without doing anything else.

react-drag-sort

Here is an example of code:

<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>
Copy the code

It has not been sent to NPM yet, and it is very simple to use. Package the following table with EasyDragSort component, as follows:

<EasyDragSort  onChange={this.handleDragMove} data={this.state.list}>
// list...
</EasyDragSort>
Copy the code

If you need it, you can pay attention to it, so far no test code has been added, you want to use direct copy of the source code.