React er et berømt JavaScript-bibliotek med brugergrænseflade (UI). Du kan bruge React-biblioteket til at skabe forskellige slags webapps lige fra sociale medie-apps, e-handelsplatforme, blogs, enkeltside-applikationer, indholdsstyringssystemer (CMS), Dashboards og datavisualiseringer, for at nævne nogle få.
Udviklere kan udvide funktionaliteten af React-apps ved hjælp af forskellige biblioteker og rammer. Sådanne biblioteker kan grupperes i forskellige klasser; Træk-og-slip er en bibliotekskategori, der er ret populær.
Træk og slip-funktionalitet er en UI-interaktion, der giver en bruger mulighed for at klikke/vælge et element på skærmen, trække det og slippe det på en anden komponent. Et perfekt eksempel på denne funktionalitet er at omarrangere elementer på en liste ved at trække og slippe elementer til den ønskede placering.
Du kan også bruge træk-og-slip-funktionalitet i følgende tilfælde;
- Filupload: Brugere kan trække og slippe filer i stedet for at rulle gennem deres maskiner for at vælge og uploade filer.
- Kanban-tavler: Du kan oprette et dashboard, hvor brugere kan trække og slippe elementer afhængigt af aktivitetsniveauer eller stadier.
- Billedgallerier: Du kan have et billedgalleri, hvor brugere kan uploade og omarrangere billeder.
- Widgets: Brugere kan tilpasse appens udseende ved at trække og slippe widgets.
- Indkøbskurv: Brugere kan klikke på en vare, trække den og slippe den i indkøbskurven.
Et React Drag and Drop-bibliotek er et sæt forudbyggede komponenter, der giver udviklere mulighed for at implementere Drag and Drop-funktionalitet i React-applikationer.
Disse biblioteker kommer med genanvendelige komponenter, som giver udviklere mulighed for at skabe elementer, der kan trækkes og slippes. Bibliotekerne håndterer forskellige begivenheder såsom træk start, træk ind, træk forlad og slip.
Indholdsfortegnelse
Hvordan træk og slip-biblioteker hjælper med bedre brugergrænseflade-interaktioner
- Forbedret brugeroplevelse: Træk-og-slip-funktionen er en intuitiv tilgang for brugere til at interagere med en applikation. Muligheden for at trække og slippe elementer i stedet for at indtaste dem manuelt giver en interaktiv og problemfri interaktion.
- Forenklede arbejdsgange: I stedet for at uploade filer fra forskellige steder på din computer til et program, kan du blot trække og slippe dem.
- Øget produktivitet: Træk-og-slip-funktionalitet sparer tid, hvilket gør brugerne mere produktive.
- Velegnet til mobile enheder: Mobile enheder som smartphones og tablets har begrænset skærmplads. Brugere er for det meste afhængige af bevægelser til navigation, hvilket gør træk-og-slip til en fantastisk tilføjelse.
- Giver engagerende grænseflader: Træk-og-slip-funktionalitet kan tilføje visuel appel til din apps brugergrænseflade. Du kan tilføje animationer, der giver feedback eller beskriver handlinger, når brugere trækker og slipper elementer på appen.
Dette er de bedste Drag and Drop React-biblioteker:
Reager DnD
React DnD er et sæt React-værktøjer til at bygge komplekse træk-og-slip-grænseflader. Dette bibliotek er perfekt til at skabe apps, der ligner Trello og Storify, hvor træk-og-slip-funktionalitet også involverer dataoverførsel.
Installation;
npm installer react-dnd react-dnd-html5-backend
Du kan importere React DnD til din React-komponent som;
import { useDrag } from 'react-dnd'
Nøglefunktioner
- Fungerer med dine komponenter: Dette bibliotek leverer ikke færdige widgets. Men det pakker dine komponenter ind og sprøjter rekvisitter ind i dem.
- Udvidelig: Du kan tilføje en brugerdefineret backend baseret på musehændelser eller berøringshændelser, når du bruger React DnD-bibliotek.
- Testbar: Du kan bruge Jest eller Enzyme til at teste React DnD-kode.
- Touch-understøttelse: React DnD touch-backend tilføjer berøringsfunktionalitet til dette bibliotek.
React DnD er et gratis, open source-bibliotek.
Reager Trækbar
React Draggable er et simpelt, men kraftfuldt React-bibliotek, der gør det nemt at skabe elementer, der kan trækkes.
Installation;
npm-installation kan reageres og trækkes
For at bruge React Draggable skal du importere som følger på din React-komponent.
import Draggable from 'react-draggable';
Funktioner
- Nem at installere og konfigurere: Du skal blot installere og importere biblioteket for at komme i gang. Du kan også importere individuelle komponenter fra biblioteket.
- Kompatibel med vanilla JavaScript og React: Du kan bruge React Draggable med almindelig JavaScript som følger;
let Draggable = require('react-draggable');
let DraggableCore = Draggable.DraggableCore;
- Kompatibel med andre React-biblioteker: Du kan bruge React Draggable med andre biblioteker, såsom React Grid Layout.
React Draggable er et gratis, open source Drap and Drop React-bibliotek.
Reager Dropzone
React Dropzone er en simpel React Hook til at skabe en HTML-5-kompatibel træk-og-slip-zone til filer.
Installation;
npm install – gem react-dropzone
eller:
garn tilføj react-dropzone
Du kan derefter importere dette bibliotek som følger;
import {useDropzone} from 'react-dropzone';
Funktioner
- Styling Dropzone: Dette bibliotek sætter ingen stylingregler, og du kan dermed style dine komponenter, som det passer dig.
- Giver brugere mulighed for at definere acceptable filtyper: Du kan instruere Dropzone i at acceptere eller afvise bestemte filtyper ved at give accept prop.
- Accepterer tilpasset validering: Validator-prop giver dig mulighed for at specificere tilpasset validering for forskellige filer.
React Dropzone er et gratis, open source Drag and Drop React-bibliotek.
React Grid Layout
React Grid Layout er et gitterlayout, der kan ændres og trækkes, til React.
Installation;
npm installer react-grid-layout
Du kan importere dette bibliotek som følger;
import GridLayout from "react-grid-layout";
Funktioner
- Afhængighedsfri: React Grid Layout er bygget udelukkende på React og er fri for JQuery.
- Widgets, der kan ændres størrelse: Ud over træk-og-slip-funktionen kan du også ændre størrelsen på komponenterne.
- Responsive breakpoints: Biblioteket har et separat layout for hvert breakpoint.
- Kan tilpasses: Du kan tilføje eller fjerne widgets uden at genopbygge hele gitteret.
React Grid Layout er et gratis, open source React-bibliotek.
Reager rnd
React rnd er en komponent, der kan trækkes og ændres størrelse til React.
Installation;
npm i -S react-rnd
Eller
garn tilføj react-rnd
Funktioner
- Enkel: React rnd er designet til at være enkel, men meget kraftfuld.
- Kompatibel med både TypeScript og JavaScript: Du kan bruge React rnd med din app, uanset om du har konfigureret den med JavaScript eller TypeScript.
- Understøtter størrelsesændring: Du kan nemt ændre størrelse på komponenter, der er oprettet ved hjælp af React rnd, så de passer til dine behov.
React rnd er et gratis, open source React-bibliotek.
Reager Virtualiseret dnd
React Virtualized dnd er en træk-og-slip React-ramme, der har indbyggede virtualiserende rullebjælker.
Installation;
npm install –save react-virtualized-dnd
Du kan importere React Virtualized dnd som;
import ExampleBoard from 'react-virtualized-dnd';
Funktioner
- Forskellige komponenter at vælge imellem: Komponenterne er grupperet i “Fixed Height”, “Variable Height” og “Groupable Dropsables”.
- Kan tilpasses: Du kan tilpasse komponenterne fra React Virtualized dnd, så de passer til dine behov.
React Virtualized dnd er en open source React-ramme, hvis kildekode er hostet på GitHub.
Reager Bevægelig
React Movable er et træk-og-slip React-bibliotek til lister og tabeller.
Installation;
garn tilføj reagere-bevægelig
Du kan importere dette bibliotek som;
import { List, arrayMove } from 'react-movable';
Funktioner
- Forskellige træk-og-slip-muligheder at vælge imellem: Biblioteket har boilerplate-koder for forskellige typer træk-og-slip komponenter at vælge imellem.
- Letvægtsbibliotek: React Movable har ikke afhængigheder såsom JQuery. Den er mindre end 4 kB (gzippet).
- Uudtalt styling: React Movable styrer ikke, hvordan du måske vil style din app.
- Touch-understøttelse: Dette bibliotek hjælper med at skabe apps, der kan bruges på smartphones, tablets og enhver enhed med touch-funktionalitet.
- Skrevet i TypeScript: Du kan introducere Types til din kode, en funktionalitet, der ikke er tilgængelig i JavaScript.
React Movable er et gratis, open source React-bibliotek.
Trækbar
Draggable er et træk-og-slip React-bibliotek, der giver udviklere mulighed for at oprette træk-og-slip-begivenheder ved at abstrahere native browser-begivenheder til en omfattende API.
Installation;
npm installer @shopify/draggable – gem
eller via garn:
garn tilføje @shopify/draggable
Du kan importere Dragable til din React-app som;
import { Draggable } from '@shopify/draggable';
Funktioner
- Kategoriserede komponenter: Det er nemt at finde den nøjagtige komponent, der skal bruges, da komponenterne er kategoriseret. Disse komponenter kan tilpasses.
- Kompatibel med større browsere: Du kan bruge Draggable med browsere som Google Chrome, Mozilla Firefox og Apple Safari.
- Understøtter TypeScript: Når du arbejder med dette bibliotek, kan du tilføje TypeScript-definitioner til din kode.
- Understøtter plugins: Du kan tilføje Draggables funktionalitet med plugins som Collidable og SwapAnimation.
Draggable er et gratis, open source React-bibliotek, der vedligeholdes af bidragydere.
Reager Træk for at vælge
React drag-to-select er et React-bibliotek, som du kan bruge til at tilføje træk-til-vælg-funktionalitet til din applikation.
Installation;
npm install – gem @air/react-drag-to-select
Eller
garn tilføj @air/react-drag-to-select
Du kan importere dette bibliotek til din app som følger;
import { useSelectionContainer } from '@air/react-drag-to-select'
Funktioner
- Simpelt: Dette bibliotek vælger ikke elementer. Biblioteket tegner dog valgboksen og giver dig koordinater.
- Understøtter TypeScript: React Drag-to-select-bibliotek er skrevet i TypeScript, hvilket betyder, at du kan bruge det med React-apps skrevet i TypeScript og JavaScript.
- Understøtter test: Du kan bruge dette bibliotek med de fleste React-testrammer.
React Drag-to-select er et gratis, open source-bibliotek.
Reager Dragula
React Dragula er et simpelt træk-og-slip React-bibliotek.
Installation;
npm installer react-dragula – gem
Eller,
bower installer react-dragula – gem
Funktioner
- Kan tilpasses: Du kan tilpasse komponenterne fra React Dragula, så de passer til dine behov.
- Understøtter berøring: Du kan bruge dette bibliotek til at oprette apps, der kan bruges på smartphones, tablets og andre berøringsenheder.
- Letvægts: React Dragula har en lille bundtstørrelse, hvilket gør den perfekt, hvis du vil have din React-app til at være lille.
React Dragula er et gratis, open source-bibliotek.
Konklusion
Du har nu en række træk-og-slip-biblioteker, som du kan bruge på din næste React-applikation. Biblioteksvalget afhænger af de funktioner, du har til hensigt at have på din næste app, smag og præferencer.
Hvis din app er stor, kan du bruge flere træk-og-slip-biblioteker til at imødekomme forskellige behov. De fleste af disse biblioteker er kompatible med forskellige React-testbiblioteker, hvilket gør det nemt at sende fejlfrie applikationer.