React е известна JavaScript библиотека с потребителски интерфейс (UI). Можете да използвате React библиотека, за да създавате различни видове уеб приложения, вариращи от приложения за социални медии, платформи за електронна търговия, блогове, приложения с една страница, системи за управление на съдържание (CMS), табла за управление и визуализации на данни, за да споменем само няколко.
Разработчиците могат да разширят функционалността на приложенията на React, като използват различни библиотеки и рамки. Такива библиотеки могат да бъдат групирани в различни класове; Drag-and-drop е библиотечна категория, която е доста популярна.
Функционалността за плъзгане и пускане е взаимодействие с потребителския интерфейс, което позволява на потребителя да щракне/избере елемент на екрана, да го плъзне и пусне върху друг компонент. Перфектен пример за тази функционалност е пренареждането на елементи в списък чрез плъзгане и пускане на елементи до желаното от вас място.
Можете също да използвате функцията Drag-and-Drop в следните случаи;
- Качване на файлове: Потребителите могат да плъзгат и пускат файлове, вместо да превъртат през своите машини, за да избират и качват файлове.
- Kanban дъски: Можете да създадете табло за управление, където потребителите могат да плъзгат и пускат елементи в зависимост от нивата на активност или етапите.
- Галерии с изображения: Можете да имате галерия с изображения, където потребителите могат да качват и пренареждат изображения.
- Widgets: Потребителите могат да персонализират външния вид на приложението чрез плъзгане и пускане на widgets.
- Пазарска количка: Потребителите могат да кликнат върху артикул, да го плъзнат и да го пуснат в количката.
Библиотеката за плъзгане и пускане на React е набор от предварително изградени компоненти, които позволяват на разработчиците да внедряват функционалност за плъзгане и пускане в приложения на React.
Тези библиотеки се доставят с компоненти за многократна употреба, което позволява на разработчиците да създават елементи, които могат да се плъзгат и пускат. Библиотеките обработват различни събития като стартиране с плъзгане, влизане с плъзгане, напускане с плъзгане и пускане.
Съдържание
Как библиотеките с плъзгане и пускане ще помогнат за по-добро взаимодействие с потребителския интерфейс
- Подобрено потребителско изживяване: Функционалността за плъзгане и пускане е интуитивен подход за потребителите да взаимодействат с приложение. Опцията за плъзгане и пускане на елементи вместо ръчното им въвеждане осигурява интерактивно и безпроблемно взаимодействие.
- Опростени работни процеси: Вместо да качвате файлове от различни местоположения на вашия компютър в приложение, можете просто да ги плъзнете и пуснете.
- Повишена продуктивност: Функцията за плъзгане и пускане спестява време, което прави потребителите по-продуктивни.
- Подходящо за мобилни устройства: Мобилните устройства като смартфони и таблети имат ограничено пространство на екрана. Потребителите разчитат предимно на жестове за навигация, което прави плъзгане и пускане страхотно допълнение.
- Осигурява ангажиращи интерфейси: Функцията за плъзгане и пускане може да добави визуална привлекателност към потребителския интерфейс на вашето приложение. Можете да добавите анимации, които предоставят обратна връзка или описват действия, когато потребителите плъзгат и пускат елементи в приложението.
Това са най-добрите Drag and Drop React библиотеки:
Реагирайте DnD
React DnD е набор от помощни програми на React за изграждане на сложни интерфейси за плъзгане и пускане. Тази библиотека е идеална за създаване на приложения, подобни на Trello и Storify, където функционалността за плъзгане и пускане също включва пренос на данни.
Инсталация;
npm инсталирайте react-dnd react-dnd-html5-backend
Можете да импортирате React DnD във вашия React компонент като;
import { useDrag } from 'react-dnd'
Основни функции
- Работи с вашите компоненти: Тази библиотека не предоставя готови джаджи. Въпреки това, той обвива вашите компоненти и инжектира подпори в тях.
- Разширяем: Можете да добавите персонализиран бекенд въз основа на събития с мишката или събития с докосване, когато използвате React DnD библиотека.
- Тестваем: Можете да използвате Jest или Enzyme, за да тествате React DnD код.
- Поддръжка на докосване: React DnD touch backend добавя функционалност за докосване към тази библиотека.
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 и Drop React с отворен код.
Реагирайте Dropzone
React Dropzone е проста React Hook за създаване на съвместима с HTML-5 зона за плъзгане и пускане за файлове.
Инсталация;
npm install –save react-dropzone
или:
прежда добавете react-dropzone
След това можете да импортирате тази библиотека, както следва;
import {useDropzone} from 'react-dropzone';
Характеристика
- Styling Dropzone: Тази библиотека не задава никакви правила за стилизиране и по този начин можете да стилизирате вашите компоненти, както сметнете за добре.
- Позволява на потребителите да дефинират приемливи типове файлове: Можете да инструктирате Dropzone да приеме или отхвърли определени типове файлове, като предоставите опция за приемане.
- Приема персонализирано валидиране: Пропът на валидатора ви позволява да посочите персонализирано валидиране за различни файлове.
React Dropzone е безплатна React библиотека с плъзгане и пускане с отворен код.
React Grid Layout
React Grid Layout е мрежово оформление с възможност за преоразмеряване и плъзгане за React.
Инсталация;
npm инсталирате react-grid-layout
Можете да импортирате тази библиотека, както следва;
import GridLayout from "react-grid-layout";
Характеристика
- Без зависимости: React Grid Layout е изграден изцяло върху React и е без JQuery.
- Джаджи с възможност за преоразмеряване: В допълнение към функцията за плъзгане и пускане можете също да преоразмерявате компонентите.
- Адаптивни точки на прекъсване: Библиотеката предоставя отделно оформление за всяка точка на прекъсване.
- Възможност за персонализиране: Можете да добавяте или премахвате джаджи, без да изграждате отново цялата мрежа.
React Grid Layout е безплатна React библиотека с отворен код.
Реагирайте rnd
React rnd е компонент за React с възможност за плъзгане и промяна на размера.
Инсталация;
npm i -S реагирам-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 Подвижен
React Movable е React библиотека с плъзгане и пускане за списъци и таблици.
Инсталация;
прежда добавете реактивно-подвижен
Можете да импортирате тази библиотека като;
import { List, arrayMove } from 'react-movable';
Характеристика
- Различни опции за плъзгане и пускане, от които да избирате: Библиотеката разполага с шаблонни кодове за различни типове компоненти за плъзгане и пускане, от които да избирате.
- Лека библиотека: React Movable няма зависимости като JQuery. Той е по-малък от 4kB (gzipped).
- Неестествен стил: React Movable не контролира начина, по който може да искате да стилизирате приложението си.
- Поддръжка на докосване: Тази библиотека помага за създаването на приложения, които могат да се използват на смартфони, таблети и всяко устройство с функция за докосване.
- Написано на TypeScript: Можете да въведете типове във вашия код, функционалност, недостъпна в JavaScript.
React Movable е безплатна React библиотека с отворен код.
Плъзгащ се
Draggable е React библиотека с плъзгане и пускане, която позволява на разработчиците да създават събития с плъзгане и пускане чрез абстрахиране на родните събития на браузъра в цялостен API.
Инсталация;
npm инсталирайте @shopify/draggable –save
или чрез прежда:
прежда добавете @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 –save @air/react-drag-to-select
Или
yarn добави @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 инсталирайте реакция-dragula –запазване
Или,
bower инсталирате react-dragula –save
Характеристика
- Възможност за персонализиране: Можете да персонализирате компонентите от React Dragula, за да отговарят на вашите нужди.
- Поддържа докосване: Можете да използвате тази библиотека, за да създавате приложения, които могат да се използват на смартфони, таблети и други сензорни устройства.
- Лек: React Dragula има малък размер на пакета, което го прави перфектен, ако искате вашето приложение React да е малко.
React Dragula е безплатна библиотека с отворен код.
Заключение
Вече имате разнообразие от библиотеки за плъзгане и пускане, които можете да използвате в следващото си React приложение. Изборът на библиотека ще зависи от функциите, които възнамерявате да имате в следващото си приложение, вкуса и предпочитанията.
Ако приложението ви е голямо, можете да използвате множество библиотеки за плъзгане и пускане, за да се погрижите за различни нужди. Повечето от тези библиотеки са съвместими с различни библиотеки за тестване на React, което улеснява изпращането на приложения без грешки.