React — відома бібліотека JavaScript інтерфейсу користувача (UI). Ви можете використовувати бібліотеку React для створення різних видів веб-додатків, починаючи від додатків для соціальних мереж, платформ електронної комерції, блогів, односторінкових додатків, систем керування вмістом (CMS), інформаційних панелей і візуалізацій даних тощо.
Розробники можуть розширювати функціональність додатків React за допомогою різних бібліотек і фреймворків. Такі бібліотеки можна згрупувати в різні класи; Drag-and-Drop — це бібліотечна категорія, яка є досить популярною.
Функція перетягування — це взаємодія з інтерфейсом користувача, яка дозволяє користувачеві клацати/вибирати елемент на екрані, перетягувати його та опускати на інший компонент. Прекрасним прикладом цієї функції є перевпорядкування елементів у списку шляхом перетягування елементів у потрібне місце.
Ви також можете використовувати функцію перетягування в таких випадках;
- Завантаження файлів: користувачі можуть перетягувати файли замість того, щоб прокручувати свої машини, щоб вибрати та завантажити файли.
- Дошки Kanban: ви можете створити інформаційну панель, де користувачі зможуть перетягувати елементи залежно від рівня активності чи етапів.
- Галереї зображень: у вас може бути галерея зображень, куди користувачі можуть завантажувати та змінювати порядок зображень.
- Віджети: користувачі можуть налаштувати зовнішній вигляд програми, перетягуючи віджети.
- Кошик для покупок: користувачі можуть натиснути на товар, перетягнути його та опустити в кошик.
Бібліотека React Drag and Drop — це набір попередньо створених компонентів, які дозволяють розробникам реалізувати функцію Drag and Drop у програмах React.
Ці бібліотеки постачаються з повторно використовуваними компонентами, що дозволяє розробникам створювати елементи, які можна перетягувати. Бібліотеки обробляють різні події, такі як перетягнути початок, перетягнути вхід, перетягнути залишити та скинути.
Як бібліотеки Drag and Drop допоможуть покращити взаємодію інтерфейсу користувача
- Покращена взаємодія з користувачем: функція перетягування — це інтуїтивно зрозумілий підхід для взаємодії користувачів із програмою. Можливість перетягування елементів замість введення вручну забезпечує інтерактивну та плавну взаємодію.
- Спрощені робочі процеси: замість того, щоб завантажувати файли з різних розташувань вашого комп’ютера в програму, ви можете просто перетягнути їх.
- Підвищення продуктивності: функція перетягування економить час, підвищуючи продуктивність користувачів.
- Підходить для мобільних пристроїв: такі мобільні пристрої, як смартфони та планшети, мають обмежений простір на екрані. Користувачі здебільшого покладаються на жести для навігації, що робить перетягування чудовим доповненням.
- Надає привабливі інтерфейси: функція перетягування може додати візуальної привабливості інтерфейсу користувача вашої програми. Ви можете додати анімацію, яка надає відгук або описує дії, коли користувачі перетягують елементи в програмі.
Це найкращі бібліотеки Drag and Drop React:
Реагувати DnD
React DnD — це набір утиліт React для створення складних інтерфейсів перетягування. Ця бібліотека ідеально підходить для створення програм, подібних до Trello та Storify, де функція перетягування також передбачає передачу даних.
монтаж;
npm інсталювати реакцію-dnd react-dnd-html5-сервер
Ви можете імпортувати React DnD у свій компонент React як;
import { useDrag } from 'react-dnd'
Ключові особливості
- Працює з вашими компонентами: ця бібліотека не надає готових віджетів. Однак він обгортає ваші компоненти та впроваджує в них пропи.
- Розширюваність: ви можете додати спеціальний серверний механізм на основі подій миші або подій дотику під час використання бібліотеки React DnD.
- Можна перевірити: ви можете використовувати Jest або Enzyme для перевірки коду React DnD.
- Підтримка дотику: бекенд React DnD додає сенсорні функції до цієї бібліотеки.
React DnD — це безкоштовна бібліотека з відкритим кодом.
React Draggable
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 Dropzone — це простий React Hook для створення зони перетягування файлів, сумісної з HTML-5.
монтаж;
npm install –save react-dropzone
або:
пряжа додати react-dropzone
Потім ви можете імпортувати цю бібліотеку наступним чином;
import {useDropzone} from 'react-dropzone';
особливості
- Styling Dropzone: ця бібліотека не встановлює жодних правил стилю, тому ви можете стилізувати свої компоненти так, як вважаєте за потрібне.
- Дозволяє користувачам визначати прийнятні типи файлів: ви можете вказати Dropzone прийняти або відхилити певні типи файлів, надавши параметр accept.
- Приймає спеціальну перевірку: властивість валідатора дозволяє вказати спеціальну перевірку для різних файлів.
React Dropzone — це безкоштовна бібліотека React Drag and Drop із відкритим кодом.
Макет сітки React
React Grid Layout — це макет сітки зі змінним розміром і можливість перетягування для React.
монтаж;
npm встановити макет react-grid
Ви можете імпортувати цю бібліотеку наступним чином;
import GridLayout from "react-grid-layout";
особливості
- Без залежностей: React Grid Layout створено виключно на React і не містить JQuery.
- Віджети зі змінним розміром: окрім функції перетягування, ви також можете змінювати розміри компонентів.
- Чуйні точки зупину: бібліотека надає окремий макет для кожної точки зупину.
- Можливість налаштування: ви можете додавати або видаляти віджети, не перебудовуючи всю сітку.
React Grid Layout — це безкоштовна бібліотека React із відкритим кодом.
Реагувати rnd
React rnd — це компонент React, який можна перетягувати та змінювати розмір.
монтаж;
npm i -S react-rnd
Або
yarn add react-rnd
особливості
- Простий: React rnd створений як простий, але дуже потужний.
- Сумісність із TypeScript і JavaScript: ви можете використовувати React rnd зі своїм додатком, незалежно від того, чи налаштовано ви його на JavaScript чи TypeScript.
- Підтримка зміни розміру: ви можете легко змінити розмір компонентів, створених за допомогою React rnd, відповідно до ваших потреб.
React rnd — це безкоштовна бібліотека React з відкритим кодом.
React Virtualized dnd
React Virtualized dnd — це фреймворк React із можливістю перетягування, який містить вбудовані смуги віртуалізації.
монтаж;
npm install –save react-virtualized-dnd
Ви можете імпортувати React Virtualized dnd як;
import ExampleBoard from 'react-virtualized-dnd';
особливості
- Різноманітність компонентів на вибір: Компоненти згруповані в «Фіксовану висоту», «Змінну висоту» та «Груповані скидання».
- Можливість налаштування: Ви можете налаштувати компоненти React Virtualized dnd відповідно до своїх потреб.
React Virtualized dnd — це платформа React з відкритим вихідним кодом, вихідний код якої розміщено на GitHub.
React Movable
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 install @shopify/draggable –save
або через пряжу:
yarn add @shopify/draggable
Ви можете імпортувати Draggable у свій додаток React як;
import { Draggable } from '@shopify/draggable';
особливості
- Категоризовані компоненти: знайти точний компонент для використання легко, оскільки компоненти класифіковані. Ці компоненти можна налаштувати.
- Сумісність із основними браузерами: ви можете використовувати Draggable з такими браузерами, як Google Chrome, Mozilla Firefox і Apple Safari.
- Підтримує TypeScript: під час роботи з цією бібліотекою ви можете додавати визначення TypeScript до свого коду.
- Підтримка плагінів: ви можете додати до функціональності Draggable за допомогою таких плагінів, як Collidable і SwapAnimation.
Draggable — це безкоштовна бібліотека React з відкритим кодом, яку підтримують учасники.
React Перетягніть, щоб вибрати
React drag-to-select — це бібліотека React, яку можна використовувати для додавання функції перетягування до вибору до вашої програми.
монтаж;
npm install –save @air/react-drag-to-select
Або
yarn add @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 встановити react-dragula –зберегти
Або
bower встановити react-dragula –save
особливості
- Можливість налаштування: ви можете налаштувати компоненти React Dragula відповідно до своїх потреб.
- Підтримка дотику: Ви можете використовувати цю бібліотеку для створення програм, які можна використовувати на смартфонах, планшетах та інших сенсорних пристроях.
- Легкий: React Dragula має невеликий розмір комплекту, що робить його ідеальним, якщо ви хочете, щоб ваш додаток React був маленьким.
React Dragula — це безкоштовна бібліотека з відкритим кодом.
Висновок
Тепер у вас є різноманітні бібліотеки Drag-and-Drop, які ви можете використовувати у своїй наступній програмі React. Вибір бібліотеки залежатиме від функцій, які ви збираєтеся мати у своїй наступній програмі, смаку та вподобань.
Якщо ваша програма велика, ви можете використовувати кілька бібліотек перетягування, щоб задовольнити різні потреби. Більшість із цих бібліотек сумісні з різними бібліотеками для тестування React, що дозволяє легко надсилати додатки без помилок.