Поделитесь самостоятельно разработанным компонентом сортировки перетаскиванием

React.js

Сортировка списка перетаскиванием часто встречается при разработке. Колесо для сортировки методом перетаскивания уже существует, зачем автор его разработал? После небольшого исследования существующее перетаскивание имеет следующие проблемы:

  1. Большинство библиотек сортировки имеют слишком много функций и поддерживают перетаскивание различных сценариев, что приводит к слишком большим пакетам.
  2. Сложный в использовании и дорогой в освоении
  3. Несовместимо с реакцией, реакция управляет рендерингом компонентов на основе состояния, а некоторые библиотеки перетаскивания по-прежнему основаны на операциях 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>

Если вы можете использовать его, вы можете обратить внимание. Тестовый код еще не добавлен. Если вы хотите его использовать, скопируйте исходный код напрямую.

Категории