Library. Drag & Drop (React)

🧱 Суть

Для реализации Drag & Drop в React обычно используют готовые библиотеки.

Они позволяют:

перетаскивать элементы
менять их порядок
перемещать между контейнерами
создавать интерактивные интерфейсы (Kanban, Dashboard и т.п.)

📦 Проблема

Нередко приходится реализовать DnD решения в рамках проекта, но отписывать вручную такой механизм не всегда стоит того времени, что это займет.

✅ Решение

Использовать готовые библиотеки, которые были созданы для этих целей.

💻 Код

1. @dnd-kit

Современная и наиболее популярная библиотека.

Подходит для:

сортировки списков
Kanban-досок
перетаскивания между контейнерами
полностью кастомного интерфейс

Плюсы

современный API
отличная поддержка TypeScript
не навязывает структуру DOM
высокая гибкость
активная поддержка

Установка:

npm install @dnd-kit/core @dnd-kit/sortable

Основные инструменты:

import {
  DndContext,
  PointerSensor,
} from '@dnd-kit/core';
 
import {
  SortableContext,
  useSortable,
  arrayMove,
} from '@dnd-kit/sortable';

Чаще всего каждый элемент списка превращается в:

<SortableItem />

2. react-grid-layout

Библиотека для построения перетаскиваемых сеток.

Подходит для:

Dashboard
панелей управления
виджетов
интерфейсов с изменяемым размером блоков

Возможности

Drag & Drop
изменение размеров (Resize)
автоматическое размещение элементов
ограничения размеров

Установка:

npm install react-grid-layout

Пример:

import GridLayout from 'react-grid-layout';
 
const layout = [
  {
    i: 'calculator',
    x: 0,
    y: 0,
    w: 3,
    h: 4,
  },
];
 
<GridLayout
  layout={layout}
  cols={6}
  rowHeight={30}
  width={1200}
>
  <div key="calculator">
    Калькулятор
  </div>
</GridLayout>

3. react-beautiful-dnd

Библиотека от Atlassian.

Долгое время была стандартом для:

списков
Kanban
интерфейсов в стиле Trello

Особенности

Плюсы:

простой API
отличная работа со списками

Минусы:

больше не поддерживается
рекомендуется использовать современные альтернативы (@dnd-kit)

Сравнение

Библиотека	Лучше всего подходит	Статус
`@dnd-kit`	универсальный Drag & Drop, Kanban, сортировка	✅ рекомендуется
`react-grid-layout`	панели управления, сетки, resize	✅ рекомендуется
`react-beautiful-dnd`	списки и Kanban	⚠️ устарела

Когда что использовать

Используй @dnd-kit, если нужно:

сортировать элементы
перемещать карточки
делать Kanban
полностью контролировать интерфейс

Используй react-grid-layout, если нужны:

виджеты
сетка
изменение размеров элементов

Избегай react-beautiful-dnd в новых проектах, если нет необходимости поддерживать существующий код.

🎯 Вывод

@dnd-kit – современный стандарт для большинства задач Drag & Drop
react-grid-layout – лучший выбор для сеток и Dashboard
react-beautiful-dnd – популярная, но больше не развивается
выбор библиотеки зависит от типа интерфейса, а не только от наличия Drag & Drop

LETUNOFF DOCS

Навигация