React är ett känt JavaScript-bibliotek för användargränssnitt (UI). Du kan använda React-biblioteket för att skapa olika typer av webbappar, allt från appar för sociala medier, e-handelsplattformar, bloggar, ensidiga applikationer, innehållshanteringssystem (CMS), Dashboards och datavisualiseringar, för att nämna några.
Utvecklare kan utöka funktionaliteten hos React-appar med hjälp av olika bibliotek och ramverk. Sådana bibliotek kan grupperas i olika klasser; Dra-och-släpp är en bibliotekskategori som är ganska populär.
Dra och släpp-funktionalitet är en gränssnittsinteraktion som låter en användare klicka/välja ett element på skärmen, dra det och släppa det på en annan komponent. Ett perfekt exempel på denna funktion är att ordna om objekt i en lista genom att dra och släppa objekt till önskad plats.
Du kan också använda Dra-och-släpp-funktionen i följande fall;
- Filuppladdning: Användare kan dra och släppa filer istället för att bläddra igenom sina maskiner för att välja och ladda upp filer.
- Kanban-tavlor: Du kan skapa en instrumentpanel där användare kan dra och släppa objekt beroende på aktivitetsnivåer eller stadier.
- Bildgallerier: Du kan ha ett bildgalleri där användare kan ladda upp och ordna om bilder.
- Widgets: Användare kan anpassa appens utseende genom att dra och släppa widgets.
- Kundvagn: Användare kan klicka på en vara, dra den och släppa den i kundvagnen.
Ett React Drag and Drop-bibliotek är en uppsättning förbyggda komponenter som tillåter utvecklare att implementera Drag and Drop-funktionalitet i React-applikationer.
Dessa bibliotek kommer med återanvändbara komponenter, vilket gör att utvecklare kan skapa element som kan dras och släppas. Biblioteken hanterar olika händelser som dra start, dra enter, dra leave och drop.
Innehållsförteckning
Hur dra och släpp-bibliotek hjälper till med bättre UI-interaktioner
- Förbättrad användarupplevelse: Dra-och-släpp-funktionen är ett intuitivt sätt för användare att interagera med en applikation. Alternativet att dra och släppa objekt istället för att mata in dem manuellt ger en interaktiv och sömlös interaktion.
- Förenklade arbetsflöden: Istället för att ladda upp filer från olika platser på din dator till ett program kan du helt enkelt dra och släppa dem.
- Ökad produktivitet: Dra-och-släpp-funktioner sparar tid, vilket gör användarna mer produktiva.
- Lämplig för mobila enheter: Mobila enheter som smartphones och surfplattor har begränsat skärmutrymme. Användare förlitar sig mest på gester för navigering, vilket gör dra-och-släpp till ett fantastiskt tillägg.
- Tillhandahåller engagerande gränssnitt: Dra-och-släpp-funktionalitet kan lägga till visuellt tilltalande till din app användargränssnitt. Du kan lägga till animationer som ger feedback eller beskriver åtgärder när användare drar och släpper objekt i appen.
Det här är de bästa Drag and Drop React-biblioteken:
Reagera DnD
React DnD är en uppsättning React-verktyg för att bygga komplexa dra-och-släpp-gränssnitt. Det här biblioteket är perfekt för att skapa appar som liknar Trello och Storify, där dra-och-släpp-funktionalitet också involverar dataöverföring.
Installation;
npm installera react-dnd react-dnd-html5-backend
Du kan importera React DnD till din React-komponent som;
import { useDrag } from 'react-dnd'
Nyckelfunktioner
- Fungerar med dina komponenter: Det här biblioteket tillhandahåller inte färdiga widgets. Men det lindar in dina komponenter och injicerar rekvisita i dem.
- Utökningsbar: Du kan lägga till en anpassad backend baserat på mushändelser eller beröringshändelser när du använder React DnD-biblioteket.
- Testbar: Du kan använda Jest eller Enzyme för att testa React DnD-kod.
- Touch-stöd: React DnD touch-backend lägger till touch-funktionalitet till detta bibliotek.
React DnD är ett gratis bibliotek med öppen källkod.
Reagera Dragable
React Draggable är ett enkelt men kraftfullt React-bibliotek som gör det enkelt att skapa dragbara element.
Installation;
npm installera reagera-dragbar
För att använda React Draggable, importera enligt följande på din React-komponent.
import Draggable from 'react-draggable';
Funktioner
- Lätt att installera och konfigurera: Du behöver bara installera och importera biblioteket för att komma igång. Du kan också importera enskilda komponenter från biblioteket.
- Kompatibel med vanilla JavaScript och React: Du kan använda React Draggable med vanlig JavaScript enligt följande;
let Draggable = require('react-draggable');
let DraggableCore = Draggable.DraggableCore;
- Kompatibel med andra React-bibliotek: Du kan använda React Draggable med andra bibliotek, till exempel React Grid Layout.
React Draggable är ett gratis Drap and Drop React-bibliotek med öppen källkod.
Reagera Dropzone
React Dropzone är en enkel React Hook för att skapa en HTML-5-kompatibel dra-och-släpp-zon för filer.
Installation;
npm install –save react-dropzone
eller:
garn add react-dropzone
Du kan sedan importera detta bibliotek enligt följande;
import {useDropzone} from 'react-dropzone';
Funktioner
- Styling Dropzone: Det här biblioteket anger inga stylingregler, och du kan alltså styla dina komponenter som du vill.
- Tillåter användare att definiera acceptabla filtyper: Du kan instruera Dropzone att acceptera eller avvisa vissa filtyper genom att tillhandahålla acceptprop.
- Accepterar anpassad validering: Validatorns prop låter dig ange anpassad validering för olika filer.
React Dropzone är ett gratis Drag and Drop React-bibliotek med öppen källkod.
Reager Grid Layout
React Grid Layout är en rutnätslayout som kan ändras och dras för React.
Installation;
npm installera react-grid-layout
Du kan importera det här biblioteket enligt följande;
import GridLayout from "react-grid-layout";
Funktioner
- Beroendefri: React Grid Layout är byggd enbart på React och är fri från JQuery.
- Ändra storlek på widgets: Utöver dra-och-släpp-funktionen kan du även ändra storlek på komponenterna.
- Responsiva brytpunkter: Biblioteket tillhandahåller en separat layout för varje brytpunkt.
- Anpassningsbar: Du kan lägga till eller ta bort widgets utan att bygga om hela rutnätet.
React Grid Layout är ett gratis React-bibliotek med öppen källkod.
Reagera rnd
React rnd är en komponent som kan dras och storleksändras för React.
Installation;
npm i -S react-rnd
Eller
garn add react-rnd
Funktioner
- Enkel: React rnd är designad för att vara enkel men väldigt kraftfull.
- Kompatibel med både TypeScript och JavaScript: Du kan använda React rnd med din app oavsett om du har konfigurerat den med JavaScript eller TypeScript.
- Stöder storleksändring: Du kan enkelt ändra storlek på komponenter skapade med React rnd för att passa dina behov.
React rnd är ett gratis React-bibliotek med öppen källkod.
Reager Virtualized dnd
React Virtualized dnd är ett dra-och-släpp React-ramverk som har inbyggda virtualiserande rullningslister.
Installation;
npm install –save react-virtualized-dnd
Du kan importera React Virtualized dnd som;
import ExampleBoard from 'react-virtualized-dnd';
Funktioner
- Olika komponenter att välja mellan: Komponenterna är grupperade i ”Fixed Height”, ”Variable Height” och ”Groupable Dropables”.
- Anpassningsbar: Du kan anpassa komponenterna från React Virtualized dnd för att passa dina behov.
React Virtualized dnd är ett React-ramverk med öppen källkod vars källkod finns på GitHub.
Reagera Rörlig
React Movable är ett dra-och-släpp React-bibliotek för listor och tabeller.
Installation;
garn lägg reager-rörlig
Du kan importera det här biblioteket som;
import { List, arrayMove } from 'react-movable';
Funktioner
- Olika dra-och-släpp-alternativ att välja mellan: Biblioteket har standardkoder för olika typer av dra-och-släpp-komponenter att välja mellan.
- Lättviktsbibliotek: React Movable har inga beroenden som JQuery. Den är mindre än 4kB (gzippad).
- Obetydlig styling: React Movable styr inte hur du kanske vill styla din app.
- Touch-stöd: Detta bibliotek hjälper till att skapa appar som kan användas på smartphones, surfplattor och vilken enhet som helst med touch-funktion.
- Skrivet i TypeScript: Du kan introducera Types till din kod, en funktion som inte är tillgänglig i JavaScript.
React Movable är ett gratis React-bibliotek med öppen källkod.
Dragbar
Draggable är ett dra-och-släpp React-bibliotek som låter utvecklare skapa dra-och-släpp-händelser genom att abstrahera inbyggda webbläsarhändelser till ett omfattande API.
Installation;
npm installera @shopify/draggable – spara
eller via garn:
garn lägg till @shopify/draggable
Du kan importera Draggable till din React-app som;
import { Draggable } from '@shopify/draggable';
Funktioner
- Kategoriserade komponenter: Det är lätt att hitta den exakta komponenten att använda eftersom komponenterna är kategoriserade. Dessa komponenter är anpassningsbara.
- Kompatibel med större webbläsare: Du kan använda Draggable med webbläsare som Google Chrome, Mozilla Firefox och Apple Safari.
- Stöder TypeScript: När du arbetar med det här biblioteket kan du lägga till TypeScript-definitioner till din kod.
- Stöder plugins: Du kan lägga till Draggables funktionalitet med plugins som Collidable och SwapAnimation.
Draggable är ett gratis React-bibliotek med öppen källkod som underhålls av bidragsgivare.
Reagera Dra för att välja
React drag-to-select är ett React-bibliotek som du kan använda för att lägga till drag-to-select-funktionalitet till din applikation.
Installation;
npm installera – spara @air/react-dra-to-select
Eller
garn lägg till @air/react-dra-to-select
Du kan importera det här biblioteket till din app enligt följande;
import { useSelectionContainer } from '@air/react-drag-to-select'
Funktioner
- Enkelt: Det här biblioteket väljer inte objekt. Biblioteket ritar dock urvalsrutan och ger dig koordinater.
- Stöder TypeScript: React Drag-to-select-bibliotek är skrivet i TypeScript, vilket innebär att du kan använda det med React-appar skrivna i TypeScript och JavaScript.
- Stöder testning: Du kan använda det här biblioteket med de flesta React-testramverk.
React Drag-to-select är ett gratis bibliotek med öppen källkod.
Reagera Dragula
React Dragula är ett enkelt dra-och-släpp React-bibliotek.
Installation;
npm installera react-dragula –spara
Eller,
bower installera react-dragula –spara
Funktioner
- Anpassningsbar: Du kan anpassa komponenterna från React Dragula för att passa dina behov.
- Stöder touch: Du kan använda det här biblioteket för att skapa appar som kan användas på smartphones, surfplattor och andra pekenheter.
- Lättvikt: React Dragula har en liten buntstorlek, vilket gör den perfekt om du vill att din React-app ska vara liten.
React Dragula är ett gratis bibliotek med öppen källkod.
Slutsats
Du har nu en mängd olika Dra-och-släpp-bibliotek som du kan använda i din nästa React-applikation. Valet av bibliotek beror på vilka funktioner du tänker ha i din nästa app, smak och preferenser.
Om din app är stor kan du använda flera dra-och-släpp-bibliotek för att tillgodose olika behov. De flesta av dessa bibliotek är kompatibla med olika React-testbibliotek, vilket gör det enkelt att skicka felfria applikationer.