A React egy híres felhasználói felület (UI) JavaScript-könyvtár. A React könyvtár segítségével különféle webalkalmazásokat hozhat létre, beleértve a közösségi média alkalmazásokat, e-kereskedelmi platformokat, blogokat, egyoldalas alkalmazásokat, tartalomkezelő rendszereket (CMS), irányítópultokat és adatvizualizációkat, hogy néhányat említsünk.
A fejlesztők különféle könyvtárak és keretrendszerek segítségével bővíthetik a React alkalmazások funkcionalitását. Az ilyen könyvtárak különböző osztályokba sorolhatók; A Drag-and-Drop egy könyvtárkategória, amely meglehetősen népszerű.
A Drag and Drop funkció egy olyan felhasználói felület interakció, amely lehetővé teszi a felhasználó számára, hogy rákattintson/kiválasszon egy elemet a képernyőn, majd húzza és ejtse egy másik összetevőre. Tökéletes példa erre a funkcióra az elemek átrendezése egy listában úgy, hogy az elemeket a kívánt helyre húzza át.
A fogd és vidd funkciót a következő esetekben is használhatja;
- Fájlfeltöltés: A felhasználók húzással húzhatnak fájlokat ahelyett, hogy a gépeik között görgetnének a fájlok kiválasztásához és feltöltéséhez.
- Kanban táblák: Létrehozhat egy irányítópultot, ahol a felhasználók a tevékenységi szintek vagy szakaszok függvényében áthúzhatnak elemeket.
- Képgalériák: Létrehozhat egy képgalériát, ahová a felhasználók feltölthetik és átrendezhetik a képeket.
- Widgetek: A felhasználók a widgetek húzásával testreszabhatják az alkalmazás megjelenését.
- Bevásárlókosár: A felhasználók rákattinthatnak egy termékre, húzhatják és dobhatják a kosárba.
A React Drag and Drop könyvtár olyan előre beépített összetevők készlete, amelyek lehetővé teszik a fejlesztők számára, hogy a React alkalmazásokban megvalósítsák a Drag and Drop funkciókat.
Ezek a könyvtárak újrafelhasználható összetevőket tartalmaznak, amelyek lehetővé teszik a fejlesztők számára, hogy áthúzható elemeket hozzanak létre. A könyvtárak különféle eseményeket kezelnek, például drag start, drag enter, drag away és drop.
Hogyan segítik a Drag and Drop könyvtárak a jobb interakciókat a felhasználói felületen
- Továbbfejlesztett felhasználói élmény: A fogd és vidd funkció egy intuitív megközelítés a felhasználók számára az alkalmazásokkal való interakcióhoz. Az elemek kézi bevitele helyett húzásával és viddálásával interaktív és zökkenőmentes interakciót biztosít.
- Egyszerűsített munkafolyamatok: Ahelyett, hogy számítógépe különböző helyeiről töltene fel fájlokat egy alkalmazásba, egyszerűen áthúzhatja őket.
- Megnövelt termelékenység: A fogd és vidd funkció időt takarít meg, így a felhasználók termelékenyebbek.
- Alkalmas mobileszközökhöz: Az olyan mobileszközökön, mint az okostelefonok és táblagépek, korlátozott a képernyőterület. A felhasználók leginkább a gesztusokra hagyatkoznak a navigáció során, ami a fogd és vidd funkciót nagyszerű kiegészítővé teszi.
- Lebilincselő felületeket biztosít: A fogd és vidd funkció vizuális vonzerőt adhat az alkalmazás felhasználói felületéhez. Hozzáadhat animációkat, amelyek visszajelzést adnak, vagy leírják azokat a műveleteket, amelyek során a felhasználók elemeket húznak át az alkalmazáson.
Ezek a legjobb Drag and Drop React könyvtárak:
Reagáljon DnD
A React DnD a React segédprogramok készlete összetett fogd és vidd interfészek létrehozásához. Ez a könyvtár tökéletes a Trello-hoz és a Storify-hoz hasonló alkalmazások létrehozásához, ahol a fogd és vidd funkció az adatátvitelt is magában foglalja.
Telepítés;
npm telepítse a react-dnd react-dnd-html5-backendet
A React DnD-t a React komponensbe importálhatja;
import { useDrag } from 'react-dnd'
Főbb jellemzők
- Működik az összetevőkkel: Ez a könyvtár nem biztosít kész widgeteket. Azonban becsomagolja az alkatrészeket, és kellékeket fecskendez beléjük.
- Bővíthető: A React DnD könyvtár használatakor egéresemények vagy érintési események alapján egyéni háttérprogramot adhat hozzá.
- Tesztelhető: Jest vagy Enzyme segítségével tesztelheti a React DnD kódot.
- Érintéstámogatás: A React DnD érintőképernyős háttérrendszer érintőfunkciókkal egészíti ki ezt a könyvtárat.
A React DnD egy ingyenes, nyílt forráskódú könyvtár.
React Húzható
A React Draggable egy egyszerű, de hatékony React könyvtár, amely megkönnyíti a húzható elemek létrehozását.
Telepítés;
npm install react-húzható
A React Draggable használatához importálja az alábbiak szerint a React összetevőt.
import Draggable from 'react-draggable';
Jellemzők
- Könnyen telepíthető és konfigurálható: A kezdéshez csak telepítenie és importálnia kell a könyvtárat. Egyes összetevőket is importálhat a könyvtárból.
- Kompatibilis a vanília JavaScript-szel és a React-tal: A React Draggable sima JavaScript-szel az alábbiak szerint használható;
let Draggable = require('react-draggable');
let DraggableCore = Draggable.DraggableCore;
- Kompatibilis más React könyvtárakkal: A React Draggable használható más könyvtárakkal, például a React Grid Layouttal.
A React Draggable egy ingyenes, nyílt forráskódú Drap and Drop React könyvtár.
React Dropzone
A React Dropzone egy egyszerű React Hook HTML-5-kompatibilis drag and drop zóna létrehozásához a fájlokhoz.
Telepítés;
npm install – a react-dropzone mentése
vagy:
fonal add react-dropzone
Ezt a könyvtárat az alábbiak szerint importálhatja;
import {useDropzone} from 'react-dropzone';
Jellemzők
- Styling Dropzone: Ez a könyvtár nem határoz meg stílusszabályokat, így az összetevőit úgy alakíthatja, ahogy jónak látja.
- Lehetővé teszi a felhasználók számára elfogadható fájltípusok meghatározását: A Dropzone-t utasíthatja bizonyos fájltípusok elfogadására vagy elutasítására az elfogadási javaslat megadásával.
- Elfogadja az egyéni érvényesítést: Az érvényesítő prop lehetővé teszi, hogy egyéni érvényesítést adjon meg különböző fájlokhoz.
A React Dropzone egy ingyenes, nyílt forráskódú Drag and Drop React könyvtár.
React Grid Layout
A React Grid Layout egy átméretezhető és húzható rácselrendezés a React számára.
Telepítés;
npm install react-grid-layout
Ezt a könyvtárat az alábbiak szerint importálhatja;
import GridLayout from "react-grid-layout";
Jellemzők
- Függőségmentes: A React Grid Layout kizárólag a React-re épül, és mentes a JQuery-től.
- Átméretezhető widgetek: A fogd és vidd funkció mellett az összetevőket is átméretezheti.
- Reszponzív töréspontok: A könyvtár minden törésponthoz külön elrendezést biztosít.
- Testreszabható: A teljes rács újraépítése nélkül adhat hozzá vagy távolíthat el widgeteket.
A React Grid Layout egy ingyenes, nyílt forráskódú React könyvtár.
React rnd
A React rnd a React húzható és átméretezhető összetevője.
Telepítés;
npm i -S react-rnd
Vagy
fonal add react-rnd
Jellemzők
- Egyszerű: A React rnd-t egyszerűnek, de nagyon hatékonynak tervezték.
- Kompatibilis a TypeScript-szel és a JavaScripttel is: A React rnd-t az alkalmazással együtt használhatja, függetlenül attól, hogy JavaScript vagy TypeScript segítségével konfigurálta-e.
- Támogatja az átméretezést: Könnyedén átméretezheti a React rnd segítségével létrehozott komponenseket igényeinek megfelelően.
A React rnd egy ingyenes, nyílt forráskódú React könyvtár.
React Virtualized dnd
A React Virtualized dnd egy fogd és vidd React keretrendszer, amely beépített virtualizáló görgetősávokat tartalmaz.
Telepítés;
npm install –react-virtualized-dnd mentése
A React Virtualized dnd-t más néven importálhatja;
import ExampleBoard from 'react-virtualized-dnd';
Jellemzők
- Különféle összetevők közül választhat: Az összetevők „Rögzített magasság”, „Változó magasság” és „Csoportozható ejthető elemek” csoportba vannak csoportosítva.
- Testreszabható: testreszabhatja a React Virtualized dnd összetevőit igényeinek megfelelően.
A React Virtualized dnd egy nyílt forráskódú React keretrendszer, amelynek forráskódja a GitHubon található.
React Mozgatható
A React Movable egy fogd-és-vidd React könyvtár listákhoz és táblázatokhoz.
Telepítés;
fonal add react-mozgatható
Ezt a könyvtárat mint;
import { List, arrayMove } from 'react-movable';
Jellemzők
- Különféle fogd és vidd opciók közül választhat: A könyvtár a különböző típusú fogd és vidd komponensekhez tartozó alapkódokat tartalmaz, amelyek közül választhat.
- Könnyű könyvtár: A React Movable nem rendelkezik olyan függőséggel, mint a JQuery. Kisebb, mint 4 kB (gzip).
- Elfogadatlan stílus: A React Movable nem szabályozza, hogy milyen stílust szeretne alakítani az alkalmazásban.
- Érintéstámogatás: Ez a könyvtár segít olyan alkalmazásokat létrehozni, amelyek használhatók okostelefonokon, táblagépeken és bármilyen érintőfunkciós eszközön.
- TypeScript-ben írva: Types-t vezethet be a kódjába, amely funkció nem érhető el a JavaScriptben.
A React Movable egy ingyenes, nyílt forráskódú React könyvtár.
Húzható
A Draggable egy drag-and-drop React könyvtár, amely lehetővé teszi a fejlesztők számára, hogy a natív böngészőesemények egy átfogó API-ba absztrahálva drag-and-drop eseményeket hozzanak létre.
Telepítés;
npm install @shopify/draggable – mentés
vagy fonallal:
fonal hozzáadása @shopify/húzható
A Dragable-t másként importálhatja a React alkalmazásba;
import { Draggable } from '@shopify/draggable';
Jellemzők
- Kategorizált komponensek: Az összetevők kategorizálása miatt könnyű megtalálni a pontos komponenst. Ezek az összetevők testreszabhatók.
- Kompatibilis a főbb böngészőkkel: A Dragablet olyan böngészőkkel is használhatja, mint a Google Chrome, a Mozilla Firefox és az Apple Safari.
- Támogatja a TypeScriptet: Ha ezzel a könyvtárral dolgozik, TypeScript-definíciókat adhat a kódjához.
- Támogatja a bővítményeket: A Draggable funkcióit bővítheti olyan bővítményekkel, mint a Collidable és a SwapAnimation.
A Draggable egy ingyenes, nyílt forráskódú React-könyvtár, amelyet a közreműködők tartanak fenn.
React Húzza a kiválasztáshoz
A React drag-to-select egy React-könyvtár, amellyel húzással kiválaszthatja az alkalmazást.
Telepítés;
npm install – mentés @air/react-drag-to-select
Vagy
fonal add @air/react-drag-to-select
Ezt a könyvtárat az alábbiak szerint importálhatja az alkalmazásba;
import { useSelectionContainer } from '@air/react-drag-to-select'
Jellemzők
- Egyszerű: Ez a könyvtár nem jelöl ki elemeket. A könyvtár azonban kirajzolja a kiválasztási mezőt, és megadja a koordinátákat.
- Támogatja a TypeScriptet: A React Drag-to-select könyvtár TypeScriptben van írva, ami azt jelenti, hogy használhatja a TypeScript és JavaScript nyelven írt React alkalmazásokkal.
- Támogatja a tesztelést: Ezt a könyvtárat a legtöbb React tesztelési keretrendszerrel használhatja.
A React Drag-to-select egy ingyenes, nyílt forráskódú könyvtár.
Reagálj Dragula
A React Dragula egy egyszerű fogd és vidd React könyvtár.
Telepítés;
npm install react-dragula –save
Vagy,
bower install react-dragula –save
Jellemzők
- Testreszabható: testreszabhatja a React Dragula összetevőit igényeinek megfelelően.
- Támogatja az érintést: Ezzel a könyvtárral olyan alkalmazásokat hozhat létre, amelyek okostelefonokon, táblagépeken és más érintőképernyős eszközökön használhatók.
- Könnyű: A React Dragula kis csomagmérettel rendelkezik, így tökéletes, ha azt szeretné, hogy a React alkalmazás kicsi legyen.
A React Dragula egy ingyenes, nyílt forráskódú könyvtár.
Következtetés
Mostantól számos fogd és vidd programkönyvtár áll rendelkezésére, amelyeket a következő React alkalmazásban használhat. A könyvtár választása a következő alkalmazásban használni kívánt funkcióktól, ízléstől és preferenciáktól függ.
Ha az alkalmazása nagy, használhat több fogd és vidd könyvtárat a különböző igények kielégítésére. A legtöbb ilyen könyvtár kompatibilis a különböző React tesztelési könyvtárakkal, így egyszerű a hibamentes alkalmazások szállítása.
