В настоящее время наиболее популярными и современными решениями для реализации функциональности drag and drop / sortable в React являются две библиотеки: React Beautiful DND и React Sortable HOC.
1. React Beautiful DND - это библиотека, разработанная специально для drag and drop операций в React. Она позволяет создавать интерактивные списки с возможностью перетаскивания и сортировки элементов. Библиотека легко интегрируется в проект, обладает обширной документацией и широким спектром функциональности для настройки поведения перетаскивания и сортировки.
Для использования React Beautiful DND, сначала необходимо установить и добавить библиотеку в проект:
npm install react-beautiful-dnd
Затем необходимо импортировать необходимые компоненты:
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
Далее, следует организовать список элементов, которые можно перетаскивать и сортировать внутри компонента Droppable
:
<DragDropContext onDragEnd={handleDragEnd}> <Droppable droppableId="droppable"> {(provided) => ( <div {...provided.droppableProps} ref={provided.innerRef}> {items.map((item, index) => ( <Draggable draggableId={item.id} index={index}> {(provided) => ( <div {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef} > {item.content} </div> )} </Draggable> ))} {provided.placeholder} </div> )} </Droppable> </DragDropContext>
Функция handleDragEnd
вызывается после завершения перетаскивания элемента и обрабатывает изменения порядка элементов.
2. React Sortable HOC - это библиотека высшего порядка (higher-order component - HOC), которая предоставляет функциональность сортировки элементов. Она также позволяет создавать перетаскиваемые списки элементов, но имеет более простой и интуитивно понятный API.
Для использования React Sortable HOC, сначала нужно установить и добавить библиотеку в проект:
npm install react-sortable-hoc
Затем импортируем необходимый компонент в нашем файле:
import { SortableContainer, SortableElement } from 'react-sortable-hoc';
Далее организуем список элементов, которые могут быть сортированы:
const SortableItem = SortableElement(({value}) => ( <li>{value}</li> )); const SortableList = SortableContainer(({items}) => ( <ul> {items.map((value, index) => ( <SortableItem key={`item-${index}`} index={index} value={value} /> ))} </ul> ));
Теперь, для использования сортировки, необходимо обернуть компонент SortableList
внутри корневого компонента SortableContainer
и добавить обработчик для вызова функции после сортировки:
<SortableContainer onSortEnd={handleSortEnd} useDragHandle> <SortableList items={items} /> </SortableContainer>
Функция handleSortEnd
вызывается после завершения сортировки элементов и обрабатывает изменения порядка элементов.
Оба этих решения предоставляют современный и интуитивно понятный способ реализации функциональности drag and drop / sortable в React. Выбор конкретного решения зависит от требований проекта и предпочтений разработчика.