Drag & Drop — это то, что может улучшить пользовательский опыт, если вы создаете инструменты для графического дизайна, такие как Canva. Несколько дней назад я разработал инструмент для создания обложек для записей блога под названием Cover-Builder, который позволяет создавать красивые изображения для обложек ваших записей. Инструмент в значительной степени опирается на функцию Drag & Drop. Это был первый раз, когда я искал возможность добавить Drag & Drop в любое из моих приложений и, к счастью, нашел несколько классных пакетов.
1. React-Dnd — Когда дело доходит до перетаскивания в различные части вашего приложения, этот пакет наиболее часто используется разработчиками.
Примечание: Вам также потребуется установить второй пакет react-dnd-html5-backend, чтобы react-dnd мог использовать HTML 5 drag-drop API под капотом.
2. React-Beautiful-Dnd — самый известный пакет для создания красивых списков перетаскивания, которые может использовать любой — даже тот, кто не видит. Он предоставляет такие возможности, как мультиперетаскивание, автопрокрутка, поддержка мыши, клавиатуры и сенсорных устройств.
3. React-Draggable — В отличие от пакета react-dnd, здесь вам нужно установить только один пакет. Он предоставляет вам перетаскиваемый компонент, который вы можете обернуть вокруг элемента, который вы хотите перетащить, и это все. Здесь вы также можете передать реквизиты, такие как defaultposition, axis & и некоторые другие для настройки.
4. React-Rnd — Если вы хотите изменить размер элементов с помощью Drag &Drop, тогда это для вас. Как и React-Draggable, он также позволяет передавать некоторые реквизиты для лучшей настройки.
Примечание: У него также есть реквизит bound, который позволяет вам привязать Drag &Drops в определенном регионе.
5. React-Dropzone — Создание функции Drag & Drop для загрузки файлов — не такая простая задача, в нее вовлечено множество событий JS. Этот пакет упрощает работу с файлами Drag & Drop.
🏁 Цель статьи — дать вам краткий обзор доступных пакетов Drag & Drop, которые могут облегчить вам работу с Drag & Drop. Если вы использовали другой пакет, сообщите мне об этом в комментариях.
Спасибо за прочтение.
