10 nejlepších knihoven Drag and Drop React pro snadné interakce s uživatelským rozhraním

autor:
Tweet
Share
Share
Pin

React je známá knihovna JavaScript uživatelského rozhraní (UI). Knihovnu React můžete použít k vytváření různých druhů webových aplikací, od aplikací pro sociální média, platforem elektronického obchodování, blogů, jednostránkových aplikací, systémů pro správu obsahu (CMS), řídicích panelů a vizualizací dat, abychom zmínili alespoň některé.

Vývojáři mohou rozšířit funkčnost aplikací React pomocí různých knihoven a frameworků. Takové knihovny lze seskupit do různých tříd; Drag-and-Drop je kategorie knihoven, která je poměrně oblíbená.

Funkce Drag and Drop je interakce uživatelského rozhraní, která umožňuje uživateli kliknout/vybrat prvek na obrazovce, přetáhnout jej a pustit na jinou komponentu. Dokonalým příkladem této funkce je přeskupování položek v seznamu přetažením položek na požadované místo.

Funkci Drag-and-Drop můžete použít také v následujících případech;

  • Nahrávání souborů: Uživatelé mohou soubory vybírat a nahrávat přetahováním, aniž by museli procházet svými počítači.
  • Kanban desky: Můžete vytvořit řídicí panel, kde mohou uživatelé přetahovat položky v závislosti na úrovních aktivity nebo fázích.
  • Galerie obrázků: Můžete mít galerii obrázků, kam mohou uživatelé nahrávat a přeskupovat obrázky.
  • Widgety: Uživatelé si mohou přizpůsobit vzhled aplikace přetažením widgetů.
  • Nákupní košík: Uživatelé mohou kliknout na položku, přetáhnout ji a vložit do košíku.

Knihovna React Drag and Drop je sada předpřipravených komponent, které umožňují vývojářům implementovat funkce Drag and Drop v aplikacích React.

Tyto knihovny přicházejí s opakovaně použitelnými komponentami, které vývojářům umožňují vytvářet prvky, které lze přetahovat. Knihovny zpracovávají různé události, jako je spuštění přetažení, zadání přetažení, přetažení a odchod.

Jak Drag and Drop knihovny pomohou v lepší interakci s uživatelským rozhraním

  • Vylepšené uživatelské prostředí: Funkce přetahování je intuitivním přístupem pro uživatele k interakci s aplikací. Možnost přetahování položek namísto jejich ručního zadávání poskytuje interaktivní a bezproblémovou interakci.
  • Zjednodušené pracovní postupy: Místo odesílání souborů z různých umístění vašeho počítače do aplikace je můžete jednoduše přetáhnout.
  • Vyšší produktivita: Funkce přetažení šetří čas a zvyšuje produktivitu uživatelů.
  • Vhodné pro mobilní zařízení: Mobilní zařízení jako chytré telefony a tablety mají omezený prostor na obrazovce. Uživatelé se při navigaci většinou spoléhají na gesta, díky čemuž je přetahování úžasným doplňkem.
  • Poskytuje poutavá rozhraní: Funkce drag-and-drop může uživatelskému rozhraní vaší aplikace dodat vizuální přitažlivost. Můžete přidat animace, které poskytují zpětnou vazbu nebo popisují akce, když uživatelé přetahují položky do aplikace.

Toto jsou nejlepší knihovny Drag and Drop React:

Reagovat DnD

React DnD je sada obslužných programů React pro vytváření složitých rozhraní typu drag-and-drop. Tato knihovna je ideální pro vytváření aplikací podobných Trello a Storify, kde funkce drag-and-drop také zahrnuje přenos dat.

Instalace;

npm install reagovat-dnd reagovat-dnd-html5-backend

React DnD můžete importovat do komponenty React jako; 

import { useDrag } from 'react-dnd'

Klíčové vlastnosti

  • Funguje s vašimi komponentami: Tato knihovna neposkytuje hotové widgety. Vaše komponenty však obalí a vstříkne do nich rekvizity.
  • Rozšiřitelné: Při používání knihovny React DnD můžete přidat vlastní backend na základě událostí myši nebo dotykových událostí.
  • Testovatelné: K testování kódu React DnD můžete použít Jest nebo Enzyme.
  • Dotyková podpora: Dotykový backend React DnD přidává do této knihovny dotykové funkce.

React DnD je bezplatná knihovna s otevřeným zdrojovým kódem.

Reagovat Draggable

React Draggable je jednoduchá, ale výkonná knihovna React, která usnadňuje vytváření přetahovatelných prvků.

Instalace;

npm install reagovat-draggable

Chcete-li použít React Draggable, importujte do komponenty React následovně. 

import Draggable from 'react-draggable';

Funkce

  • Snadná instalace a konfigurace: Abyste mohli začít, stačí nainstalovat a importovat knihovnu. Můžete také importovat jednotlivé komponenty z knihovny.
  • Kompatibilní s vanilkovým JavaScriptem a Reactem: React Draggable můžete použít s prostým JavaScriptem následovně;
let Draggable = require('react-draggable');

let DraggableCore = Draggable.DraggableCore;
  • Kompatibilní s jinými knihovnami React: React Draggable můžete použít s jinými knihovnami, jako je React Grid Layout.

React Draggable je bezplatná, open-source knihovna Drap and Drop React.

Reagovat Dropzone

React Dropzone je jednoduchý React Hook pro vytvoření zóny přetahování souborů v souladu s HTML-5.

Instalace;

npm install –save reagovat-dropzone

nebo:

příze přidat reakt-dropzone

Tuto knihovnu pak můžete importovat následovně;

import {useDropzone} from 'react-dropzone';

Funkce

  • Styling Dropzone: Tato knihovna nenastavuje žádná pravidla stylingu, a proto můžete své komponenty stylovat, jak uznáte za vhodné.
  • Umožňuje uživatelům definovat přijatelné typy souborů: Můžete dát Dropzone pokyn, aby přijala nebo odmítla určité typy souborů, a to poskytnutím podpory pro přijetí.
  • Přijímá vlastní ověření: Podpora validátoru vám umožňuje zadat vlastní ověření pro různé soubory.

React Dropzone je bezplatná knihovna Drag and Drop React s otevřeným zdrojovým kódem.

React Grid Layout

React Grid Layout je rozvržení mřížky pro React, které lze měnit a přetahovat.

Instalace;

npm install reagovat-grid-layout

Tuto knihovnu můžete importovat následovně;

import GridLayout from "react-grid-layout";

Funkce

  • Bez závislostí: React Grid Layout je postaven čistě na Reactu a neobsahuje JQuery.
  • Widgety se změnou velikosti: Kromě funkce přetažení můžete také změnit velikost komponent.
  • Responzivní zarážky: Knihovna poskytuje samostatné rozvržení pro každý bod přerušení.
  • Přizpůsobitelné: Můžete přidat nebo odebrat widgety, aniž byste museli znovu sestavovat celou mřížku.

React Grid Layout je bezplatná knihovna React s otevřeným zdrojovým kódem.

Reagovat rnd

React rnd je komponenta React, kterou lze přetahovat a měnit její velikost.

Instalace;

npm i -S reakce-rnd

Nebo

příze přidat reagovat-rnd

Funkce

  • Jednoduché: React rnd je navržen tak, aby byl jednoduchý, ale velmi výkonný.
  • Kompatibilní s TypeScript i JavaScriptem: React rnd můžete používat se svou aplikací bez ohledu na to, zda jste ji nakonfigurovali pomocí JavaScriptu nebo TypeScriptu.
  • Podporuje změnu velikosti: Komponenty vytvořené pomocí React rnd můžete snadno změnit tak, aby vyhovovaly vašim potřebám.

React rnd je bezplatná knihovna React s otevřeným zdrojovým kódem.

Reagovat Virtualized dnd

React Virtualized dnd je drag-and-drop framework React, který obsahuje vestavěné virtualizační posuvníky.

Instalace;

npm install –save reagovat-virtualized-dnd

React Virtualized dnd můžete importovat jako; 

import ExampleBoard from 'react-virtualized-dnd';

Funkce

  • Různé komponenty na výběr: Komponenty jsou seskupeny do „Fixed Height“, „Proměnná výška“ a „Groupable droppables“.
  • Přizpůsobitelné: Komponenty z React Virtualized dnd si můžete přizpůsobit tak, aby vyhovovaly vašim potřebám.

React Virtualized dnd je open-source framework React, jehož zdrojový kód je hostován na GitHubu.

Reagovat Pohyblivý

React Movable je přetahovací knihovna React pro seznamy a tabulky.

Instalace;

příze přidat reakt-pohyblivý

Tuto knihovnu můžete importovat jako;

import { List, arrayMove } from 'react-movable';

Funkce

  • Různé možnosti přetažení, ze kterých si můžete vybrat: Knihovna má standardní kódy pro různé typy komponent přetahování, ze kterých si můžete vybrat.
  • Lehká knihovna: React Movable nemá závislosti, jako je JQuery. Má méně než 4 kB (gzip).
  • Styl bez komentáře: React Movable nekontroluje, jak byste mohli chtít upravit svou aplikaci.
  • Dotyková podpora: Tato knihovna pomáhá vytvářet aplikace, které lze používat na chytrých telefonech, tabletech a jakémkoli zařízení s dotykovou funkcí.
  • Napsáno v TypeScript: Můžete zavést Types do svého kódu, což je funkce nedostupná v JavaScriptu.

React Movable je bezplatná knihovna React s otevřeným zdrojovým kódem.

Přetahovatelné

Draggable je knihovna React typu drag-and-drop, která umožňuje vývojářům vytvářet události typu drag-and-drop abstrahováním nativních událostí prohlížeče do komplexního rozhraní API.

Instalace;

npm install @shopify/draggable – uložit

nebo přes přízi:

příze přidat @shopify/draggable

Draggable můžete importovat do své aplikace React jako; 

import { Draggable } from '@shopify/draggable';

Funkce

  • Kategorizované komponenty: Nalezení přesné komponenty k použití je snadné, protože komponenty jsou kategorizovány. Tyto komponenty jsou přizpůsobitelné.
  • Kompatibilní s hlavními prohlížeči: Draggable můžete použít s prohlížeči, jako je Google Chrome, Mozilla Firefox a Apple Safari.
  • Podporuje TypeScript: Při práci s touto knihovnou můžete do kódu přidat definice TypeScript.
  • Podporuje pluginy: Funkci Draggable můžete rozšířit pomocí pluginů, jako jsou Collidable a SwapAnimation.

Draggable je bezplatná knihovna React s otevřeným zdrojovým kódem, kterou spravují přispěvatelé.

Reagovat Přetažením vyberte

React drag-to-select je knihovna React, kterou můžete použít k přidání funkce drag-to-select do vaší aplikace.

Instalace;

npm install –save @air/react-drag-to-select

Nebo

příze přidat @air/react-přetažením-to-select

Tuto knihovnu můžete importovat do své aplikace následovně;

import { useSelectionContainer } from '@air/react-drag-to-select'

Funkce

  • Jednoduché: Tato knihovna nevybírá položky. Knihovna však nakreslí výběrové pole a poskytne vám souřadnice.
  • Podporuje TypeScript: Knihovna React Drag-to-select je napsána v TypeScript, což znamená, že ji můžete použít s aplikacemi React napsanými v TypeScript a JavaScript.
  • Podporuje testování: Tuto knihovnu můžete použít s většinou testovacích rámců React.

React Drag-to-select je bezplatná knihovna s otevřeným zdrojovým kódem.

Reagovat Dragula

React Dragula je jednoduchá knihovna React typu drag-and-drop.

Instalace;

npm install reagovat-dragula –uložit

Nebo,

bower install reagovat-dragula –save

Funkce

  • Přizpůsobitelné: Komponenty z React Dragula si můžete přizpůsobit tak, aby vyhovovaly vašim potřebám.
  • Podporuje dotyk: Pomocí této knihovny můžete vytvářet aplikace, které lze používat na chytrých telefonech, tabletech a dalších dotykových zařízeních.
  • Lehký: React Dragula má malou velikost balíku, takže je perfektní, pokud chcete, aby byla aplikace React malá.

React Dragula je bezplatná knihovna s otevřeným zdrojovým kódem.

Závěr

Nyní máte řadu knihoven Drag-and-Drop, které můžete použít ve své další aplikaci React. Výběr knihovny bude záviset na funkcích, které hodláte mít ve své další aplikaci, vkusu a preferencích.

Pokud je vaše aplikace velká, můžete použít několik knihoven přetažení, abyste uspokojili různé potřeby. Většina z těchto knihoven je kompatibilní s různými testovacími knihovnami React, což usnadňuje dodávání aplikací bez chyb.