Как работает библиотека react-beautiful-dnd для создания перетаскиваемых списков в React?

Библиотека react-beautiful-dnd для создания перетаскиваемых списков в React работает следующим образом: 3

1. Создаётся контекст перетаскивания. 2 Для этого используется компонент DragDropContext, который оборачивает область на экране, где происходит перетаскивание. 23 В контекст передаётся специальная функция onDragEnd, которая будет использоваться для обновления состояния приложения. 2
2. Определяется область, куда можно опускать элементы. 3 Для этого используется компонент Droppable, который определяет уникальную область для опускания элементов. 3
3. Создаётся перетаскиваемый элемент. 3 Для этого используется компонент Draggable, который оборачивает каждый элемент, делая его перетаскиваемым. 3

При завершении операции перетаскивания вызывается функция onDragEnd, которая получает объект результата с информацией о перетаскивании, включая индексы источника и назначения. 3 Эта информация используется для переупорядочивания массива элементов. 3