Представляю Vue DnD Kit: Новая библиотека для создания интерфейсов с перетаскиванием в Vue 3

Привет, Хабр! Сегодня я хочу представить вам свой новый проект — Vue DnD Kit, легковесную и производительную библиотеку для создания интерфейсов с перетаскиванием (drag and drop) для Vue 3.

Важно: Эта публикация — краткая новость о выходе библиотеки. Для полноценных примеров и подробной документации рекомендую перейти на официальный сайт документации.

В экосистеме Vue уже существует несколько решений для реализации drag and drop, но большинство из них либо устарели, либо имеют ограничения в производительности и гибкости. Вдохновившись популярной библиотекой dnd-kit для React, я решил создать аналогичное решение для Vue 3, которое было бы:

Легковесным — минимальное влияние на размер бандла

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

Гибким — позволяет реализовать практически любой сценарий перетаскивания

Доступным — полная поддержка клавиатурной навигации и скринридеров

Библиотека предоставляет интуитивно понятный API, основанный на композабельных функциях Vue 3:

Одна из уникальных особенностей библиотеки — полная поддержка управления с клавиатуры:

W A S D для перемещения элементов

Space/Enter для выбора и сброса

Escape для отмены операции перетаскивания

Tab для навигации между элементами

Это делает ваши интерфейсы доступными для всех пользователей, включая тех, кто не может использовать мышь.

Vue DnD Kit оптимизирован для работы даже с большими списками и сложными интерфейсами:

Минимальные перерисовки компонентов

Эффективные операции с DOM

Предотвращение утечек памяти

Возможность изменять вид контейнера

Возможность изменять вид отображения драгаемого элемента / (драгаемых элементов)

Поддержка групп

Возможность полностью написать свой сенсор детекта элемента где под капотом уже работает автоматическое определение