React este o bibliotecă JavaScript faimoasă a interfeței de utilizator (UI). Puteți utiliza biblioteca React pentru a crea diferite tipuri de aplicații web, de la aplicații de social media, platforme de comerț electronic, bloguri, aplicații cu o singură pagină, sisteme de management al conținutului (CMS), tablouri de bord și vizualizări de date, pentru a menționa câteva.
Dezvoltatorii pot extinde funcționalitatea aplicațiilor React folosind diferite biblioteci și cadre. Astfel de biblioteci pot fi grupate în diferite clase; Drag-and-drop este o categorie de biblioteci destul de populară.
Funcționalitatea Drag and Drop este o interacțiune a interfeței de utilizare care permite unui utilizator să facă clic/alege un element de pe ecran, să-l tragă și să-l plaseze pe o altă componentă. Un exemplu perfect al acestei funcționalități este rearanjarea elementelor dintr-o listă prin tragerea și plasarea elementelor în locația dorită.
De asemenea, puteți utiliza funcționalitatea Drag-and-Drop în următoarele cazuri;
- Încărcarea fișierelor: utilizatorii pot trage și plasa fișiere în loc să deruleze prin computerele lor pentru a selecta și încărca fișiere.
- Panouri Kanban: puteți crea un tablou de bord în care utilizatorii pot glisa și plasa elemente în funcție de nivelurile sau etapele de activitate.
- Galerii de imagini: puteți avea o galerie de imagini în care utilizatorii pot încărca și rearanja imaginile.
- Widgeturi: utilizatorii pot personaliza aspectul aplicației trăgând și plasând widget-uri.
- Coș de cumpărături: utilizatorii pot face clic pe un articol, îl pot trage și îl pot plasa în coș.
O bibliotecă React Drag and Drop este un set de componente prefabricate care permit dezvoltatorilor să implementeze funcționalitatea Drag and Drop în aplicațiile React.
Aceste biblioteci vin cu componente reutilizabile, permițând dezvoltatorilor să creeze elemente care pot fi trase și plasate. Bibliotecile se ocupă de diferite evenimente, cum ar fi drag start, drag enter, drag leave și drop.
Cuprins
Cum vor ajuta bibliotecile Drag and Drop la interacțiuni mai bune cu interfața de utilizare
- Experiență îmbunătățită a utilizatorului: funcționalitatea drag-and-drop este o abordare intuitivă pentru utilizatorii de a interacționa cu o aplicație. Opțiunea de glisare și plasare a elementelor în loc de a le introduce manual oferă o interacțiune interactivă și fără întreruperi.
- Fluxuri de lucru simplificate: în loc să încărcați fișiere din diferite locații ale computerului dvs. într-o aplicație, puteți pur și simplu să le glisați și să le plasați.
- Productivitate crescută: funcționalitatea de glisare și plasare economisește timp, făcând utilizatorii mai productivi.
- Potrivit pentru dispozitive mobile: Dispozitivele mobile precum smartphone-urile și tabletele au spațiu limitat pe ecran. Utilizatorii se bazează în mare parte pe gesturi pentru navigare, ceea ce face ca drag-and-drop să fie un plus extraordinar.
- Oferă interfețe captivante: funcționalitatea de glisare și plasare poate adăuga atractivitate vizuală interfeței de utilizator a aplicației dvs. Puteți adăuga animații care oferă feedback sau descriu acțiuni pe măsură ce utilizatorii trage și plasează elemente în aplicație.
Acestea sunt cele mai bune biblioteci Drag and Drop React:
Reacționează DnD
React DnD este un set de utilitare React pentru construirea de interfețe complexe de tip drag-and-drop. Această bibliotecă este perfectă pentru crearea de aplicații similare cu Trello și Storify, unde funcționalitatea drag-and-drop implică și transferul de date.
Instalare;
npm instalează react-dnd react-dnd-html5-backend
Puteți importa React DnD în componenta dvs. React ca;
import { useDrag } from 'react-dnd'
Caracteristici cheie
- Funcționează cu componentele dvs.: această bibliotecă nu oferă widget-uri gata făcute. Cu toate acestea, vă înfășoară componentele și injectează elemente de recuzită în ele.
- Extensibil: puteți adăuga un backend personalizat pe baza evenimentelor mouse-ului sau a evenimentelor tactile atunci când utilizați biblioteca React DnD.
- Testabil: puteți utiliza Jest sau Enzyme pentru a testa codul React DnD.
- Suport tactil: backend-ul tactil React DnD adaugă funcționalitate tactilă acestei biblioteci.
React DnD este o bibliotecă gratuită, open-source.
Reacționează Draggable
React Draggable este o bibliotecă React simplă, dar puternică, care facilitează crearea elementelor draggable.
Instalare;
npm install react-draggable
Pentru a utiliza React Draggable, importați după cum urmează pe componenta dvs. React.
import Draggable from 'react-draggable';
Caracteristici
- Ușor de instalat și configurat: trebuie doar să instalați și să importați biblioteca pentru a începe. De asemenea, puteți importa componente individuale din bibliotecă.
- Compatibil cu JavaScript vanilla și React: puteți utiliza React Draggable cu JavaScript simplu, după cum urmează;
let Draggable = require('react-draggable');
let DraggableCore = Draggable.DraggableCore;
- Compatibil cu alte biblioteci React: puteți utiliza React Draggable cu alte biblioteci, cum ar fi React Grid Layout.
React Draggable este o bibliotecă gratuită, open-source, Drap and Drop React.
Reacționează Dropzone
React Dropzone este un simplu React Hook pentru crearea unei zone de drag-and-drop compatibile cu HTML-5 pentru fișiere.
Instalare;
npm install –save react-dropzone
sau:
fire adăuga react-dropzone
Puteți importa apoi această bibliotecă după cum urmează;
import {useDropzone} from 'react-dropzone';
Caracteristici
- Styling Dropzone: această bibliotecă nu stabilește nicio regulă de stilare și, astfel, vă puteți stila componentele după cum credeți de cuviință.
- Permite utilizatorilor să definească tipuri de fișiere acceptabile: puteți solicita Dropzone să accepte sau să respingă anumite tipuri de fișiere, furnizând accept prop.
- Acceptă validarea personalizată: Elementul de validare vă permite să specificați validarea personalizată pentru diferite fișiere.
React Dropzone este o bibliotecă Drag and Drop React gratuită, open-source.
React Grid Layout
React Grid Layout este o grilă redimensionabilă și glisabilă pentru React.
Instalare;
npm instalează react-grid-layout
Puteți importa această bibliotecă după cum urmează;
import GridLayout from "react-grid-layout";
Caracteristici
- Fără dependențe: React Grid Layout este construit exclusiv pe React și nu conține JQuery.
- Widgeturi redimensionabile: pe lângă funcția de glisare și plasare, puteți și redimensiona componentele.
- Puncte de întrerupere receptive: Biblioteca oferă un aspect separat pentru fiecare punct de întrerupere.
- Personalizabil: puteți adăuga sau elimina widget-uri fără a reconstrui întreaga grilă.
React Grid Layout este o bibliotecă React gratuită, open-source.
Reacționează rnd
React rnd este o componentă trasabilă și redimensionabilă pentru React.
Instalare;
npm i -S react-rnd
Sau
yarn add react-rnd
Caracteristici
- Simplu: React rnd este conceput pentru a fi simplu, dar foarte puternic.
- Compatibil atât cu TypeScript, cât și cu JavaScript: puteți utiliza React rnd cu aplicația dvs., indiferent dacă ați configurat-o cu JavaScript sau TypeScript.
- Acceptă redimensionarea: puteți redimensiona cu ușurință componentele create folosind React rnd pentru a se potrivi nevoilor dvs.
React rnd este o bibliotecă React gratuită, open-source.
React Virtualized dnd
React Virtualized dnd este un cadru React de tip drag-and-drop care include bare de defilare de virtualizare încorporate.
Instalare;
npm install –save react-virtualized-dnd
Puteți importa React Virtualized dnd ca;
import ExampleBoard from 'react-virtualized-dnd';
Caracteristici
- Varietate de componente din care să alegeți: Componentele sunt grupate în „Înălțime fixă”, „Înălțime variabilă” și „Păsări grupabile”.
- Personalizat: puteți personaliza componentele din React Virtualized dnd pentru a se potrivi nevoilor dvs.
React Virtualized dnd este un framework React open-source al cărui cod sursă este găzduit pe GitHub.
Reacționează mobil
React Movable este o bibliotecă React de tip drag-and-drop pentru liste și tabele.
Instalare;
adaugă fire reaction-movable
Puteți importa această bibliotecă ca;
import { List, arrayMove } from 'react-movable';
Caracteristici
- Diverse opțiuni de drag-and-drop din care să alegeți: Biblioteca are coduri standard pentru diferite tipuri de componente drag-and-drop din care să alegeți.
- Bibliotecă ușoară: React Movable nu are dependențe precum JQuery. Are mai puțin de 4 kB (gzipped).
- Stil fără opinie: React Movable nu controlează modul în care doriți să vă stilați aplicația.
- Suport tactil: această bibliotecă ajută la crearea de aplicații care pot fi utilizate pe smartphone-uri, tablete și orice dispozitiv cu funcționalitate tactilă.
- Scris în TypeScript: puteți introduce Types în codul dvs., o funcționalitate indisponibilă în JavaScript.
React Movable este o bibliotecă React gratuită, open-source.
Draggable
Draggable este o bibliotecă React drag-and-drop care permite dezvoltatorilor să creeze evenimente drag-and-drop prin abstracția evenimentelor browserului nativ într-un API cuprinzător.
Instalare;
npm install @shopify/draggable –save
sau prin fire:
yarn add @shopify/draggable
Puteți importa Draggable în aplicația dvs. React ca;
import { Draggable } from '@shopify/draggable';
Caracteristici
- Componente clasificate: Găsirea exactă a componentei de utilizat este ușoară, deoarece componentele sunt clasificate. Aceste componente sunt personalizabile.
- Compatibil cu browserele majore: Puteți utiliza Draggable cu browsere precum Google Chrome, Mozilla Firefox și Apple Safari.
- Suportă TypeScript: atunci când lucrați cu această bibliotecă, puteți adăuga definiții TypeScript la codul dvs.
- Suportă pluginuri: puteți adăuga la funcționalitatea Draggable cu plugin-uri precum Collidable și SwapAnimation.
Draggable este o bibliotecă React gratuită, open-source, întreținută de colaboratori.
Reacționați Trageți pentru a selecta
React drag-to-select este o bibliotecă React pe care o puteți folosi pentru a adăuga funcționalitate de drag-to-select aplicației dvs.
Instalare;
instalare npm -save @air/react-drag-to-select
Sau
yarn add @air/react-drag-to-select
Puteți importa această bibliotecă în aplicația dvs. după cum urmează;
import { useSelectionContainer } from '@air/react-drag-to-select'
Caracteristici
- Simplu: această bibliotecă nu selectează articole. Cu toate acestea, biblioteca desenează caseta de selecție și vă oferă coordonatele.
- Suportă TypeScript: Biblioteca React Drag-to-select este scrisă în TypeScript, ceea ce înseamnă că o puteți utiliza cu aplicațiile React scrise în TypeScript și JavaScript.
- Acceptă testarea: puteți utiliza această bibliotecă cu majoritatea cadrelor de testare React.
React Drag-to-select este o bibliotecă gratuită, open-source.
Reactioneaza Dragula
React Dragula este o simplă bibliotecă React cu drag-and-drop.
Instalare;
npm install react-dragula –save
Sau,
bower install react-dragula –save
Caracteristici
- Personalizabil: puteți personaliza componentele de la React Drăgula pentru a se potrivi nevoilor dvs.
- Acceptă atingere: puteți utiliza această bibliotecă pentru a crea aplicații care pot fi utilizate pe smartphone-uri, tablete și alte dispozitive tactile.
- Ușor: React Dragula are o dimensiune mică a pachetului, ceea ce îl face perfect dacă doriți ca aplicația dvs. React să fie mică.
React Dragula este o bibliotecă gratuită, open-source.
Concluzie
Acum aveți o varietate de biblioteci Drag-and-drop pe care le puteți utiliza în următoarea aplicație React. Alegerea bibliotecii va depinde de caracteristicile pe care intenționați să le aveți pentru următoarea aplicație, gust și preferințe.
Dacă aplicația dvs. este mare, puteți utiliza mai multe biblioteci drag-and-drop pentru a răspunde diferitelor nevoi. Cele mai multe dintre aceste biblioteci sunt compatibile cu diverse biblioteci de testare React, ceea ce facilitează livrarea aplicațiilor fără erori.