Современное решение для drag n drop/sortable?

В настоящее время наиболее популярными и современными решениями для реализации функциональности 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. Выбор конкретного решения зависит от требований проекта и предпочтений разработчика.