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.
  O 40 let později nás 'Pac-Man' stále chytá za srdce

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.
  Co je adresa IPv4?

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.
  Jak připojím svůj Droid Turbo 2 k počítači

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.