React to słynna biblioteka JavaScript interfejsu użytkownika (UI). Możesz użyć biblioteki React do tworzenia różnego rodzaju aplikacji internetowych, od aplikacji społecznościowych, platform eCommerce, blogów, aplikacji jednostronicowych, systemów zarządzania treścią (CMS), pulpitów nawigacyjnych i wizualizacji danych, by wymienić tylko kilka.
Programiści mogą rozszerzać funkcjonalność aplikacji React za pomocą różnych bibliotek i frameworków. Takie biblioteki można podzielić na różne klasy; Przeciągnij i upuść to dość popularna kategoria bibliotek.
Funkcja przeciągnij i upuść to interakcja interfejsu użytkownika, która pozwala użytkownikowi kliknąć/wybrać element na ekranie, przeciągnąć go i upuścić na inny komponent. Doskonałym przykładem tej funkcjonalności jest zmiana kolejności elementów na liście poprzez przeciąganie i upuszczanie elementów w wybrane miejsce.
Możesz także użyć funkcji przeciągnij i upuść w następujących przypadkach;
- Przesyłanie plików: użytkownicy mogą przeciągać i upuszczać pliki zamiast przewijać swoje maszyny, aby wybierać i przesyłać pliki.
- Tablice Kanban: Możesz utworzyć pulpit nawigacyjny, w którym użytkownicy mogą przeciągać i upuszczać elementy w zależności od poziomów aktywności lub etapów.
- Galerie obrazów: możesz mieć galerię obrazów, w której użytkownicy mogą przesyłać i zmieniać kolejność obrazów.
- Widżety: Użytkownicy mogą dostosowywać wygląd aplikacji, przeciągając i upuszczając widżety.
- Koszyk: Użytkownicy mogą kliknąć element, przeciągnąć go i upuścić w koszyku.
Biblioteka React Drag and Drop to zestaw gotowych komponentów, które umożliwiają programistom implementację funkcji Drag and Drop w aplikacjach React.
Biblioteki te są dostarczane z komponentami wielokrotnego użytku, umożliwiając programistom tworzenie elementów, które można przeciągać i upuszczać. Biblioteki obsługują różne zdarzenia, takie jak przeciągnięcie startu, przeciągnięcie wejścia, przeciągnięcie wyjścia i upuszczenie.
Spis treści:
Jak biblioteki typu „przeciągnij i upuść” pomogą w lepszych interakcjach interfejsu użytkownika
- Lepsze wrażenia użytkownika: funkcja przeciągania i upuszczania to intuicyjne podejście do interakcji użytkowników z aplikacją. Opcja przeciągania i upuszczania elementów zamiast ręcznego wprowadzania ich zapewnia interaktywną i bezproblemową interakcję.
- Uproszczone przepływy pracy: Zamiast przesyłać pliki z różnych lokalizacji komputera do aplikacji, możesz je po prostu przeciągać i upuszczać.
- Zwiększona produktywność: funkcja „przeciągnij i upuść” oszczędza czas, zwiększając produktywność użytkowników.
- Odpowiednie dla urządzeń mobilnych: Urządzenia mobilne, takie jak smartfony i tablety, mają ograniczoną przestrzeń na ekranie. Użytkownicy polegają głównie na gestach podczas nawigacji, co sprawia, że przeciąganie i upuszczanie jest niesamowitym dodatkiem.
- Zapewnia atrakcyjne interfejsy: funkcja przeciągania i upuszczania może dodać atrakcyjności wizualnej interfejsowi użytkownika aplikacji. Możesz dodawać animacje, które przekazują informacje zwrotne lub opisują działania, gdy użytkownicy przeciągają i upuszczają elementy w aplikacji.
Oto najlepsze biblioteki React typu „przeciągnij i upuść”:
Zareaguj DnD
React DnD to zestaw narzędzi React do budowania złożonych interfejsów typu „przeciągnij i upuść”. Ta biblioteka jest idealna do tworzenia aplikacji podobnych do Trello i Storify, w których funkcja przeciągania i upuszczania obejmuje również przesyłanie danych.
Instalacja;
npm install reaguj-dnd reaguj-dnd-html5-backend
Możesz zaimportować React DnD do swojego komponentu React jako;
import { useDrag } from 'react-dnd'
Kluczowe cechy
- Działa z Twoimi komponentami: Ta biblioteka nie zawiera gotowych widżetów. Jednak zawija twoje komponenty i wstrzykuje do nich rekwizyty.
- Rozszerzalny: Możesz dodać niestandardowy backend oparty na zdarzeniach myszy lub zdarzeniach dotykowych podczas korzystania z biblioteki React DnD.
- Testowalny: Możesz użyć Jest lub Enzyme do przetestowania kodu React DnD.
- Obsługa dotykowa: React DnD touch backend dodaje funkcjonalność dotykową do tej biblioteki.
React DnD to bezpłatna biblioteka typu open source.
Reaguj przeciągany
React Draggable to prosta, ale potężna biblioteka React, która ułatwia tworzenie przeciąganych elementów.
Instalacja;
npm install reagowanie na przeciąganie
Aby użyć React Draggable, zaimportuj w następujący sposób do swojego komponentu React.
import Draggable from 'react-draggable';
Cechy
- Łatwa instalacja i konfiguracja: wystarczy zainstalować i zaimportować bibliotekę, aby rozpocząć. Możesz także importować poszczególne komponenty z biblioteki.
- Kompatybilny z Vanilla JavaScript i React: Możesz użyć React Draggable ze zwykłym JavaScriptem w następujący sposób;
let Draggable = require('react-draggable');
let DraggableCore = Draggable.DraggableCore;
- Kompatybilny z innymi bibliotekami React: Możesz używać React Draggable z innymi bibliotekami, takimi jak React Grid Layout.
React Draggable to bezpłatna biblioteka typu open source Drap and Drop React.
Strefa zrzutu reakcji
React Dropzone to prosty React Hook do tworzenia zgodnej z HTML-5 strefy przeciągania i upuszczania plików.
Instalacja;
npm install – zapisz strefę reagowania
Lub:
przędza dodaje strefę reakcji
Następnie możesz zaimportować tę bibliotekę w następujący sposób;
import {useDropzone} from 'react-dropzone';
Cechy
- Stylizacja Dropzone: Ta biblioteka nie określa żadnych zasad stylizacji, dzięki czemu możesz stylizować swoje komponenty według własnego uznania.
- Pozwala użytkownikom definiować akceptowalne typy plików: Możesz poinstruować Dropzone, aby akceptował lub odrzucał określone typy plików, podając opcję accept.
- Akceptuje niestandardową walidację: Właściwość walidatora umożliwia określenie niestandardowej walidacji dla różnych plików.
React Dropzone to bezpłatna biblioteka React typu „przeciągnij i upuść” typu open source.
Reaguj na układ siatki
React Grid Layout to skalowalny i przeciągany układ siatki dla React.
Instalacja;
npm zainstaluj układ reagowania na siatkę
Możesz zaimportować tę bibliotekę w następujący sposób;
import GridLayout from "react-grid-layout";
Cechy
- Bez zależności: React Grid Layout jest zbudowany wyłącznie na React i jest wolny od JQuery.
- Widżety o zmiennym rozmiarze: Oprócz funkcji przeciągania i upuszczania możesz także zmieniać rozmiar komponentów.
- Responsywne punkty przerwania: biblioteka zapewnia osobny układ dla każdego punktu przerwania.
- Możliwość dostosowania: możesz dodawać lub usuwać widżety bez przebudowywania całej siatki.
React Grid Layout to bezpłatna biblioteka React o otwartym kodzie źródłowym.
Zareaguj ok
React rnd to przeciągany i skalowalny komponent dla React.
Instalacja;
npm i -S reakcja-rnd
Lub
przędza dodaj reakcję-rnd
Cechy
- Proste: React rnd ma być proste, ale bardzo wydajne.
- Kompatybilny zarówno z TypeScript, jak i JavaScript: Możesz używać React rnd ze swoją aplikacją niezależnie od tego, czy skonfigurowałeś ją z JavaScript czy TypeScript.
- Obsługuje zmianę rozmiaru: Możesz łatwo zmieniać rozmiar komponentów utworzonych za pomocą React rnd, aby dopasować je do swoich potrzeb.
React rnd to bezpłatna biblioteka React o otwartym kodzie źródłowym.
React Virtualized dnd
React Virtualized dnd to platforma React typu „przeciągnij i upuść”, która zawiera wbudowane paski przewijania do wirtualizacji.
Instalacja;
npm install – zapisz reakcję na wirtualizację-dnd
Możesz zaimportować React Virtualized dnd jako;
import ExampleBoard from 'react-virtualized-dnd';
Cechy
- Różnorodność komponentów do wyboru: Komponenty są pogrupowane w „Stała wysokość”, „Zmienna wysokość” i „Groupable Droppables”.
- Możliwość dostosowania: Możesz dostosować komponenty React Virtualized dnd do swoich potrzeb.
React Virtualized dnd to platforma React o otwartym kodzie źródłowym, której kod źródłowy jest hostowany na GitHub.
Reaguj ruchomo
React Movable to biblioteka React typu „przeciągnij i upuść” dla list i tabel.
Instalacja;
Przędza dodaje reagują-ruchomy
Możesz zaimportować tę bibliotekę jako;
import { List, arrayMove } from 'react-movable';
Cechy
- Różne opcje przeciągania i upuszczania do wyboru: Biblioteka zawiera standardowe kody dla różnych typów komponentów przeciągania i upuszczania do wyboru.
- Lekka biblioteka: React Movable nie ma zależności, takich jak JQuery. Jest mniejszy niż 4kB (spakowany gzipem).
- Stylizacja bez opinii: React Movable nie kontroluje tego, w jaki sposób możesz stylizować swoją aplikację.
- Obsługa dotykowa: ta biblioteka pomaga tworzyć aplikacje, których można używać na smartfonach, tabletach i dowolnym urządzeniu obsługującym dotyk.
- Napisany w TypeScript: Możesz wprowadzić typy do swojego kodu, funkcjonalność niedostępna w JavaScript.
React Movable to bezpłatna biblioteka React o otwartym kodzie źródłowym.
Przeciągany
Draggable to biblioteka React typu „przeciągnij i upuść”, która umożliwia programistom tworzenie zdarzeń typu „przeciągnij i upuść” poprzez abstrakcję natywnych zdarzeń przeglądarki w kompleksowym interfejsie API.
Instalacja;
npm install @shopify/przeciągnij – zapisz
lub przez przędzę:
przędza dodaj @shopify/przeciągnij
Możesz zaimportować Draggable do swojej aplikacji React jako;
import { Draggable } from '@shopify/draggable';
Cechy
- Skategoryzowane komponenty: Znalezienie dokładnego komponentu do użycia jest łatwe, ponieważ komponenty są podzielone na kategorie. Te komponenty można dostosować.
- Kompatybilny z głównymi przeglądarkami: Możesz używać Draggable z przeglądarkami takimi jak Google Chrome, Mozilla Firefox i Apple Safari.
- Obsługuje TypeScript: Podczas pracy z tą biblioteką możesz dodawać definicje TypeScript do swojego kodu.
- Obsługuje wtyczki: Możesz zwiększyć funkcjonalność Draggable za pomocą wtyczek, takich jak Collidable i SwapAnimation.
Draggable to bezpłatna biblioteka React o otwartym kodzie źródłowym, utrzymywana przez współpracowników.
Zareaguj Przeciągnij, aby wybrać
React przeciągnij, aby wybrać to biblioteka React, której możesz użyć do dodania funkcji przeciągnij, aby wybrać do swojej aplikacji.
Instalacja;
npm install –save @air/react-drag-to-select
Lub
przędza dodaj @air/react-przeciągnij-do-wyboru
Możesz zaimportować tę bibliotekę do swojej aplikacji w następujący sposób;
import { useSelectionContainer } from '@air/react-drag-to-select'
Cechy
- Prosta: ta biblioteka nie wybiera elementów. Jednak biblioteka rysuje pole wyboru i podaje współrzędne.
- Obsługuje TypeScript: Biblioteka React Drag-to-select jest napisana w TypeScript, co oznacza, że możesz jej używać z aplikacjami React napisanymi w TypeScript i JavaScript.
- Obsługuje testowanie: Możesz używać tej biblioteki z większością platform testowych React.
React Przeciągnij, aby wybrać to bezpłatna biblioteka typu open source.
Reakcja Draguli
React Dragula to prosta biblioteka React typu „przeciągnij i upuść”.
Instalacja;
npm install reaguj-przeciągnij-zapisz
Lub,
bower install reaguj-przeciągnij-zapisz
Cechy
- Konfigurowalny: Możesz dostosować komponenty React Dragula do swoich potrzeb.
- Obsługa dotyku: Możesz użyć tej biblioteki do tworzenia aplikacji, których można używać na smartfonach, tabletach i innych urządzeniach dotykowych.
- Lekkość: React Dragula ma niewielki rozmiar pakietu, dzięki czemu jest idealny, jeśli chcesz, aby Twoja aplikacja React była mała.
React Dragula to bezpłatna biblioteka typu open source.
Wniosek
Masz teraz wiele bibliotek typu „przeciągnij i upuść”, których możesz użyć w następnej aplikacji React. Wybór biblioteki będzie zależał od funkcji, które zamierzasz mieć w następnej aplikacji, gustu i preferencji.
Jeśli Twoja aplikacja jest duża, możesz użyć wielu bibliotek typu „przeciągnij i upuść”, aby zaspokoić różne potrzeby. Większość z tych bibliotek jest kompatybilna z różnymi bibliotekami testowymi React, co ułatwia dostarczanie bezbłędnych aplikacji.