10 Best Drag and Drop React Libraries for Effortless Interactions (ang.).

React jest słynnym interfejsem użytkownika (UI) biblioteki JavaScript. Możesz używać biblioteki React do tworzenia różnych rodzajów aplikacji internetowych, począwszy od aplikacji społecznościowych, platform eCommerce, blogów. aplikacja jednostronicowa , systemy zarządzania treścią (CMS), Dashboard i dane wizualizacji, wspominają o kilku.

Programiści mogą rozszerzyć funkcjonalność aplikacji React za pomocą różnych bibliotek i frameworków. Takie biblioteki mogą być podzielone na różne klasy; Drag-and-Drop to kategoria bibliotek, która jest dość popularna.

Funkcja Drag and Drop jest interakcją interfejsu użytkownika, która pozwala użytkownikowi na kliknięcie/ wybór elementu na ekranie, ciągnięcie go i zrzucenie go na inny komponent. Perfektywny przykład tej funkcjonalności polega na uwróceniu przedmiotów na liście poprzez ciąganie i odrzucenie przedmiotów do swojego pożądanego miejsca.

Może też używać funkcji Drag-and-Drop w następujących przypadkach.

File upload: Użytkownicy mogą ciągnąć i usuwać pliki zamiast zwojowania przez maszyny do wyboru i wysyłania plików.
tablice kanban: Możesz stworzyć rozdzielczość, w której użytkownicy mogą ciągnąć i upuszczać przedmioty w zależności od poziomu aktywności lub etapów.
galerie obrazów: Możesz posiadać galerię zdjęć, w której użytkownicy mogą załadować i zaobserwować obrazy.
Widgets: Użytkownicy mogą dostosowywać wygląd aplikacji poprzez ciąganie i spadek widgetów.
Shopping cart (ang.). Użytkownicy mogą kliknąć na miejscu, ciągnąć go i zrzucać go w kartę. React Drag and Drop Library jest zestawem wcześniej zbudowanych komponentów, które pozwalają programistom wdrożyć funkcjonalność Drag i Drop w aplikacjach React.

Te biblioteki pochodzą z komponentów, pozwalających programistom na stworzenie elementów, które mogą być wciągane i zrzucone. Biblioteki obsługują różne wydarzenia, takie jak start drag, drag enter, drag leave i drop.

Jak biblioteki Drag i Drop mogą pomóc w lepszej interakcji użytkownika.

How-Drag-and-Drop-libraries-will-help-in-better-UI-interactions

Wykorzystywanie użytkowe Funkcja “dra-and-drop” jest intuicyjnym podejściem dla użytkowników do interakcji z aplikacją. Opcja ciągania i odrzucenia przedmiotów zamiast wejściowego ich ręcznie zapewnia interaktywne i bezsłodne interakcje.
Symplified workflow (ang.). Zamiast przeładować pliki z różnych lokalizacji komputera do aplikacji, można je po prostu usunąć.
Increasywność: Funkcje Drag-and-drop ratują czas, co sprawia, że użytkownicy są bardziej produktywni.
Dostęp do urządzeń mobilnych: Urządzenia mobilne, takie jak smartfony i tablety, mają ograniczony ekran. Użytkownicy przeważnie opierają się na gestach na na żegludze, co sprawia, że dodanie ciągnie się i rzuca niesamowite dodanie.
Obsługuje interfejsy: Funkcja Drag-and-drop może dodać wizualną apelację do interfejsu użytkownika. Możesz dodać animacje, które zapewniają sprzężenie zwrotne lub opisują działania jako użytkownicy ciągną i upuszczają przedmioty. Są to najlepsze biblioteki Drag i Drop React.

React DnD

React DnD Jest to zestaw narzędzi do budowania złożonych interfejsów drag-and-drop. Biblioteka ta jest doskonała do tworzenia aplikacji podobnych do Trello i Storify, gdzie funkcjonalność drag-and-drop wymaga również transferu danych.

Screenshot-from-2023-04-05-11-35-49

Instalacja;

npm install react-dnd react-dnd-html5-backend

Może zaimponować React DnD do Your React.

1
import { useDrag } from 'react-dnd'

Key

Wykorzystywane są ze sobą elementy: Biblioteka ta nie zawiera widgetów. Wprowadza do nich elementy i wstrząsa do nich.
Przykład: Możesz dodać zwyczajny backend oparty na wydarzeniach myszy lub wydarzeniach dotykowych, kiedy wykorzystuje bibliotekę DnD.
Testowanie: Jest lub Enzyme testuje kod DnD.
Pomoc: Reaktywacja DnD Dodaje funkcjonalność do tej biblioteki. React DnD – darmowa biblioteka internetowa.

React Draggable (ang.).

React Draggable (ang.). Jest to prosta, ale mocna. Biblioteka reaktywna, która ułatwia tworzenie elementów drgawkowych.

Screenshot-from-2023-04-05-14-21-05

Instalacja;

npm install react-draggable

Aby użyć React Draggable, wprowadza się do przeznaczenia na swój komponent.

1
import Draggable from 'react-draggable';

Features

Łatwa do instalacji i konfiguracji: Wszystko potrzebuje zainstalowania i wpisania biblioteki do rozpoczęcia prac. Może także importować indywidualne komponenty z biblioteki.
Porównanie z wanilią JavaScript i React. Możesz użyć React Draggable z równiną JavaScript.

1
let Draggable = require('react-draggable');let DraggableCore = Draggable.DraggableCore;

Porównywana z innymi bibliotekami React. Możesz użyć React Draggable z innymi bibliotekami, takimi jak React Grid Layout. React Draggable – darmowa biblioteka Drap i Drop React.

Dropzone

Dropzone Jest to prosta jednostka Hooka, której celem jest stworzenie HTML-5 zgodnej strefy drag-and-drop dla plików.

React-Dropzone

Instalacja;

npm install --save react-dropzone

yarn add react-dropzone

Następuje do tego, że może ona importować tę bibliotekę.

1
import {useDropzone} from 'react-dropzone';

Features

Styling Dropzone (ang.). Biblioteka ta nie ustawia żadnych zasad stylizacyjnych, więc możesz stylować swoje komponenty, tak jak widzisz.
Użytkowników definiuje akceptowalne typy plików. Możesz poinstruować Dropzone do zaakceptowania lub odrzucenia określonych typów plików poprzez akceptowanie propozycji.
Acceptacja zwyczajowa: twierdzenie. Propozytor pozwala udzielić walidacji na różne pliki. React Dropzone – darmowa biblioteka Drag i Drop React.

React Grid Layout (ang.).

React Grid Layout (ang.). Jest to rezygnalny i drgawkowy układ sieciowych.

Screenshot-from-2023-04-05-14-59-04

Instalacja;

npm install react-grid-layout

Może on importować tę bibliotekę następująco:

1
import GridLayout from "react-grid-layout";

Features

zależność : Grid Layout jest zbudowany w całości na React i jest darmowy z JQuery.
Powtórny widget : Na górnej części elementu można również realizować elementy.
Odpowiedzialny punkt widzenia: Biblioteka zapewnia odrębny układ dla każdego punktu przerwowego.
Celnik: Możesz dodawać lub usuwać widgety bez odbudowy całej sieci. Grid Layout – darmowa biblioteka React.

React r.

React r. Jest to element drgawkowy i resizable.

Screenshot-from-2023-04-05-15-11-24

Instalacja;

npm i -S react-rnd

yarn add react-rnd

Features

Simple: React rnd ma być prosty, ale bardzo mocny.
Porównuje zarówno język JavaScript, jak i JavaScript. Możesz użyć rndu React z waszą aplikacją, niezależnie od tego, czy skonfigurował ją z JavaScript lub TypeScript.
wspierania resize : Możesz łatwo rezystować komponenty tworzone przy użyciu rndy React dopasowania potrzeb. React rnd – darmowa, otwarta biblioteka React.

React Virtualized (ang.).

React Virtualized (ang.). Jest to ramy reaktywacji drag-and-drop, które zawierają wbudowany wirtualny zwojów.

Screenshot-from-2023-04-05-15-29-46

Instalacja;

npm install --save react-virtualized-dnd

Może on importować rzeczywistość wirtualną.

1
import ExampleBoard from 'react-virtualized-dnd';

Features

Wariety komponentów do wyboru: Komponenty są zgrupowane w „Fixed Height”, „Variable Height” i „Groupable Droppables”.
Celnik: Możesz stosować komponenty z Virtualized dnd w celu dostosowania potrzeb. Reaktywacja Wirtualny dnd jest otwartym frameworkiem reaktywacji, którego kod źródłowy jest obsługiwany przez GitHub.

React Movable (ang.).

React Movable (ang.). Jest to biblioteka reaktywna dla list i tabel.

Screenshot-from-2023-04-05-19-27-03

Instalacja;

yarn add react-movable

Może on importować tę bibliotekę.

1
import { List, arrayMove } from 'react-movable';

Features

Różne opcje zrzutu i rzutu do wyboru: Biblioteka posiada kody kotłownicze dla różnych typów komponentów dragon-and-drop do wyboru.
Biblioteka wagi lekkiej Reaktywacja Movable nie ma zależności, np. JQuery. Jest mniejsza niż 4kB (gzipped).
Unopiniowane styly: Reaktywna Movable nie kontroluje tego, jak możesz chcieć opracować.
Pomoc: Biblioteka ta pomaga stworzyć aplikacje, które mogą być wykorzystywane na smartfonach, tabletach i dowolnym urządzeniem z dotyką.
Napisana w TypeScript: Możesz wprowadzać typy do kodu, funkcjonalność niedostępna w JavaScript. React Movable – darmowa, otwarta biblioteka React.

Draggable

Draggable Jest to zapach i kropla. Biblioteka reaktywna, która pozwala programistom na stworzenie zdarzeń drag-and-drop poprzez abstrakcyjne wydarzenia przeglądarki w kompleksowym API.

Screenshot-from-2023-04-05-19-39-16

Instalacja;

npm install @shopify/draggable --save

or through yarn:

yarn add @shopify/draggable

Może on importować Draggable do aplikacji.

1
import { Draggable } from '@shopify/draggable';

Features

Komponenty kategoryczne: Dokładna część do użytkowania jest łatwe, ponieważ komponenty są podzielone. Te składniki są dopasowalne.
Porównaj: Porównanie z głównymi przeglądarkami. Możesz używać Draggable z przeglądarkami takich jak Google Chrome, Mozilla Firefox i Apple Safari.
Strona oficjalna Po pracy z biblioteką można dodać definicje języka TypeScript do kodu.
Wtyczka pomocnicza Można dodać do funkcji Draggable’a z wtyczkami takimi jak np. wtyczki. Collidable (ang.). i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i oraz i i i i i i i i i i i i i i i i i i i i i i i oraz i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i SwapAnimacja . Draggable jest bezpłatną, otwarta biblioteką React, która jest utrzymywana przez współpracowników.

React Drag (ang.).

React drag-to-select (ang.). Jest to biblioteka React, którą można użyć w celu dodania funkcji drag-to-select dla twojej aplikacji.

Screenshot-from-2023-04-06-01-44-38

Instalacja;

npm install --save @air/react-drag-to-select

yarn add @air/react-drag-to-select

Może on importować tę bibliotekę do twojej aplikacji.

1
import { useSelectionContainer } from '@air/react-drag-to-select'

Features

Simple: Biblioteka ta nie jest wybierana. Biblioteka jednak rysuje boks selekcji i daje koordynacje.
Strona oficjalna Biblioteka Drag-to-select została napisana w TypeScript, co oznacza, że można ją wykorzystać z aplikacjami napisanymi w TypeScript i JavaScript.
Testy wsparcia: Możesz korzystać z biblioteki z większości ram testowych. React Drag-to-select – darmowa biblioteka źródłowa.

Draguła

Draguła Jest to prosta biblioteka reaktywna.

Screenshot-from-2023-04-06-01-07-00

Instalacja;

npm install react-dragula --save

Or, właśc.

bower install react-dragula --save

Features

Celnik: Możesz skorzystać z części React Dragula na potrzeby.
Dotyk wsparcia: Możesz używać tej biblioteki do tworzenia aplikacji, które mogą być wykorzystywane na smartfonach, tabletach i innych urządzeniach dotykowych.
lekkowaga: React Dragula ma niewielkie rozmiary sprzężenia, co sprawia, że jest doskonałe, jeśli chcesz twój aplikacji. React Dragula – darmowa biblioteka źródłowa.

Obliczenie

Obecnie istnieje wiele bibliotek Drag-and-Drop, które można wykorzystać na ich kolejnej aplikacji. Wybór biblioteki zależy od cech, które zamierzasz mieć na twojej kolejnej aplikacji, smaku i preferencji.

Jeśli twoja aplikacja jest duża, może korzystać z wielu bibliotek, aby koterować różne potrzeby. Większość z tych bibliotek jest kompatybilna z różnymi bibliotekami. Reakcja Umożliwia to bezbłędne zastosowania.

title: “10 Best Drag and Drop React Libraries for Effortless Interactions (ang.).” date: “2023-10-24T04:03:01” draft: false description: “Czy znasz, że możesz poprawić interaktywność użytkowników na aplikacjach Twojego Reacta za pomocą bibliotek drutu i dropu. Poniższa jest jedną z najlepszych bibliotek wdrażanych do dziś. " autor: “toto” image: “https://cdn.99tz.top/be55757c94/2023/04/8f7851d0c1c24670b261e66a1a363f68.webp" cover: “https://cdn.99tz.top/be55757c94/2023/04/8f7851d0c1c24670b261e66a1a363f68.webp" tags: [] categories: [‘Development’] theme: light

Może też używać funkcji Drag-and-Drop w następujących przypadkach.

File upload: Użytkownicy mogą ciągnąć i usuwać pliki zamiast zwojowania przez maszyny do wyboru i wysyłania plików.
tablice kanban: Możesz stworzyć rozdzielczość, w której użytkownicy mogą ciągnąć i upuszczać przedmioty w zależności od poziomu aktywności lub etapów.
galerie obrazów: Możesz posiadać galerię zdjęć, w której użytkownicy mogą załadować i zaobserwować obrazy.
Widgets: Użytkownicy mogą dostosowywać wygląd aplikacji poprzez ciąganie i spadek widgetów.
Shopping cart (ang.). Użytkownicy mogą kliknąć na miejscu, ciągnąć go i zrzucać go w kartę. React Drag and Drop Library jest zestawem wcześniej zbudowanych komponentów, które pozwalają programistom wdrożyć funkcjonalność Drag i Drop w aplikacjach React.

Jak biblioteki Drag i Drop mogą pomóc w lepszej interakcji użytkownika.

How-Drag-and-Drop-libraries-will-help-in-better-UI-interactions

Wykorzystywanie użytkowe Funkcja “dra-and-drop” jest intuicyjnym podejściem dla użytkowników do interakcji z aplikacją. Opcja ciągania i odrzucenia przedmiotów zamiast wejściowego ich ręcznie zapewnia interaktywne i bezsłodne interakcje.
Symplified workflow (ang.). Zamiast przeładować pliki z różnych lokalizacji komputera do aplikacji, można je po prostu usunąć.
Increasywność: Funkcje Drag-and-drop ratują czas, co sprawia, że użytkownicy są bardziej produktywni.
Dostęp do urządzeń mobilnych: Urządzenia mobilne, takie jak smartfony i tablety, mają ograniczony ekran. Użytkownicy przeważnie opierają się na gestach na na żegludze, co sprawia, że dodanie ciągnie się i rzuca niesamowite dodanie.
Obsługuje interfejsy: Funkcja Drag-and-drop może dodać wizualną apelację do interfejsu użytkownika. Możesz dodać animacje, które zapewniają sprzężenie zwrotne lub opisują działania jako użytkownicy ciągną i upuszczają przedmioty. Są to najlepsze biblioteki Drag i Drop React.

React DnD

Screenshot-from-2023-04-05-11-35-49

Instalacja;

npm install react-dnd react-dnd-html5-backend

Może zaimponować React DnD do Your React.

1
import { useDrag } from 'react-dnd'

Key

Wykorzystywane są ze sobą elementy: Biblioteka ta nie zawiera widgetów. Wprowadza do nich elementy i wstrząsa do nich.
Przykład: Możesz dodać zwyczajny backend oparty na wydarzeniach myszy lub wydarzeniach dotykowych, kiedy wykorzystuje bibliotekę DnD.
Testowanie: Jest lub Enzyme testuje kod DnD.
Pomoc: Reaktywacja DnD Dodaje funkcjonalność do tej biblioteki. React DnD – darmowa biblioteka internetowa.

React Draggable (ang.).

React Draggable (ang.). Jest to prosta, ale mocna. Biblioteka reaktywna, która ułatwia tworzenie elementów drgawkowych.

Screenshot-from-2023-04-05-14-21-05

Instalacja;

npm install react-draggable

Aby użyć React Draggable, wprowadza się do przeznaczenia na swój komponent.

1
import Draggable from 'react-draggable';

Features

Łatwa do instalacji i konfiguracji: Wszystko potrzebuje zainstalowania i wpisania biblioteki do rozpoczęcia prac. Może także importować indywidualne komponenty z biblioteki.
Porównanie z wanilią JavaScript i React. Możesz użyć React Draggable z równiną JavaScript.

1
let Draggable = require('react-draggable');let DraggableCore = Draggable.DraggableCore;

Porównywana z innymi bibliotekami React. Możesz użyć React Draggable z innymi bibliotekami, takimi jak React Grid Layout. React Draggable – darmowa biblioteka Drap i Drop React.

Dropzone

Dropzone Jest to prosta jednostka Hooka, której celem jest stworzenie HTML-5 zgodnej strefy drag-and-drop dla plików.

React-Dropzone

Instalacja;

npm install --save react-dropzone

yarn add react-dropzone

Następuje do tego, że może ona importować tę bibliotekę.

1
import {useDropzone} from 'react-dropzone';

Features

Styling Dropzone (ang.). Biblioteka ta nie ustawia żadnych zasad stylizacyjnych, więc możesz stylować swoje komponenty, tak jak widzisz.
Użytkowników definiuje akceptowalne typy plików. Możesz poinstruować Dropzone do zaakceptowania lub odrzucenia określonych typów plików poprzez akceptowanie propozycji.
Acceptacja zwyczajowa: twierdzenie. Propozytor pozwala udzielić walidacji na różne pliki. React Dropzone – darmowa biblioteka Drag i Drop React.

React Grid Layout (ang.).

React Grid Layout (ang.). Jest to rezygnalny i drgawkowy układ sieciowych.

Screenshot-from-2023-04-05-14-59-04

Instalacja;

npm install react-grid-layout

Może on importować tę bibliotekę następująco:

1
import GridLayout from "react-grid-layout";

Features

zależność : Grid Layout jest zbudowany w całości na React i jest darmowy z JQuery.
Powtórny widget : Na górnej części elementu można również realizować elementy.
Odpowiedzialny punkt widzenia: Biblioteka zapewnia odrębny układ dla każdego punktu przerwowego.
Celnik: Możesz dodawać lub usuwać widgety bez odbudowy całej sieci. Grid Layout – darmowa biblioteka React.

React r.

React r. Jest to element drgawkowy i resizable.

Screenshot-from-2023-04-05-15-11-24

Instalacja;

npm i -S react-rnd

yarn add react-rnd

Features

Simple: React rnd ma być prosty, ale bardzo mocny.
Porównuje zarówno język JavaScript, jak i JavaScript. Możesz użyć rndu React z waszą aplikacją, niezależnie od tego, czy skonfigurował ją z JavaScript lub TypeScript.
wspierania resize : Możesz łatwo rezystować komponenty tworzone przy użyciu rndy React dopasowania potrzeb. React rnd – darmowa, otwarta biblioteka React.

React Virtualized (ang.).

React Virtualized (ang.). Jest to ramy reaktywacji drag-and-drop, które zawierają wbudowany wirtualny zwojów.

Screenshot-from-2023-04-05-15-29-46

Instalacja;

npm install --save react-virtualized-dnd

Może on importować rzeczywistość wirtualną.

1
import ExampleBoard from 'react-virtualized-dnd';

Features

Wariety komponentów do wyboru: Komponenty są zgrupowane w „Fixed Height”, „Variable Height” i „Groupable Droppables”.
Celnik: Możesz stosować komponenty z Virtualized dnd w celu dostosowania potrzeb. Reaktywacja Wirtualny dnd jest otwartym frameworkiem reaktywacji, którego kod źródłowy jest obsługiwany przez GitHub.

React Movable (ang.).

React Movable (ang.). Jest to biblioteka reaktywna dla list i tabel.

Screenshot-from-2023-04-05-19-27-03

Instalacja;

yarn add react-movable

Może on importować tę bibliotekę.

1
import { List, arrayMove } from 'react-movable';

Features

Różne opcje zrzutu i rzutu do wyboru: Biblioteka posiada kody kotłownicze dla różnych typów komponentów dragon-and-drop do wyboru.
Biblioteka wagi lekkiej Reaktywacja Movable nie ma zależności, np. JQuery. Jest mniejsza niż 4kB (gzipped).
Unopiniowane styly: Reaktywna Movable nie kontroluje tego, jak możesz chcieć opracować.
Pomoc: Biblioteka ta pomaga stworzyć aplikacje, które mogą być wykorzystywane na smartfonach, tabletach i dowolnym urządzeniem z dotyką.
Napisana w TypeScript: Możesz wprowadzać typy do kodu, funkcjonalność niedostępna w JavaScript. React Movable – darmowa, otwarta biblioteka React.

Draggable

Draggable Jest to zapach i kropla. Biblioteka reaktywna, która pozwala programistom na stworzenie zdarzeń drag-and-drop poprzez abstrakcyjne wydarzenia przeglądarki w kompleksowym API.

Screenshot-from-2023-04-05-19-39-16

Instalacja;

npm install @shopify/draggable --save

or through yarn:

yarn add @shopify/draggable

Może on importować Draggable do aplikacji.

1
import { Draggable } from '@shopify/draggable';

Features

Komponenty kategoryczne: Dokładna część do użytkowania jest łatwe, ponieważ komponenty są podzielone. Te składniki są dopasowalne.
Porównaj: Porównanie z głównymi przeglądarkami. Możesz używać Draggable z przeglądarkami takich jak Google Chrome, Mozilla Firefox i Apple Safari.
Strona oficjalna Po pracy z biblioteką można dodać definicje języka TypeScript do kodu.
Wtyczka pomocnicza Można dodać do funkcji Draggable’a z wtyczkami takimi jak np. wtyczki. Collidable (ang.). i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i oraz i i i i i i i i i i i i i i i i i i i i i i i oraz i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i SwapAnimacja . Draggable jest bezpłatną, otwarta biblioteką React, która jest utrzymywana przez współpracowników.

React Drag (ang.).

React drag-to-select (ang.). Jest to biblioteka React, którą można użyć w celu dodania funkcji drag-to-select dla twojej aplikacji.

Screenshot-from-2023-04-06-01-44-38

Instalacja;

npm install --save @air/react-drag-to-select

yarn add @air/react-drag-to-select

Może on importować tę bibliotekę do twojej aplikacji.

1
import { useSelectionContainer } from '@air/react-drag-to-select'

Features

Simple: Biblioteka ta nie jest wybierana. Biblioteka jednak rysuje boks selekcji i daje koordynacje.
Strona oficjalna Biblioteka Drag-to-select została napisana w TypeScript, co oznacza, że można ją wykorzystać z aplikacjami napisanymi w TypeScript i JavaScript.
Testy wsparcia: Możesz korzystać z biblioteki z większości ram testowych. React Drag-to-select – darmowa biblioteka źródłowa.

Draguła

Draguła Jest to prosta biblioteka reaktywna.

Screenshot-from-2023-04-06-01-07-00

Instalacja;

npm install react-dragula --save

Or, właśc.

bower install react-dragula --save

Features

Celnik: Możesz skorzystać z części React Dragula na potrzeby.
Dotyk wsparcia: Możesz używać tej biblioteki do tworzenia aplikacji, które mogą być wykorzystywane na smartfonach, tabletach i innych urządzeniach dotykowych.
lekkowaga: React Dragula ma niewielkie rozmiary sprzężenia, co sprawia, że jest doskonałe, jeśli chcesz twój aplikacji. React Dragula – darmowa biblioteka źródłowa.

Obliczenie

title: “10 Best Drag and Drop React Libraries for Effortless Interactions (ang.).” date: “2023-10-25T04:03:02” draft: false description: “Czy znasz, że możesz poprawić interaktywność użytkowników na aplikacjach Twojego Reacta za pomocą bibliotek drutu i dropu. Poniższa jest jedną z najlepszych bibliotek wdrażanych do dziś. " autor: “toto” image: “https://cdn.99tz.top/be55757c94/2023/04/564297f20e5b48dc86b78c947db5853e.webp" cover: “https://cdn.99tz.top/be55757c94/2023/04/564297f20e5b48dc86b78c947db5853e.webp" tags: [] categories: [‘Development’] theme: light

Może też używać funkcji Drag-and-Drop w następujących przypadkach.

File upload: Użytkownicy mogą ciągnąć i usuwać pliki zamiast zwojowania przez maszyny do wyboru i wysyłania plików.
tablice kanban: Możesz stworzyć rozdzielczość, w której użytkownicy mogą ciągnąć i upuszczać przedmioty w zależności od poziomu aktywności lub etapów.
galerie obrazów: Możesz posiadać galerię zdjęć, w której użytkownicy mogą załadować i zaobserwować obrazy.
Widgets: Użytkownicy mogą dostosowywać wygląd aplikacji poprzez ciąganie i spadek widgetów.
Shopping cart (ang.). Użytkownicy mogą kliknąć na miejscu, ciągnąć go i zrzucać go w kartę. React Drag and Drop Library jest zestawem wcześniej zbudowanych komponentów, które pozwalają programistom wdrożyć funkcjonalność Drag i Drop w aplikacjach React.

Jak biblioteki Drag i Drop mogą pomóc w lepszej interakcji użytkownika.

How-Drag-and-Drop-libraries-will-help-in-better-UI-interactions

Wykorzystywanie użytkowe Funkcja “dra-and-drop” jest intuicyjnym podejściem dla użytkowników do interakcji z aplikacją. Opcja ciągania i odrzucenia przedmiotów zamiast wejściowego ich ręcznie zapewnia interaktywne i bezsłodne interakcje.
Symplified workflow (ang.). Zamiast przeładować pliki z różnych lokalizacji komputera do aplikacji, można je po prostu usunąć.
Increasywność: Funkcje Drag-and-drop ratują czas, co sprawia, że użytkownicy są bardziej produktywni.
Dostęp do urządzeń mobilnych: Urządzenia mobilne, takie jak smartfony i tablety, mają ograniczony ekran. Użytkownicy przeważnie opierają się na gestach na na żegludze, co sprawia, że dodanie ciągnie się i rzuca niesamowite dodanie.
Obsługuje interfejsy: Funkcja Drag-and-drop może dodać wizualną apelację do interfejsu użytkownika. Możesz dodać animacje, które zapewniają sprzężenie zwrotne lub opisują działania jako użytkownicy ciągną i upuszczają przedmioty. Są to najlepsze biblioteki Drag i Drop React.

React DnD

Screenshot-from-2023-04-05-11-35-49

Instalacja;

npm install react-dnd react-dnd-html5-backend

Może zaimponować React DnD do Your React.

1
import { useDrag } from 'react-dnd'

Key

Wykorzystywane są ze sobą elementy: Biblioteka ta nie zawiera widgetów. Wprowadza do nich elementy i wstrząsa do nich.
Przykład: Możesz dodać zwyczajny backend oparty na wydarzeniach myszy lub wydarzeniach dotykowych, kiedy wykorzystuje bibliotekę DnD.
Testowanie: Jest lub Enzyme testuje kod DnD.
Pomoc: Reaktywacja DnD Dodaje funkcjonalność do tej biblioteki. React DnD – darmowa biblioteka internetowa.

React Draggable (ang.).

React Draggable (ang.). Jest to prosta, ale mocna. Biblioteka reaktywna, która ułatwia tworzenie elementów drgawkowych.

Screenshot-from-2023-04-05-14-21-05

Instalacja;

npm install react-draggable

Aby użyć React Draggable, wprowadza się do przeznaczenia na swój komponent.

1
import Draggable from 'react-draggable';

Features

Łatwa do instalacji i konfiguracji: Wszystko potrzebuje zainstalowania i wpisania biblioteki do rozpoczęcia prac. Może także importować indywidualne komponenty z biblioteki.
Porównanie z wanilią JavaScript i React. Możesz użyć React Draggable z równiną JavaScript.

1
let Draggable = require('react-draggable');let DraggableCore = Draggable.DraggableCore;

Porównywana z innymi bibliotekami React. Możesz użyć React Draggable z innymi bibliotekami, takimi jak React Grid Layout. React Draggable – darmowa biblioteka Drap i Drop React.

Dropzone

Dropzone Jest to prosta jednostka Hooka, której celem jest stworzenie HTML-5 zgodnej strefy drag-and-drop dla plików.

React-Dropzone

Instalacja;

npm install --save react-dropzone

yarn add react-dropzone

Następuje do tego, że może ona importować tę bibliotekę.

1
import {useDropzone} from 'react-dropzone';

Features

Styling Dropzone (ang.). Biblioteka ta nie ustawia żadnych zasad stylizacyjnych, więc możesz stylować swoje komponenty, tak jak widzisz.
Użytkowników definiuje akceptowalne typy plików. Możesz poinstruować Dropzone do zaakceptowania lub odrzucenia określonych typów plików poprzez akceptowanie propozycji.
Acceptacja zwyczajowa: twierdzenie. Propozytor pozwala udzielić walidacji na różne pliki. React Dropzone – darmowa biblioteka Drag i Drop React.

React Grid Layout (ang.).

React Grid Layout (ang.). Jest to rezygnalny i drgawkowy układ sieciowych.

Screenshot-from-2023-04-05-14-59-04

Instalacja;

npm install react-grid-layout

Może on importować tę bibliotekę następująco:

1
import GridLayout from "react-grid-layout";

Features

zależność : Grid Layout jest zbudowany w całości na React i jest darmowy z JQuery.
Powtórny widget : Na górnej części elementu można również realizować elementy.
Odpowiedzialny punkt widzenia: Biblioteka zapewnia odrębny układ dla każdego punktu przerwowego.
Celnik: Możesz dodawać lub usuwać widgety bez odbudowy całej sieci. Grid Layout – darmowa biblioteka React.

React r.

React r. Jest to element drgawkowy i resizable.

Screenshot-from-2023-04-05-15-11-24

Instalacja;

npm i -S react-rnd

yarn add react-rnd

Features

Simple: React rnd ma być prosty, ale bardzo mocny.
Porównuje zarówno język JavaScript, jak i JavaScript. Możesz użyć rndu React z waszą aplikacją, niezależnie od tego, czy skonfigurował ją z JavaScript lub TypeScript.
wspierania resize : Możesz łatwo rezystować komponenty tworzone przy użyciu rndy React dopasowania potrzeb. React rnd – darmowa, otwarta biblioteka React.

React Virtualized (ang.).

React Virtualized (ang.). Jest to ramy reaktywacji drag-and-drop, które zawierają wbudowany wirtualny zwojów.

Screenshot-from-2023-04-05-15-29-46

Instalacja;

npm install --save react-virtualized-dnd

Może on importować rzeczywistość wirtualną.

1
import ExampleBoard from 'react-virtualized-dnd';

Features

Wariety komponentów do wyboru: Komponenty są zgrupowane w „Fixed Height”, „Variable Height” i „Groupable Droppables”.
Celnik: Możesz stosować komponenty z Virtualized dnd w celu dostosowania potrzeb. Reaktywacja Wirtualny dnd jest otwartym frameworkiem reaktywacji, którego kod źródłowy jest obsługiwany przez GitHub.

React Movable (ang.).

React Movable (ang.). Jest to biblioteka reaktywna dla list i tabel.

Screenshot-from-2023-04-05-19-27-03

Instalacja;

yarn add react-movable

Może on importować tę bibliotekę.

1
import { List, arrayMove } from 'react-movable';

Features

Różne opcje zrzutu i rzutu do wyboru: Biblioteka posiada kody kotłownicze dla różnych typów komponentów dragon-and-drop do wyboru.
Biblioteka wagi lekkiej Reaktywacja Movable nie ma zależności, np. JQuery. Jest mniejsza niż 4kB (gzipped).
Unopiniowane styly: Reaktywna Movable nie kontroluje tego, jak możesz chcieć opracować.
Pomoc: Biblioteka ta pomaga stworzyć aplikacje, które mogą być wykorzystywane na smartfonach, tabletach i dowolnym urządzeniem z dotyką.
Napisana w TypeScript: Możesz wprowadzać typy do kodu, funkcjonalność niedostępna w JavaScript. React Movable – darmowa, otwarta biblioteka React.

Draggable

Draggable Jest to zapach i kropla. Biblioteka reaktywna, która pozwala programistom na stworzenie zdarzeń drag-and-drop poprzez abstrakcyjne wydarzenia przeglądarki w kompleksowym API.

Screenshot-from-2023-04-05-19-39-16

Instalacja;

npm install @shopify/draggable --save

or through yarn:

yarn add @shopify/draggable

Może on importować Draggable do aplikacji.

1
import { Draggable } from '@shopify/draggable';

Features

Komponenty kategoryczne: Dokładna część do użytkowania jest łatwe, ponieważ komponenty są podzielone. Te składniki są dopasowalne.
Porównaj: Porównanie z głównymi przeglądarkami. Możesz używać Draggable z przeglądarkami takich jak Google Chrome, Mozilla Firefox i Apple Safari.
Strona oficjalna Po pracy z biblioteką można dodać definicje języka TypeScript do kodu.
Wtyczka pomocnicza Można dodać do funkcji Draggable’a z wtyczkami takimi jak np. wtyczki. Collidable (ang.). i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i oraz i i i i i i i i i i i i i i i i i i i i i i i oraz i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i SwapAnimacja . Draggable jest bezpłatną, otwarta biblioteką React, która jest utrzymywana przez współpracowników.

React Drag (ang.).

React drag-to-select (ang.). Jest to biblioteka React, którą można użyć w celu dodania funkcji drag-to-select dla twojej aplikacji.

Screenshot-from-2023-04-06-01-44-38

Instalacja;

npm install --save @air/react-drag-to-select

yarn add @air/react-drag-to-select

Może on importować tę bibliotekę do twojej aplikacji.

1
import { useSelectionContainer } from '@air/react-drag-to-select'

Features

Simple: Biblioteka ta nie jest wybierana. Biblioteka jednak rysuje boks selekcji i daje koordynacje.
Strona oficjalna Biblioteka Drag-to-select została napisana w TypeScript, co oznacza, że można ją wykorzystać z aplikacjami napisanymi w TypeScript i JavaScript.
Testy wsparcia: Możesz korzystać z biblioteki z większości ram testowych. React Drag-to-select – darmowa biblioteka źródłowa.

Draguła

Draguła Jest to prosta biblioteka reaktywna.

Screenshot-from-2023-04-06-01-07-00

Instalacja;

npm install react-dragula --save

Or, właśc.

bower install react-dragula --save

Features

Celnik: Możesz skorzystać z części React Dragula na potrzeby.
Dotyk wsparcia: Możesz używać tej biblioteki do tworzenia aplikacji, które mogą być wykorzystywane na smartfonach, tabletach i innych urządzeniach dotykowych.
lekkowaga: React Dragula ma niewielkie rozmiary sprzężenia, co sprawia, że jest doskonałe, jeśli chcesz twój aplikacji. React Dragula – darmowa biblioteka źródłowa.

Obliczenie

title: “10 Best Drag and Drop React Libraries for Effortless Interactions (ang.).” date: “2023-10-28T04:03:02” draft: false description: “Czy znasz, że możesz poprawić interaktywność użytkowników na aplikacjach Twojego Reacta za pomocą bibliotek drutu i dropu. Poniższa jest jedną z najlepszych bibliotek wdrażanych do dziś. " autor: “toto” image: “https://cdn.99tz.top/be55757c94/2023/04/564297f20e5b48dc86b78c947db5853e.webp" cover: “https://cdn.99tz.top/be55757c94/2023/04/564297f20e5b48dc86b78c947db5853e.webp" tags: [] categories: [‘Development’] theme: light

Może też używać funkcji Drag-and-Drop w następujących przypadkach.

File upload: Użytkownicy mogą ciągnąć i usuwać pliki zamiast zwojowania przez maszyny do wyboru i wysyłania plików.
tablice kanban: Możesz stworzyć rozdzielczość, w której użytkownicy mogą ciągnąć i upuszczać przedmioty w zależności od poziomu aktywności lub etapów.
galerie obrazów: Możesz posiadać galerię zdjęć, w której użytkownicy mogą załadować i zaobserwować obrazy.
Widgets: Użytkownicy mogą dostosowywać wygląd aplikacji poprzez ciąganie i spadek widgetów.
Shopping cart (ang.). Użytkownicy mogą kliknąć na miejscu, ciągnąć go i zrzucać go w kartę. React Drag and Drop Library jest zestawem wcześniej zbudowanych komponentów, które pozwalają programistom wdrożyć funkcjonalność Drag i Drop w aplikacjach React.

Jak biblioteki Drag i Drop mogą pomóc w lepszej interakcji użytkownika.

How-Drag-and-Drop-libraries-will-help-in-better-UI-interactions

Wykorzystywanie użytkowe Funkcja “dra-and-drop” jest intuicyjnym podejściem dla użytkowników do interakcji z aplikacją. Opcja ciągania i odrzucenia przedmiotów zamiast wejściowego ich ręcznie zapewnia interaktywne i bezsłodne interakcje.
Symplified workflow (ang.). Zamiast przeładować pliki z różnych lokalizacji komputera do aplikacji, można je po prostu usunąć.
Increasywność: Funkcje Drag-and-drop ratują czas, co sprawia, że użytkownicy są bardziej produktywni.
Dostęp do urządzeń mobilnych: Urządzenia mobilne, takie jak smartfony i tablety, mają ograniczony ekran. Użytkownicy przeważnie opierają się na gestach na na żegludze, co sprawia, że dodanie ciągnie się i rzuca niesamowite dodanie.
Obsługuje interfejsy: Funkcja Drag-and-drop może dodać wizualną apelację do interfejsu użytkownika. Możesz dodać animacje, które zapewniają sprzężenie zwrotne lub opisują działania jako użytkownicy ciągną i upuszczają przedmioty. Są to najlepsze biblioteki Drag i Drop React.

React DnD

Screenshot-from-2023-04-05-11-35-49

Instalacja;

npm install react-dnd react-dnd-html5-backend

Może zaimponować React DnD do Your React.

1
import { useDrag } from 'react-dnd'

Key

Wykorzystywane są ze sobą elementy: Biblioteka ta nie zawiera widgetów. Wprowadza do nich elementy i wstrząsa do nich.
Przykład: Możesz dodać zwyczajny backend oparty na wydarzeniach myszy lub wydarzeniach dotykowych, kiedy wykorzystuje bibliotekę DnD.
Testowanie: Jest lub Enzyme testuje kod DnD.
Pomoc: Reaktywacja DnD Dodaje funkcjonalność do tej biblioteki. React DnD – darmowa biblioteka internetowa.

React Draggable (ang.).

React Draggable (ang.). Jest to prosta, ale mocna. Biblioteka reaktywna, która ułatwia tworzenie elementów drgawkowych.

Screenshot-from-2023-04-05-14-21-05

Instalacja;

npm install react-draggable

Aby użyć React Draggable, wprowadza się do przeznaczenia na swój komponent.

1
import Draggable from 'react-draggable';

Features

Łatwa do instalacji i konfiguracji: Wszystko potrzebuje zainstalowania i wpisania biblioteki do rozpoczęcia prac. Może także importować indywidualne komponenty z biblioteki.
Porównanie z wanilią JavaScript i React. Możesz użyć React Draggable z równiną JavaScript.

1
let Draggable = require('react-draggable');let DraggableCore = Draggable.DraggableCore;

Porównywana z innymi bibliotekami React. Możesz użyć React Draggable z innymi bibliotekami, takimi jak React Grid Layout. React Draggable – darmowa biblioteka Drap i Drop React.

Dropzone

Dropzone Jest to prosta jednostka Hooka, której celem jest stworzenie HTML-5 zgodnej strefy drag-and-drop dla plików.

React-Dropzone

Instalacja;

npm install --save react-dropzone

yarn add react-dropzone

Następuje do tego, że może ona importować tę bibliotekę.

1
import {useDropzone} from 'react-dropzone';

Features

Styling Dropzone (ang.). Biblioteka ta nie ustawia żadnych zasad stylizacyjnych, więc możesz stylować swoje komponenty, tak jak widzisz.
Użytkowników definiuje akceptowalne typy plików. Możesz poinstruować Dropzone do zaakceptowania lub odrzucenia określonych typów plików poprzez akceptowanie propozycji.
Acceptacja zwyczajowa: twierdzenie. Propozytor pozwala udzielić walidacji na różne pliki. React Dropzone – darmowa biblioteka Drag i Drop React.

React Grid Layout (ang.).

React Grid Layout (ang.). Jest to rezygnalny i drgawkowy układ sieciowych.

Screenshot-from-2023-04-05-14-59-04

Instalacja;

npm install react-grid-layout

Może on importować tę bibliotekę następująco:

1
import GridLayout from "react-grid-layout";

Features

zależność : Grid Layout jest zbudowany w całości na React i jest darmowy z JQuery.
Powtórny widget : Na górnej części elementu można również realizować elementy.
Odpowiedzialny punkt widzenia: Biblioteka zapewnia odrębny układ dla każdego punktu przerwowego.
Celnik: Możesz dodawać lub usuwać widgety bez odbudowy całej sieci. Grid Layout – darmowa biblioteka React.

React r.

React r. Jest to element drgawkowy i resizable.

Screenshot-from-2023-04-05-15-11-24

Instalacja;

npm i -S react-rnd

yarn add react-rnd

Features

Simple: React rnd ma być prosty, ale bardzo mocny.
Porównuje zarówno język JavaScript, jak i JavaScript. Możesz użyć rndu React z waszą aplikacją, niezależnie od tego, czy skonfigurował ją z JavaScript lub TypeScript.
wspierania resize : Możesz łatwo rezystować komponenty tworzone przy użyciu rndy React dopasowania potrzeb. React rnd – darmowa, otwarta biblioteka React.

React Virtualized (ang.).

React Virtualized (ang.). Jest to ramy reaktywacji drag-and-drop, które zawierają wbudowany wirtualny zwojów.

Screenshot-from-2023-04-05-15-29-46

Instalacja;

npm install --save react-virtualized-dnd

Może on importować rzeczywistość wirtualną.

1
import ExampleBoard from 'react-virtualized-dnd';

Features

Wariety komponentów do wyboru: Komponenty są zgrupowane w „Fixed Height”, „Variable Height” i „Groupable Droppables”.
Celnik: Możesz stosować komponenty z Virtualized dnd w celu dostosowania potrzeb. Reaktywacja Wirtualny dnd jest otwartym frameworkiem reaktywacji, którego kod źródłowy jest obsługiwany przez GitHub.

React Movable (ang.).

React Movable (ang.). Jest to biblioteka reaktywna dla list i tabel.

Screenshot-from-2023-04-05-19-27-03

Instalacja;

yarn add react-movable

Może on importować tę bibliotekę.

1
import { List, arrayMove } from 'react-movable';

Features

Różne opcje zrzutu i rzutu do wyboru: Biblioteka posiada kody kotłownicze dla różnych typów komponentów dragon-and-drop do wyboru.
Biblioteka wagi lekkiej Reaktywacja Movable nie ma zależności, np. JQuery. Jest mniejsza niż 4kB (gzipped).
Unopiniowane styly: Reaktywna Movable nie kontroluje tego, jak możesz chcieć opracować.
Pomoc: Biblioteka ta pomaga stworzyć aplikacje, które mogą być wykorzystywane na smartfonach, tabletach i dowolnym urządzeniem z dotyką.
Napisana w TypeScript: Możesz wprowadzać typy do kodu, funkcjonalność niedostępna w JavaScript. React Movable – darmowa, otwarta biblioteka React.

Draggable

Draggable Jest to zapach i kropla. Biblioteka reaktywna, która pozwala programistom na stworzenie zdarzeń drag-and-drop poprzez abstrakcyjne wydarzenia przeglądarki w kompleksowym API.

Screenshot-from-2023-04-05-19-39-16

Instalacja;

npm install @shopify/draggable --save

or through yarn:

yarn add @shopify/draggable

Może on importować Draggable do aplikacji.

1
import { Draggable } from '@shopify/draggable';

Features

Komponenty kategoryczne: Dokładna część do użytkowania jest łatwe, ponieważ komponenty są podzielone. Te składniki są dopasowalne.
Porównaj: Porównanie z głównymi przeglądarkami. Możesz używać Draggable z przeglądarkami takich jak Google Chrome, Mozilla Firefox i Apple Safari.
Strona oficjalna Po pracy z biblioteką można dodać definicje języka TypeScript do kodu.
Wtyczka pomocnicza Można dodać do funkcji Draggable’a z wtyczkami takimi jak np. wtyczki. Collidable (ang.). i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i oraz i i i i i i i i i i i i i i i i i i i i i i i oraz i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i SwapAnimacja . Draggable jest bezpłatną, otwarta biblioteką React, która jest utrzymywana przez współpracowników.

React Drag (ang.).

React drag-to-select (ang.). Jest to biblioteka React, którą można użyć w celu dodania funkcji drag-to-select dla twojej aplikacji.

Screenshot-from-2023-04-06-01-44-38

Instalacja;

npm install --save @air/react-drag-to-select

yarn add @air/react-drag-to-select

Może on importować tę bibliotekę do twojej aplikacji.

1
import { useSelectionContainer } from '@air/react-drag-to-select'

Features

Simple: Biblioteka ta nie jest wybierana. Biblioteka jednak rysuje boks selekcji i daje koordynacje.
Strona oficjalna Biblioteka Drag-to-select została napisana w TypeScript, co oznacza, że można ją wykorzystać z aplikacjami napisanymi w TypeScript i JavaScript.
Testy wsparcia: Możesz korzystać z biblioteki z większości ram testowych. React Drag-to-select – darmowa biblioteka źródłowa.

Draguła

Draguła Jest to prosta biblioteka reaktywna.

Screenshot-from-2023-04-06-01-07-00

Instalacja;

npm install react-dragula --save

Or, właśc.

bower install react-dragula --save

Features

Celnik: Możesz skorzystać z części React Dragula na potrzeby.
Dotyk wsparcia: Możesz używać tej biblioteki do tworzenia aplikacji, które mogą być wykorzystywane na smartfonach, tabletach i innych urządzeniach dotykowych.
lekkowaga: React Dragula ma niewielkie rozmiary sprzężenia, co sprawia, że jest doskonałe, jeśli chcesz twój aplikacji. React Dragula – darmowa biblioteka źródłowa.

Obliczenie

title: “10 Best Drag and Drop React Libraries for Effortless Interactions (ang.).” date: “2023-10-30T05:03:01” draft: false description: “Czy znasz, że możesz poprawić interaktywność użytkowników na aplikacjach Twojego Reacta za pomocą bibliotek drutu i dropu. Poniższa jest jedną z najlepszych bibliotek wdrażanych do dziś. " autor: “toto” image: “https://cdn.99tz.top/be55757c94/2023/04/281e3c4fdcd946599b8fcdc6f3ad0e74.webp" cover: “https://cdn.99tz.top/be55757c94/2023/04/281e3c4fdcd946599b8fcdc6f3ad0e74.webp" tags: [] categories: [‘Development’] theme: light

Może też używać funkcji Drag-and-Drop w następujących przypadkach.

File upload: Użytkownicy mogą ciągnąć i usuwać pliki zamiast zwojowania przez maszyny do wyboru i wysyłania plików.
tablice kanban: Możesz stworzyć rozdzielczość, w której użytkownicy mogą ciągnąć i upuszczać przedmioty w zależności od poziomu aktywności lub etapów.
galerie obrazów: Możesz posiadać galerię zdjęć, w której użytkownicy mogą załadować i zaobserwować obrazy.
Widgets: Użytkownicy mogą dostosowywać wygląd aplikacji poprzez ciąganie i spadek widgetów.
Shopping cart (ang.). Użytkownicy mogą kliknąć na miejscu, ciągnąć go i zrzucać go w kartę. React Drag and Drop Library jest zestawem wcześniej zbudowanych komponentów, które pozwalają programistom wdrożyć funkcjonalność Drag i Drop w aplikacjach React.

Jak biblioteki Drag i Drop mogą pomóc w lepszej interakcji użytkownika.

How-Drag-and-Drop-libraries-will-help-in-better-UI-interactions

Wykorzystywanie użytkowe Funkcja “dra-and-drop” jest intuicyjnym podejściem dla użytkowników do interakcji z aplikacją. Opcja ciągania i odrzucenia przedmiotów zamiast wejściowego ich ręcznie zapewnia interaktywne i bezsłodne interakcje.
Symplified workflow (ang.). Zamiast przeładować pliki z różnych lokalizacji komputera do aplikacji, można je po prostu usunąć.
Increasywność: Funkcje Drag-and-drop ratują czas, co sprawia, że użytkownicy są bardziej produktywni.
Dostęp do urządzeń mobilnych: Urządzenia mobilne, takie jak smartfony i tablety, mają ograniczony ekran. Użytkownicy przeważnie opierają się na gestach na na żegludze, co sprawia, że dodanie ciągnie się i rzuca niesamowite dodanie.
Obsługuje interfejsy: Funkcja Drag-and-drop może dodać wizualną apelację do interfejsu użytkownika. Możesz dodać animacje, które zapewniają sprzężenie zwrotne lub opisują działania jako użytkownicy ciągną i upuszczają przedmioty. Są to najlepsze biblioteki Drag i Drop React.

React DnD

Screenshot-from-2023-04-05-11-35-49

Instalacja;

npm install react-dnd react-dnd-html5-backend

Może zaimponować React DnD do Your React.

1
import { useDrag } from 'react-dnd'

Key

Wykorzystywane są ze sobą elementy: Biblioteka ta nie zawiera widgetów. Wprowadza do nich elementy i wstrząsa do nich.
Przykład: Możesz dodać zwyczajny backend oparty na wydarzeniach myszy lub wydarzeniach dotykowych, kiedy wykorzystuje bibliotekę DnD.
Testowanie: Jest lub Enzyme testuje kod DnD.
Pomoc: Reaktywacja DnD Dodaje funkcjonalność do tej biblioteki. React DnD – darmowa biblioteka internetowa.

React Draggable (ang.).

React Draggable (ang.). Jest to prosta, ale mocna. Biblioteka reaktywna, która ułatwia tworzenie elementów drgawkowych.

Screenshot-from-2023-04-05-14-21-05

Instalacja;

npm install react-draggable

Aby użyć React Draggable, wprowadza się do przeznaczenia na swój komponent.

1
import Draggable from 'react-draggable';

Features

Łatwa do instalacji i konfiguracji: Wszystko potrzebuje zainstalowania i wpisania biblioteki do rozpoczęcia prac. Może także importować indywidualne komponenty z biblioteki.
Porównanie z wanilią JavaScript i React. Możesz użyć React Draggable z równiną JavaScript.

1
let Draggable = require('react-draggable');let DraggableCore = Draggable.DraggableCore;

Porównywana z innymi bibliotekami React. Możesz użyć React Draggable z innymi bibliotekami, takimi jak React Grid Layout. React Draggable – darmowa biblioteka Drap i Drop React.

Dropzone

Dropzone Jest to prosta jednostka Hooka, której celem jest stworzenie HTML-5 zgodnej strefy drag-and-drop dla plików.

React-Dropzone

Instalacja;

npm install --save react-dropzone

yarn add react-dropzone

Następuje do tego, że może ona importować tę bibliotekę.

1
import {useDropzone} from 'react-dropzone';

Features

Styling Dropzone (ang.). Biblioteka ta nie ustawia żadnych zasad stylizacyjnych, więc możesz stylować swoje komponenty, tak jak widzisz.
Użytkowników definiuje akceptowalne typy plików. Możesz poinstruować Dropzone do zaakceptowania lub odrzucenia określonych typów plików poprzez akceptowanie propozycji.
Acceptacja zwyczajowa: twierdzenie. Propozytor pozwala udzielić walidacji na różne pliki. React Dropzone – darmowa biblioteka Drag i Drop React.

React Grid Layout (ang.).

React Grid Layout (ang.). Jest to rezygnalny i drgawkowy układ sieciowych.

Screenshot-from-2023-04-05-14-59-04

Instalacja;

npm install react-grid-layout

Może on importować tę bibliotekę następująco:

1
import GridLayout from "react-grid-layout";

Features

zależność : Grid Layout jest zbudowany w całości na React i jest darmowy z JQuery.
Powtórny widget : Na górnej części elementu można również realizować elementy.
Odpowiedzialny punkt widzenia: Biblioteka zapewnia odrębny układ dla każdego punktu przerwowego.
Celnik: Możesz dodawać lub usuwać widgety bez odbudowy całej sieci. Grid Layout – darmowa biblioteka React.

React r.

React r. Jest to element drgawkowy i resizable.

Screenshot-from-2023-04-05-15-11-24

Instalacja;

npm i -S react-rnd

yarn add react-rnd

Features

Simple: React rnd ma być prosty, ale bardzo mocny.
Porównuje zarówno język JavaScript, jak i JavaScript. Możesz użyć rndu React z waszą aplikacją, niezależnie od tego, czy skonfigurował ją z JavaScript lub TypeScript.
wspierania resize : Możesz łatwo rezystować komponenty tworzone przy użyciu rndy React dopasowania potrzeb. React rnd – darmowa, otwarta biblioteka React.

React Virtualized (ang.).

React Virtualized (ang.). Jest to ramy reaktywacji drag-and-drop, które zawierają wbudowany wirtualny zwojów.

Screenshot-from-2023-04-05-15-29-46

Instalacja;

npm install --save react-virtualized-dnd

Może on importować rzeczywistość wirtualną.

1
import ExampleBoard from 'react-virtualized-dnd';

Features

Wariety komponentów do wyboru: Komponenty są zgrupowane w „Fixed Height”, „Variable Height” i „Groupable Droppables”.
Celnik: Możesz stosować komponenty z Virtualized dnd w celu dostosowania potrzeb. Reaktywacja Wirtualny dnd jest otwartym frameworkiem reaktywacji, którego kod źródłowy jest obsługiwany przez GitHub.

React Movable (ang.).

React Movable (ang.). Jest to biblioteka reaktywna dla list i tabel.

Screenshot-from-2023-04-05-19-27-03

Instalacja;

yarn add react-movable

Może on importować tę bibliotekę.

1
import { List, arrayMove } from 'react-movable';

Features

Różne opcje zrzutu i rzutu do wyboru: Biblioteka posiada kody kotłownicze dla różnych typów komponentów dragon-and-drop do wyboru.
Biblioteka wagi lekkiej Reaktywacja Movable nie ma zależności, np. JQuery. Jest mniejsza niż 4kB (gzipped).
Unopiniowane styly: Reaktywna Movable nie kontroluje tego, jak możesz chcieć opracować.
Pomoc: Biblioteka ta pomaga stworzyć aplikacje, które mogą być wykorzystywane na smartfonach, tabletach i dowolnym urządzeniem z dotyką.
Napisana w TypeScript: Możesz wprowadzać typy do kodu, funkcjonalność niedostępna w JavaScript. React Movable – darmowa, otwarta biblioteka React.

Draggable

Draggable Jest to zapach i kropla. Biblioteka reaktywna, która pozwala programistom na stworzenie zdarzeń drag-and-drop poprzez abstrakcyjne wydarzenia przeglądarki w kompleksowym API.

Screenshot-from-2023-04-05-19-39-16

Instalacja;

npm install @shopify/draggable --save

or through yarn:

yarn add @shopify/draggable

Może on importować Draggable do aplikacji.

1
import { Draggable } from '@shopify/draggable';

Features

Komponenty kategoryczne: Dokładna część do użytkowania jest łatwe, ponieważ komponenty są podzielone. Te składniki są dopasowalne.
Porównaj: Porównanie z głównymi przeglądarkami. Możesz używać Draggable z przeglądarkami takich jak Google Chrome, Mozilla Firefox i Apple Safari.
Strona oficjalna Po pracy z biblioteką można dodać definicje języka TypeScript do kodu.
Wtyczka pomocnicza Można dodać do funkcji Draggable’a z wtyczkami takimi jak np. wtyczki. Collidable (ang.). i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i oraz i i i i i i i i i i i i i i i i i i i i i i i oraz i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i SwapAnimacja . Draggable jest bezpłatną, otwarta biblioteką React, która jest utrzymywana przez współpracowników.

React Drag (ang.).

React drag-to-select (ang.). Jest to biblioteka React, którą można użyć w celu dodania funkcji drag-to-select dla twojej aplikacji.

Screenshot-from-2023-04-06-01-44-38

Instalacja;

npm install --save @air/react-drag-to-select

yarn add @air/react-drag-to-select

Może on importować tę bibliotekę do twojej aplikacji.

1
import { useSelectionContainer } from '@air/react-drag-to-select'

Features

Simple: Biblioteka ta nie jest wybierana. Biblioteka jednak rysuje boks selekcji i daje koordynacje.
Strona oficjalna Biblioteka Drag-to-select została napisana w TypeScript, co oznacza, że można ją wykorzystać z aplikacjami napisanymi w TypeScript i JavaScript.
Testy wsparcia: Możesz korzystać z biblioteki z większości ram testowych. React Drag-to-select – darmowa biblioteka źródłowa.

Draguła

Draguła Jest to prosta biblioteka reaktywna.

Screenshot-from-2023-04-06-01-07-00

Instalacja;

npm install react-dragula --save

Or, właśc.

bower install react-dragula --save

Features

Celnik: Możesz skorzystać z części React Dragula na potrzeby.
Dotyk wsparcia: Możesz używać tej biblioteki do tworzenia aplikacji, które mogą być wykorzystywane na smartfonach, tabletach i innych urządzeniach dotykowych.
lekkowaga: React Dragula ma niewielkie rozmiary sprzężenia, co sprawia, że jest doskonałe, jeśli chcesz twój aplikacji. React Dragula – darmowa biblioteka źródłowa.