React — известная библиотека JavaScript для пользовательского интерфейса (UI). Вы можете использовать библиотеку React для создания различных типов веб-приложений, начиная от приложений для социальных сетей, платформ электронной коммерции, блогов, одностраничных приложений, систем управления контентом (CMS), информационных панелей и визуализации данных, и это лишь некоторые из них.
Разработчики могут расширять функциональность приложений React, используя различные библиотеки и фреймворки. Такие библиотеки можно сгруппировать в разные классы; Drag-and-Drop — довольно популярная библиотечная категория.
Функциональность перетаскивания — это взаимодействие с пользовательским интерфейсом, которое позволяет пользователю щелкнуть/выбрать элемент на экране, перетащить его и перетащить на другой компонент. Прекрасным примером этой функциональности является изменение порядка элементов в списке путем перетаскивания элементов в нужное место.
Вы также можете использовать функцию перетаскивания в следующих случаях;
- Загрузка файлов: пользователи могут перетаскивать файлы вместо того, чтобы прокручивать свои компьютеры, чтобы выбирать и загружать файлы.
- Канбан-доски: вы можете создать панель инструментов, на которую пользователи могут перетаскивать элементы в зависимости от уровня активности или этапа.
- Галереи изображений: у вас может быть галерея изображений, в которую пользователи могут загружать и изменять порядок изображений.
- Виджеты: пользователи могут настраивать внешний вид приложения, перетаскивая виджеты.
- Корзина: пользователи могут щелкнуть элемент, перетащить его в корзину.
Библиотека React Drag and Drop — это набор готовых компонентов, которые позволяют разработчикам реализовывать функции перетаскивания в приложениях React.
Эти библиотеки поставляются с повторно используемыми компонентами, что позволяет разработчикам создавать элементы, которые можно перетаскивать. Библиотеки обрабатывают различные события, такие как начало перетаскивания, вход перетаскивания, выход из перетаскивания и падение.
Оглавление
Как библиотеки перетаскивания помогут улучшить взаимодействие с пользовательским интерфейсом
- Улучшенный пользовательский интерфейс: функция перетаскивания — это интуитивно понятный подход для пользователей к взаимодействию с приложением. Возможность перетаскивания элементов вместо их ввода вручную обеспечивает интерактивное и бесшовное взаимодействие.
- Упрощенные рабочие процессы: вместо того, чтобы загружать файлы из разных мест вашего компьютера в приложение, вы можете просто перетаскивать их.
- Повышение производительности: функция перетаскивания экономит время, повышая продуктивность пользователей.
- Подходит для мобильных устройств. Мобильные устройства, такие как смартфоны и планшеты, имеют ограниченное пространство на экране. Пользователи в основном полагаются на жесты для навигации, что делает перетаскивание отличным дополнением.
- Предоставляет привлекательные интерфейсы: функция перетаскивания может добавить визуальную привлекательность пользовательскому интерфейсу вашего приложения. Вы можете добавить анимацию, которая обеспечивает обратную связь или описывает действия, когда пользователи перетаскивают элементы в приложение.
Это лучшие библиотеки Drag and Drop React:
Реагировать ДнД
React DnD — это набор утилит React для создания сложных интерфейсов с перетаскиванием. Эта библиотека идеально подходит для создания приложений, подобных Trello и Storify, где функция перетаскивания также включает передачу данных.
Монтаж;
установка npm
Вы можете импортировать React DnD в свой компонент React как;
import { useDrag } from 'react-dnd'
Ключевая особенность
- Работает с вашими компонентами: Эта библиотека не предоставляет готовых виджетов. Однако он оборачивает ваши компоненты и внедряет в них свойства.
- Расширяемость: вы можете добавить собственный бэкенд на основе событий мыши или сенсорных событий при использовании библиотеки React DnD.
- Тестируемый: вы можете использовать Jest или Enzyme для тестирования кода React DnD.
- Сенсорная поддержка: сенсорный бэкэнд React DnD добавляет в эту библиотеку сенсорные функции.
React DnD — бесплатная библиотека с открытым исходным кодом.
Реагировать перетаскиванием
React Draggable — это простая, но мощная библиотека React, которая упрощает создание перетаскиваемых элементов.
Монтаж;
npm установить с возможностью перетаскивания
Чтобы использовать React Draggable, импортируйте в свой компонент React, как указано ниже.
import Draggable from 'react-draggable';
Функции
- Простота установки и настройки: вам просто нужно установить и импортировать библиотеку, чтобы начать работу. Вы также можете импортировать отдельные компоненты из библиотеки.
- Совместимость с ванильным JavaScript и React: вы можете использовать React Draggable с простым JavaScript следующим образом;
let Draggable = require('react-draggable');
let DraggableCore = Draggable.DraggableCore;
- Совместимость с другими библиотеками React: вы можете использовать React Draggable с другими библиотеками, такими как React Grid Layout.
React Draggable — это бесплатная библиотека Drap and Drop React с открытым исходным кодом.
Реагировать
React Dropzone — это простой React Hook для создания HTML-5-совместимой зоны перетаскивания для файлов.
Монтаж;
npm install – сохранить реакцию-дропзону
или:
пряжа добавить
Затем вы можете импортировать эту библиотеку следующим образом;
import {useDropzone} from 'react-dropzone';
Функции
- Стилизация Dropzone: эта библиотека не устанавливает никаких правил стилизации, поэтому вы можете стилизовать свои компоненты по своему усмотрению.
- Позволяет пользователям определять допустимые типы файлов: вы можете указать Dropzone принимать или отклонять определенные типы файлов, предоставив параметр accept.
- Принимает пользовательскую проверку: свойство валидатора позволяет указать пользовательскую проверку для разных файлов.
React Dropzone — это бесплатная библиотека React с открытым исходным кодом для перетаскивания.
Макет сетки React
React Grid Layout — это масштабируемая и перетаскиваемая сетка для React.
Монтаж;
npm установить реагирующую сетку-макет
Вы можете импортировать эту библиотеку следующим образом;
import GridLayout from "react-grid-layout";
Функции
- Отсутствие зависимостей: React Grid Layout построен исключительно на React и свободен от JQuery.
- Виджеты с изменяемым размером: помимо функции перетаскивания вы также можете изменять размер компонентов.
- Отзывчивые точки останова: библиотека предоставляет отдельный макет для каждой точки останова.
- Настраиваемость: вы можете добавлять или удалять виджеты, не перестраивая всю сетку.
React Grid Layout — это бесплатная библиотека React с открытым исходным кодом.
Реагировать
React rnd — это перетаскиваемый компонент React с изменяемым размером.
Монтаж;
npm i -S реагировать-rnd
Или
пряжа добавить
Функции
- Простота: React rnd разработан, чтобы быть простым, но очень мощным.
- Совместимость как с TypeScript, так и с JavaScript: вы можете использовать React rnd со своим приложением независимо от того, настроили ли вы его с помощью JavaScript или TypeScript.
- Поддерживает изменение размера: вы можете легко изменить размер компонентов, созданных с помощью React rnd, в соответствии с вашими потребностями.
React rnd — это бесплатная библиотека React с открытым исходным кодом.
Реагировать виртуализированный dnd
React Virtualized dnd — это среда React с функцией перетаскивания, которая имеет встроенные полосы виртуализации.
Монтаж;
npm install – сохранить реакцию-виртуализированный-dnd
Вы можете импортировать React Virtualized dnd как;
import ExampleBoard from 'react-virtualized-dnd';
Функции
- Разнообразие компонентов на выбор: Компоненты сгруппированы в «Фиксированная высота», «Переменная высота» и «Группируемые выпадающие элементы».
- Настраиваемость: вы можете настроить компоненты из React Virtualized dnd в соответствии со своими потребностями.
React Virtualized dnd — это фреймворк React с открытым исходным кодом, исходный код которого размещен на GitHub.
Реагировать подвижно
React Movable — это библиотека React с функцией перетаскивания для списков и таблиц.
Монтаж;
пряжа добавить
Вы можете импортировать эту библиотеку как;
import { List, arrayMove } from 'react-movable';
Функции
- Различные варианты перетаскивания на выбор: в библиотеке есть стандартные коды для различных типов компонентов перетаскивания на выбор.
- Облегченная библиотека: React Movable не имеет зависимостей, таких как JQuery. Это менее 4 КБ (сжатый gzip).
- Безупречный стиль: React Movable не контролирует, как вы можете стилизовать свое приложение.
- Сенсорная поддержка: эта библиотека помогает создавать приложения, которые можно использовать на смартфонах, планшетах и любых устройствах с сенсорными функциями.
- Написано на TypeScript: вы можете ввести типы в свой код — функциональность, недоступная в JavaScript.
React Movable — это бесплатная библиотека React с открытым исходным кодом.
Перетаскиваемый
Draggable — это библиотека React с функцией перетаскивания, которая позволяет разработчикам создавать события перетаскивания, абстрагируя собственные события браузера в комплексный API.
Монтаж;
npm установить @shopify/draggable – сохранить
или через пряжу:
пряжа добавить @shopify/draggable
Вы можете импортировать Draggable в свое приложение React как;
import { Draggable } from '@shopify/draggable';
Функции
- Категоризированные компоненты: найти нужный компонент легко, поскольку компоненты распределены по категориям. Эти компоненты настраиваются.
- Совместимость с основными браузерами: вы можете использовать Draggable с такими браузерами, как Google Chrome, Mozilla Firefox и Apple Safari.
- Поддерживает TypeScript: при работе с этой библиотекой вы можете добавлять определения TypeScript в свой код.
- Поддерживает плагины: вы можете расширить функциональность Draggable с помощью таких плагинов, как Collidable и SwapAnimation.
Draggable — это бесплатная библиотека React с открытым исходным кодом, поддерживаемая участниками.
Реагировать Перетащите, чтобы выбрать
React drag-to-select — это библиотека React, которую вы можете использовать для добавления функции перетаскивания в ваше приложение.
Монтаж;
npm install – сохранить @air/react-drag-to-select
Или
пряжа добавить @air/react-drag-to-select
Вы можете импортировать эту библиотеку в свое приложение следующим образом;
import { useSelectionContainer } from '@air/react-drag-to-select'
Функции
- Простой: эта библиотека не выбирает элементы. Однако библиотека рисует поле выбора и дает вам координаты.
- Поддерживает TypeScript: библиотека React Drag-to-select написана на TypeScript, что означает, что вы можете использовать ее с приложениями React, написанными на TypeScript и JavaScript.
- Поддерживает тестирование: вы можете использовать эту библиотеку с большинством сред тестирования React.
React Drag-to-select — это бесплатная библиотека с открытым исходным кодом.
Реагировать Драгула
React Dragula — это простая библиотека React с функцией перетаскивания.
Монтаж;
npm установить реакцию-драгулу – сохранить
Или,
Bower установить реагировать-драгула-сохранить
Функции
- Настраиваемость: вы можете настроить компоненты React Dragula в соответствии со своими потребностями.
- Поддерживает сенсорный ввод: вы можете использовать эту библиотеку для создания приложений, которые можно использовать на смартфонах, планшетах и других сенсорных устройствах.
- Легкий: React Dragula имеет небольшой размер пакета, что делает его идеальным, если вы хотите, чтобы ваше приложение React было небольшим.
React Dragula — это бесплатная библиотека с открытым исходным кодом.
Заключение
Теперь у вас есть множество библиотек Drag-and-Drop, которые вы можете использовать в своем следующем приложении React. Выбор библиотеки будет зависеть от функций, которые вы собираетесь использовать в своем следующем приложении, вкуса и предпочтений.
Если ваше приложение большое, вы можете использовать несколько библиотек перетаскивания для удовлетворения различных потребностей. Большинство этих библиотек совместимы с различными библиотеками тестирования React, что упрощает выпуск безошибочных приложений.