Featured image of post 10 Best Drag & Drop React Libraries für Effortless UI Interactions
Development

10 Best Drag & Drop React Libraries für Effortless UI Interactions

Wussten Sie, dass Sie die Benutzerinteraktivität Ihrer React-App durch Drag-and-Drop-Bibliotheken verbessern können? Die folgenden sind einige der besten Drag-and-Drop-Bibliotheken, um heute zu versuchen.

React ist eine berühmte Benutzeroberfläche (UI) JavaScript-Bibliothek. Sie können React-Bibliothek verwenden, um verschiedene Arten von Web-Apps zu erstellen, von Social Media-Apps, E-Commerce-Plattformen, Blogs, Einseitige Anwendungen , Content Management Systeme (CMS), Dashboards und Datenvisualisierungen, um einige zu erwähnen.

Entwickler können die Funktionalität von React Apps mit verschiedenen Bibliotheken und Frameworks erweitern. Solche Bibliotheken können in verschiedene Klassen gruppiert werden; Drag-and-Drop ist eine Bibliothekskategorie, die sehr beliebt ist.

Drag & Drop-Funktionalität ist eine UI-Interaktion, die es einem Benutzer ermöglicht, ein Element auf dem Bildschirm anzuklicken/ auszuwählen, zu ziehen und auf eine andere Komponente zu fallen. Ein perfektes Beispiel für diese Funktionalität ist das Umrüsten von Gegenständen in einer Liste durch Ziehen und Ablegen von Gegenständen an Ihren gewünschten Ort.

Sie können auch Drag-and-Drop-Funktionalität in den folgenden Fällen verwenden;

  • Datei hochladen: Benutzer können Drag & Drop Dateien statt Scrolling durch ihre Maschinen, um Dateien auszuwählen und hochladen.
  • Kanban Boards: Sie können ein Dashboard erstellen, in dem die Benutzer Elemente je nach Aktivitätsstufen oder -stufen ziehen und fallen können.
  • Bildergalerien: Sie können eine Bildergalerie haben, in der Benutzer Bilder hochladen und umordnen können.
  • Widgets: Benutzer können das Aussehen der App durch Ziehen und Ablegen von Widgets anpassen.
  • Warenkorb: Benutzer können auf einen Artikel klicken, ziehen Sie ihn und fallen Sie ihn in den Warenkorb. Eine React Drag and Drop-Bibliothek ist eine Reihe von vorgefertigten Komponenten, die es Entwicklern ermöglichen, Drag- und Drop-Funktionalität in React-Anwendungen zu implementieren.

Diese Bibliotheken kommen mit wiederverwendbaren Komponenten, so dass Entwickler Elemente erstellen, die gezogen und fallen gelassen werden können. Die Bibliotheken behandeln verschiedene Ereignisse wie Drag Start, Drag Enter, Drag Leave und Drop.

Wie Drag- und Drop-Bibliotheken in besseren UI-Interaktionen helfen

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

  • Verbesserte Benutzererfahrung: Die Drag-and-Drop-Funktionalität ist ein intuitiver Ansatz für Anwender, die mit einer Anwendung interagieren. Die Möglichkeit, Gegenstände zu ziehen und zu fallen, anstatt sie manuell einzugeben, bietet eine interaktive und nahtlose Interaktion.
  • Vereinfachte Workflows: Anstatt Dateien von verschiedenen Standorten Ihres Computers auf eine Anwendung hochzuladen, können Sie einfach ziehen und fallen.
  • Erhöhte Produktivität: Drag-and-Drop-Funktionalität spart Zeit und macht Anwender produktiver.
  • Geeignet für mobile Geräte: Mobile Geräte wie Smartphones und Tablets haben einen begrenzten Bildschirmraum. Nutzer verlassen sich meistens auf Gesten für die Navigation, was Drag-and-Drop eine tolle Ergänzung macht.
  • Bietet angreifende Schnittstellen: Drag-and-Drop-Funktionalität kann visuellen Reiz an die Benutzeroberfläche Ihrer App hinzufügen. Sie können Animationen hinzufügen, die Feedback liefern oder Aktionen beschreiben, wie Benutzer ziehen und Drop-Elemente auf der App. Dies sind die besten Drag und Drop React Bibliotheken:

React DnD

React DnD ist eine Reihe von React-Diensten für den Aufbau komplexer Drag-and-Drop-Schnittstellen. Diese Bibliothek ist perfekt für die Erstellung von Apps ähnlich Trello und Storify, wo Drag-and-Drop-Funktionalität auch Datenübertragung beinhaltet.

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

Installation

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

Sie können React DnD zu Ihrer React-Komponente als importieren;

1

import { useDrag } from 'react-dnd'

Hauptmerkmale

  • Funktioniert mit Ihren Komponenten: Diese Bibliothek bietet keine fertigen Widgets. Es wickelt jedoch Ihre Komponenten und spritzt Props in sie ein.
  • Erweiterbar: Sie können ein benutzerdefiniertes Backend basierend auf Maus-Events oder Touch-Events hinzufügen, wenn Sie React DnD-Bibliothek verwenden.
  • Prüfbar: Sie können Jest oder Enzyme verwenden, um React DnD-Code zu testen.
  • Touch-Unterstützung: React DnD Touch Backend fügt dieser Bibliothek Touch-Funktionalität hinzu. React DnD ist eine kostenlose Open-Source-Bibliothek.

React Dragg

React Dragg ist eine einfache, aber mächtige Reagieren Sie Bibliothek, die es einfach macht, Draggable Elemente zu erstellen.

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

Installation

npm install react-draggable

Um React Draggable zu verwenden, importieren Sie wie folgt auf Ihre React-Komponente.

1

import Draggable from 'react-draggable';

Eigenschaften

  • Einfach zu installieren und zu konfigurieren: Sie müssen nur die Bibliothek installieren und importieren, um zu starten. Sie können auch einzelne Komponenten aus der Bibliothek importieren.
  • Kompatibel mit Vanille JavaScript und React: Sie können React Draggable mit einfachem JavaScript wie folgt verwenden;
1

let Draggable = require('react-draggable');let DraggableCore = Draggable.DraggableCore;
  • Kompatibel mit anderen React-Bibliotheken: Sie können React Draggable mit anderen Bibliotheken wie React Grid Layout verwenden. React Draggable ist eine kostenlose, Open Source Drap und Drop React Bibliothek.

React Dropzone

React Dropzone ist ein einfacher React Hook zum Erstellen einer HTML-5-konformen Drag-and-Drop-Zone für Dateien.

React-Dropzone

Installation

npm install --save react-dropzone

oder

yarn add react-dropzone

Sie können diese Bibliothek dann wie folgt importieren:

1

import {useDropzone} from 'react-dropzone';

Eigenschaften

  • Styling Dropzone: Diese Bibliothek setzt keine Styling-Regeln, und Sie können so Ihre Komponenten, wie Sie sehen fit.
  • Ermöglicht Benutzern, akzeptable Dateitypen zu definieren: Sie können die Dropzone anweisen, bestimmte Dateitypen zu akzeptieren oder abzulehnen, indem Sie akzeptieren prop.
  • Akzeptiert individuelle Validierung: Mit der Validierungsrequisite können Sie benutzerdefinierte Validierungen für verschiedene Dateien angeben. React Dropzone ist eine kostenlose, Open Source Drag und Drop React Bibliothek.

React Grid Layout

React Grid Layout ist ein resizeables und ziehbares Rasterlayout für React.

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

Installation

npm install react-grid-layout

Sie können diese Bibliothek wie folgt importieren:

1

import GridLayout from "react-grid-layout";

Eigenschaften

  • Abhängigkeiten frei : React Grid Layout ist rein auf React gebaut und ist frei von JQuery.
  • Reaktivierbare Widgets : Auf der Drag-and-Drop-Funktion können Sie auch die Komponenten ändern.
  • Responsive Breakpoints: Die Bibliothek bietet für jeden Breakpoint ein separates Layout.
  • Anpassbar: Sie können Widgets hinzufügen oder entfernen, ohne das gesamte Netz wieder aufzubauen. React Grid Layout ist eine kostenlose Open-Source-React-Bibliothek.

React rnd

React rnd ist eine ziehbare und resisierbare Komponente für React.

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

Installation

npm i -S react-rnd

Oder

yarn add react-rnd

Eigenschaften

  • Einfach: React rnd ist einfach, aber sehr leistungsstark.
  • Kompatibel mit TypeScript und JavaScript: Sie können React rnd mit Ihrer App verwenden, unabhängig davon, ob Sie sie mit JavaScript oder TypeScript konfiguriert haben.
  • Unterstützt Resizing : Sie können einfach Komponenten, die mit React rnd erstellt werden, um Ihren Bedürfnissen anzupassen. React rnd ist eine kostenlose, Open-Source-React-Bibliothek.

React Virtualized dnd

React Virtualized dnd ist ein Drag-and-Drop-React-Framework, das eingebaute Virtualisierung Scrollbars bietet.

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

Installation

npm install --save react-virtualized-dnd

Sie können React Virtualized dnd wie importieren;

1

import ExampleBoard from 'react-virtualized-dnd';

Eigenschaften

  • Vielfalt der Komponenten zur Auswahl: Die Komponenten werden in „Fixed Height“, „Variable Height“ und „Groupable Droppables“ zusammengefasst.
  • Anpassbar: Sie können die Komponenten von React Virtualized dnd auf Ihre Bedürfnisse anpassen. Reaktion Virtualized dnd ist ein Open-Source-React-Framework, dessen Quellcode auf GitHub gehostet wird.

React Movable

React Movable ist eine Drag-and-Drop-React-Bibliothek für Listen und Tabellen.

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

Installation

yarn add react-movable

Sie können diese Bibliothek wie importieren;

1

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

Eigenschaften

  • Verschiedene Drag-and-Drop Optionen zur Auswahl: Die Bibliothek verfügt über Kesselplatten-Codes für verschiedene Arten von Drag-and-Drop-Komponenten zur Auswahl.
  • Leichte Bibliothek: React Movable hat keine Abhängigkeiten wie JQuery. Es ist weniger als 4kB (gzipped).
  • Unopiniiertes Styling: React Movable kontrolliert nicht, wie Sie Ihre App gestalten möchten.
  • Touch-Unterstützung: Diese Bibliothek hilft, Apps zu erstellen, die auf Smartphones, Tablets und jedem Gerät mit Touch-Funktionalität verwendet werden können.
  • Geschrieben in TypeScript: Sie können Types zu Ihrem Code einführen, eine Funktionalität, die in JavaScript nicht verfügbar ist. React Movable ist eine kostenlose, Open-Source-React-Bibliothek.

Ziehbar

Ziehbar ist ein Drag-and-Drop Reagieren Sie Bibliothek, die Entwicklern erlaubt, Drag-and-Drop-Ereignisse zu erstellen, indem Sie native Browser-Ereignisse in eine umfassende API abstrahieren.

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

Installation

npm install @shopify/draggable --save

oder über Garne:

yarn add @shopify/draggable

Sie können Draggable zu Ihrer React App importieren, wie;

1

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

Eigenschaften

  • Kategorisierte Komponenten: Das Finden der genauen Komponente ist einfach, da die Komponenten kategorisiert sind. Diese Komponenten sind anpassbar.
  • Kompatibel mit großen Browsern: Sie können Draggable mit Browsern wie Google Chrome, Mozilla Firefox und Apple Safari verwenden.
  • Unterstützt TypeScript: Wenn Sie mit dieser Bibliothek arbeiten, können Sie TypeScript-Definitionen zu Ihrem Code hinzufügen.
  • Unterstützt Plugins: Sie können Draggables Funktionalität mit Plugins wie Kollision und SwapAnimation . Draggable ist eine kostenlose, Open-Source-React-Bibliothek, die von Mitwirkenden gepflegt wird.

React Drag auswählen

React Drag-to-select ist eine React-Bibliothek, die Sie verwenden können, um Drag-to-select-Funktionalität zu Ihrer Anwendung hinzuzufügen.

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

Installation

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

Oder

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

Sie können diese Bibliothek wie folgt in Ihre App importieren;

1

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

Eigenschaften

  • Einfach: Diese Bibliothek wählt keine Artikel aus. Allerdings zieht die Bibliothek das Auswahlfeld und gibt Ihnen Koordinaten.
  • Unterstützt TypeScript: React Drag-to-select-Bibliothek wird in TypeScript geschrieben, was bedeutet, dass Sie es mit React-Apps verwenden können, die in TypeScript und JavaScript geschrieben sind.
  • Unterstützt die Prüfung: Sie können diese Bibliothek mit den meisten React Test Frameworks verwenden. React Drag-to-select ist eine kostenlose Open-Source-Bibliothek.

React Dragula

React Dragula ist eine einfache Drag-and-Drop React-Bibliothek.

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

Installation

npm install react-dragula --save

Oder,

bower install react-dragula --save

Eigenschaften

  • Anpassbar: Sie können die Komponenten von React Dragula an Ihre Bedürfnisse anpassen.
  • Unterstützt Touch: Mit dieser Bibliothek können Sie Apps erstellen, die auf Smartphones, Tablets und anderen Touch-Geräten verwendet werden können.
  • Leicht: React Dragula hat eine kleine Bündelgröße, so dass es perfekt ist, wenn Sie Ihre React-App klein sein möchten. React Dragula ist eine kostenlose Open-Source-Bibliothek.

Schlussfolgerung

Sie haben jetzt eine Vielzahl von Drag-and-Drop-Bibliotheken, die Sie auf Ihrer nächsten React-Anwendung verwenden können. Die Auswahl der Bibliothek hängt von den Funktionen ab, die Sie auf Ihre nächste App, Geschmack und Präferenzen haben möchten.

Wenn Ihre App groß ist, können Sie mehrere Drag-and-Drop-Bibliotheken verwenden, um verschiedene Bedürfnisse zu erfüllen. Die meisten dieser Bibliotheken sind mit verschiedenen kompatibel React Testbibliotheken , so dass es einfach, fehlerfreie Anwendungen zu versenden.

title: “10 Best Drag & Drop React Libraries für Effortless UI Interactions” date: “2023-10-24T04:03:01” draft: false description: “Wussten Sie, dass Sie die Benutzerinteraktivität Ihrer React-App durch Drag-and-Drop-Bibliotheken verbessern können? Die folgenden sind einige der besten Drag-and-Drop-Bibliotheken, um heute zu versuchen. " autor: “toto” image: “https://cdn.99tz.top/be55757c94/2023/04/36026ac735274720ac43c1bb7b231059.webp" cover: “https://cdn.99tz.top/be55757c94/2023/04/36026ac735274720ac43c1bb7b231059.webp" tags: [] categories: [‘Development’] theme: light

React ist eine berühmte Benutzeroberfläche (UI) JavaScript-Bibliothek. Sie können React-Bibliothek verwenden, um verschiedene Arten von Web-Apps zu erstellen, von Social Media-Apps, E-Commerce-Plattformen, Blogs, Einseitige Anwendungen , Content Management Systeme (CMS), Dashboards und Datenvisualisierungen, um einige zu erwähnen.

Entwickler können die Funktionalität von React Apps mit verschiedenen Bibliotheken und Frameworks erweitern. Solche Bibliotheken können in verschiedene Klassen gruppiert werden; Drag-and-Drop ist eine Bibliothekskategorie, die sehr beliebt ist.

Drag & Drop-Funktionalität ist eine UI-Interaktion, die es einem Benutzer ermöglicht, ein Element auf dem Bildschirm anzuklicken/ auszuwählen, zu ziehen und auf eine andere Komponente zu fallen. Ein perfektes Beispiel für diese Funktionalität ist das Umrüsten von Gegenständen in einer Liste durch Ziehen und Ablegen von Gegenständen an Ihren gewünschten Ort.

Sie können auch Drag-and-Drop-Funktionalität in den folgenden Fällen verwenden;

  • Datei hochladen: Benutzer können Drag & Drop Dateien statt Scrolling durch ihre Maschinen, um Dateien auszuwählen und hochladen.
  • Kanban Boards: Sie können ein Dashboard erstellen, in dem die Benutzer Elemente je nach Aktivitätsstufen oder -stufen ziehen und fallen können.
  • Bildergalerien: Sie können eine Bildergalerie haben, in der Benutzer Bilder hochladen und umordnen können.
  • Widgets: Benutzer können das Aussehen der App durch Ziehen und Ablegen von Widgets anpassen.
  • Warenkorb: Benutzer können auf einen Artikel klicken, ziehen Sie ihn und fallen Sie ihn in den Warenkorb. Eine React Drag and Drop-Bibliothek ist eine Reihe von vorgefertigten Komponenten, die es Entwicklern ermöglichen, Drag- und Drop-Funktionalität in React-Anwendungen zu implementieren.

Diese Bibliotheken kommen mit wiederverwendbaren Komponenten, so dass Entwickler Elemente erstellen, die gezogen und fallen gelassen werden können. Die Bibliotheken behandeln verschiedene Ereignisse wie Drag Start, Drag Enter, Drag Leave und Drop.

Wie Drag- und Drop-Bibliotheken in besseren UI-Interaktionen helfen

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

  • Verbesserte Benutzererfahrung: Die Drag-and-Drop-Funktionalität ist ein intuitiver Ansatz für Anwender, die mit einer Anwendung interagieren. Die Möglichkeit, Gegenstände zu ziehen und zu fallen, anstatt sie manuell einzugeben, bietet eine interaktive und nahtlose Interaktion.
  • Vereinfachte Workflows: Anstatt Dateien von verschiedenen Standorten Ihres Computers auf eine Anwendung hochzuladen, können Sie einfach ziehen und fallen.
  • Erhöhte Produktivität: Drag-and-Drop-Funktionalität spart Zeit und macht Anwender produktiver.
  • Geeignet für mobile Geräte: Mobile Geräte wie Smartphones und Tablets haben einen begrenzten Bildschirmraum. Nutzer verlassen sich meistens auf Gesten für die Navigation, was Drag-and-Drop eine tolle Ergänzung macht.
  • Bietet angreifende Schnittstellen: Drag-and-Drop-Funktionalität kann visuellen Reiz an die Benutzeroberfläche Ihrer App hinzufügen. Sie können Animationen hinzufügen, die Feedback liefern oder Aktionen beschreiben, wie Benutzer ziehen und Drop-Elemente auf der App. Dies sind die besten Drag und Drop React Bibliotheken:

React DnD

React DnD ist eine Reihe von React-Diensten für den Aufbau komplexer Drag-and-Drop-Schnittstellen. Diese Bibliothek ist perfekt für die Erstellung von Apps ähnlich Trello und Storify, wo Drag-and-Drop-Funktionalität auch Datenübertragung beinhaltet.

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

Installation

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

Sie können React DnD zu Ihrer React-Komponente als importieren;

1

import { useDrag } from 'react-dnd'

Hauptmerkmale

  • Funktioniert mit Ihren Komponenten: Diese Bibliothek bietet keine fertigen Widgets. Es wickelt jedoch Ihre Komponenten und spritzt Props in sie ein.
  • Erweiterbar: Sie können ein benutzerdefiniertes Backend basierend auf Maus-Events oder Touch-Events hinzufügen, wenn Sie React DnD-Bibliothek verwenden.
  • Prüfbar: Sie können Jest oder Enzyme verwenden, um React DnD-Code zu testen.
  • Touch-Unterstützung: React DnD Touch Backend fügt dieser Bibliothek Touch-Funktionalität hinzu. React DnD ist eine kostenlose Open-Source-Bibliothek.

React Dragg

React Dragg ist eine einfache, aber mächtige Reagieren Sie Bibliothek, die es einfach macht, Draggable Elemente zu erstellen.

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

Installation

npm install react-draggable

Um React Draggable zu verwenden, importieren Sie wie folgt auf Ihre React-Komponente.

1

import Draggable from 'react-draggable';

Eigenschaften

  • Einfach zu installieren und zu konfigurieren: Sie müssen nur die Bibliothek installieren und importieren, um zu starten. Sie können auch einzelne Komponenten aus der Bibliothek importieren.
  • Kompatibel mit Vanille JavaScript und React: Sie können React Draggable mit einfachem JavaScript wie folgt verwenden;
1

let Draggable = require('react-draggable');let DraggableCore = Draggable.DraggableCore;
  • Kompatibel mit anderen React-Bibliotheken: Sie können React Draggable mit anderen Bibliotheken wie React Grid Layout verwenden. React Draggable ist eine kostenlose, Open Source Drap und Drop React Bibliothek.

React Dropzone

React Dropzone ist ein einfacher React Hook zum Erstellen einer HTML-5-konformen Drag-and-Drop-Zone für Dateien.

React-Dropzone

Installation

npm install --save react-dropzone

oder

yarn add react-dropzone

Sie können diese Bibliothek dann wie folgt importieren:

1

import {useDropzone} from 'react-dropzone';

Eigenschaften

  • Styling Dropzone: Diese Bibliothek setzt keine Styling-Regeln, und Sie können so Ihre Komponenten, wie Sie sehen fit.
  • Ermöglicht Benutzern, akzeptable Dateitypen zu definieren: Sie können die Dropzone anweisen, bestimmte Dateitypen zu akzeptieren oder abzulehnen, indem Sie akzeptieren prop.
  • Akzeptiert individuelle Validierung: Mit der Validierungsrequisite können Sie benutzerdefinierte Validierungen für verschiedene Dateien angeben. React Dropzone ist eine kostenlose, Open Source Drag und Drop React Bibliothek.

React Grid Layout

React Grid Layout ist ein resizeables und ziehbares Rasterlayout für React.

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

Installation

npm install react-grid-layout

Sie können diese Bibliothek wie folgt importieren:

1

import GridLayout from "react-grid-layout";

Eigenschaften

  • Abhängigkeiten frei : React Grid Layout ist rein auf React gebaut und ist frei von JQuery.
  • Reaktivierbare Widgets : Auf der Drag-and-Drop-Funktion können Sie auch die Komponenten ändern.
  • Responsive Breakpoints: Die Bibliothek bietet für jeden Breakpoint ein separates Layout.
  • Anpassbar: Sie können Widgets hinzufügen oder entfernen, ohne das gesamte Netz wieder aufzubauen. React Grid Layout ist eine kostenlose Open-Source-React-Bibliothek.

React rnd

React rnd ist eine ziehbare und resisierbare Komponente für React.

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

Installation

npm i -S react-rnd

Oder

yarn add react-rnd

Eigenschaften

  • Einfach: React rnd ist einfach, aber sehr leistungsstark.
  • Kompatibel mit TypeScript und JavaScript: Sie können React rnd mit Ihrer App verwenden, unabhängig davon, ob Sie sie mit JavaScript oder TypeScript konfiguriert haben.
  • Unterstützt Resizing : Sie können einfach Komponenten, die mit React rnd erstellt werden, um Ihren Bedürfnissen anzupassen. React rnd ist eine kostenlose, Open-Source-React-Bibliothek.

React Virtualized dnd

React Virtualized dnd ist ein Drag-and-Drop-React-Framework, das eingebaute Virtualisierung Scrollbars bietet.

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

Installation

npm install --save react-virtualized-dnd

Sie können React Virtualized dnd wie importieren;

1

import ExampleBoard from 'react-virtualized-dnd';

Eigenschaften

  • Vielfalt der Komponenten zur Auswahl: Die Komponenten werden in „Fixed Height“, „Variable Height“ und „Groupable Droppables“ zusammengefasst.
  • Anpassbar: Sie können die Komponenten von React Virtualized dnd auf Ihre Bedürfnisse anpassen. Reaktion Virtualized dnd ist ein Open-Source-React-Framework, dessen Quellcode auf GitHub gehostet wird.

React Movable

React Movable ist eine Drag-and-Drop-React-Bibliothek für Listen und Tabellen.

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

Installation

yarn add react-movable

Sie können diese Bibliothek wie importieren;

1

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

Eigenschaften

  • Verschiedene Drag-and-Drop Optionen zur Auswahl: Die Bibliothek verfügt über Kesselplatten-Codes für verschiedene Arten von Drag-and-Drop-Komponenten zur Auswahl.
  • Leichte Bibliothek: React Movable hat keine Abhängigkeiten wie JQuery. Es ist weniger als 4kB (gzipped).
  • Unopiniiertes Styling: React Movable kontrolliert nicht, wie Sie Ihre App gestalten möchten.
  • Touch-Unterstützung: Diese Bibliothek hilft, Apps zu erstellen, die auf Smartphones, Tablets und jedem Gerät mit Touch-Funktionalität verwendet werden können.
  • Geschrieben in TypeScript: Sie können Types zu Ihrem Code einführen, eine Funktionalität, die in JavaScript nicht verfügbar ist. React Movable ist eine kostenlose, Open-Source-React-Bibliothek.

Ziehbar

Ziehbar ist ein Drag-and-Drop Reagieren Sie Bibliothek, die Entwicklern erlaubt, Drag-and-Drop-Ereignisse zu erstellen, indem Sie native Browser-Ereignisse in eine umfassende API abstrahieren.

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

Installation

npm install @shopify/draggable --save

oder über Garne:

yarn add @shopify/draggable

Sie können Draggable zu Ihrer React App importieren, wie;

1

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

Eigenschaften

  • Kategorisierte Komponenten: Das Finden der genauen Komponente ist einfach, da die Komponenten kategorisiert sind. Diese Komponenten sind anpassbar.
  • Kompatibel mit großen Browsern: Sie können Draggable mit Browsern wie Google Chrome, Mozilla Firefox und Apple Safari verwenden.
  • Unterstützt TypeScript: Wenn Sie mit dieser Bibliothek arbeiten, können Sie TypeScript-Definitionen zu Ihrem Code hinzufügen.
  • Unterstützt Plugins: Sie können Draggables Funktionalität mit Plugins wie Kollision und SwapAnimation . Draggable ist eine kostenlose, Open-Source-React-Bibliothek, die von Mitwirkenden gepflegt wird.

React Drag auswählen

React Drag-to-select ist eine React-Bibliothek, die Sie verwenden können, um Drag-to-select-Funktionalität zu Ihrer Anwendung hinzuzufügen.

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

Installation

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

Oder

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

Sie können diese Bibliothek wie folgt in Ihre App importieren;

1

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

Eigenschaften

  • Einfach: Diese Bibliothek wählt keine Artikel aus. Allerdings zieht die Bibliothek das Auswahlfeld und gibt Ihnen Koordinaten.
  • Unterstützt TypeScript: React Drag-to-select-Bibliothek wird in TypeScript geschrieben, was bedeutet, dass Sie es mit React-Apps verwenden können, die in TypeScript und JavaScript geschrieben sind.
  • Unterstützt die Prüfung: Sie können diese Bibliothek mit den meisten React Test Frameworks verwenden. React Drag-to-select ist eine kostenlose Open-Source-Bibliothek.

React Dragula

React Dragula ist eine einfache Drag-and-Drop React-Bibliothek.

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

Installation

npm install react-dragula --save

Oder,

bower install react-dragula --save

Eigenschaften

  • Anpassbar: Sie können die Komponenten von React Dragula an Ihre Bedürfnisse anpassen.
  • Unterstützt Touch: Mit dieser Bibliothek können Sie Apps erstellen, die auf Smartphones, Tablets und anderen Touch-Geräten verwendet werden können.
  • Leicht: React Dragula hat eine kleine Bündelgröße, so dass es perfekt ist, wenn Sie Ihre React-App klein sein möchten. React Dragula ist eine kostenlose Open-Source-Bibliothek.

Schlussfolgerung

Sie haben jetzt eine Vielzahl von Drag-and-Drop-Bibliotheken, die Sie auf Ihrer nächsten React-Anwendung verwenden können. Die Auswahl der Bibliothek hängt von den Funktionen ab, die Sie auf Ihre nächste App, Geschmack und Präferenzen haben möchten.

Wenn Ihre App groß ist, können Sie mehrere Drag-and-Drop-Bibliotheken verwenden, um verschiedene Bedürfnisse zu erfüllen. Die meisten dieser Bibliotheken sind mit verschiedenen kompatibel React Testbibliotheken , so dass es einfach, fehlerfreie Anwendungen zu versenden.

title: “10 Best Drag & Drop React Libraries für Effortless UI Interactions” date: “2023-10-25T04:03:02” draft: false description: “Wussten Sie, dass Sie die Benutzerinteraktivität Ihrer React-App durch Drag-and-Drop-Bibliotheken verbessern können? Die folgenden sind einige der besten Drag-and-Drop-Bibliotheken, um heute zu versuchen. " 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

React ist eine berühmte Benutzeroberfläche (UI) JavaScript-Bibliothek. Sie können React-Bibliothek verwenden, um verschiedene Arten von Web-Apps zu erstellen, von Social Media-Apps, E-Commerce-Plattformen, Blogs, Einseitige Anwendungen , Content Management Systeme (CMS), Dashboards und Datenvisualisierungen, um einige zu erwähnen.

Entwickler können die Funktionalität von React Apps mit verschiedenen Bibliotheken und Frameworks erweitern. Solche Bibliotheken können in verschiedene Klassen gruppiert werden; Drag-and-Drop ist eine Bibliothekskategorie, die sehr beliebt ist.

Drag & Drop-Funktionalität ist eine UI-Interaktion, die es einem Benutzer ermöglicht, ein Element auf dem Bildschirm anzuklicken/ auszuwählen, zu ziehen und auf eine andere Komponente zu fallen. Ein perfektes Beispiel für diese Funktionalität ist das Umrüsten von Gegenständen in einer Liste durch Ziehen und Ablegen von Gegenständen an Ihren gewünschten Ort.

Sie können auch Drag-and-Drop-Funktionalität in den folgenden Fällen verwenden;

  • Datei hochladen: Benutzer können Drag & Drop Dateien statt Scrolling durch ihre Maschinen, um Dateien auszuwählen und hochladen.
  • Kanban Boards: Sie können ein Dashboard erstellen, in dem die Benutzer Elemente je nach Aktivitätsstufen oder -stufen ziehen und fallen können.
  • Bildergalerien: Sie können eine Bildergalerie haben, in der Benutzer Bilder hochladen und umordnen können.
  • Widgets: Benutzer können das Aussehen der App durch Ziehen und Ablegen von Widgets anpassen.
  • Warenkorb: Benutzer können auf einen Artikel klicken, ziehen Sie ihn und fallen Sie ihn in den Warenkorb. Eine React Drag and Drop-Bibliothek ist eine Reihe von vorgefertigten Komponenten, die es Entwicklern ermöglichen, Drag- und Drop-Funktionalität in React-Anwendungen zu implementieren.

Diese Bibliotheken kommen mit wiederverwendbaren Komponenten, so dass Entwickler Elemente erstellen, die gezogen und fallen gelassen werden können. Die Bibliotheken behandeln verschiedene Ereignisse wie Drag Start, Drag Enter, Drag Leave und Drop.

Wie Drag- und Drop-Bibliotheken in besseren UI-Interaktionen helfen

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

  • Verbesserte Benutzererfahrung: Die Drag-and-Drop-Funktionalität ist ein intuitiver Ansatz für Anwender, die mit einer Anwendung interagieren. Die Möglichkeit, Gegenstände zu ziehen und zu fallen, anstatt sie manuell einzugeben, bietet eine interaktive und nahtlose Interaktion.
  • Vereinfachte Workflows: Anstatt Dateien von verschiedenen Standorten Ihres Computers auf eine Anwendung hochzuladen, können Sie einfach ziehen und fallen.
  • Erhöhte Produktivität: Drag-and-Drop-Funktionalität spart Zeit und macht Anwender produktiver.
  • Geeignet für mobile Geräte: Mobile Geräte wie Smartphones und Tablets haben einen begrenzten Bildschirmraum. Nutzer verlassen sich meistens auf Gesten für die Navigation, was Drag-and-Drop eine tolle Ergänzung macht.
  • Bietet angreifende Schnittstellen: Drag-and-Drop-Funktionalität kann visuellen Reiz an die Benutzeroberfläche Ihrer App hinzufügen. Sie können Animationen hinzufügen, die Feedback liefern oder Aktionen beschreiben, wie Benutzer ziehen und Drop-Elemente auf der App. Dies sind die besten Drag und Drop React Bibliotheken:

React DnD

React DnD ist eine Reihe von React-Diensten für den Aufbau komplexer Drag-and-Drop-Schnittstellen. Diese Bibliothek ist perfekt für die Erstellung von Apps ähnlich Trello und Storify, wo Drag-and-Drop-Funktionalität auch Datenübertragung beinhaltet.

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

Installation

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

Sie können React DnD zu Ihrer React-Komponente als importieren;

1

import { useDrag } from 'react-dnd'

Hauptmerkmale

  • Funktioniert mit Ihren Komponenten: Diese Bibliothek bietet keine fertigen Widgets. Es wickelt jedoch Ihre Komponenten und spritzt Props in sie ein.
  • Erweiterbar: Sie können ein benutzerdefiniertes Backend basierend auf Maus-Events oder Touch-Events hinzufügen, wenn Sie React DnD-Bibliothek verwenden.
  • Prüfbar: Sie können Jest oder Enzyme verwenden, um React DnD-Code zu testen.
  • Touch-Unterstützung: React DnD Touch Backend fügt dieser Bibliothek Touch-Funktionalität hinzu. React DnD ist eine kostenlose Open-Source-Bibliothek.

React Dragg

React Dragg ist eine einfache, aber mächtige Reagieren Sie Bibliothek, die es einfach macht, Draggable Elemente zu erstellen.

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

Installation

npm install react-draggable

Um React Draggable zu verwenden, importieren Sie wie folgt auf Ihre React-Komponente.

1

import Draggable from 'react-draggable';

Eigenschaften

  • Einfach zu installieren und zu konfigurieren: Sie müssen nur die Bibliothek installieren und importieren, um zu starten. Sie können auch einzelne Komponenten aus der Bibliothek importieren.
  • Kompatibel mit Vanille JavaScript und React: Sie können React Draggable mit einfachem JavaScript wie folgt verwenden;
1

let Draggable = require('react-draggable');let DraggableCore = Draggable.DraggableCore;
  • Kompatibel mit anderen React-Bibliotheken: Sie können React Draggable mit anderen Bibliotheken wie React Grid Layout verwenden. React Draggable ist eine kostenlose, Open Source Drap und Drop React Bibliothek.

React Dropzone

React Dropzone ist ein einfacher React Hook zum Erstellen einer HTML-5-konformen Drag-and-Drop-Zone für Dateien.

React-Dropzone

Installation

npm install --save react-dropzone

oder

yarn add react-dropzone

Sie können diese Bibliothek dann wie folgt importieren:

1

import {useDropzone} from 'react-dropzone';

Eigenschaften

  • Styling Dropzone: Diese Bibliothek setzt keine Styling-Regeln, und Sie können so Ihre Komponenten, wie Sie sehen fit.
  • Ermöglicht Benutzern, akzeptable Dateitypen zu definieren: Sie können die Dropzone anweisen, bestimmte Dateitypen zu akzeptieren oder abzulehnen, indem Sie akzeptieren prop.
  • Akzeptiert individuelle Validierung: Mit der Validierungsrequisite können Sie benutzerdefinierte Validierungen für verschiedene Dateien angeben. React Dropzone ist eine kostenlose, Open Source Drag und Drop React Bibliothek.

React Grid Layout

React Grid Layout ist ein resizeables und ziehbares Rasterlayout für React.

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

Installation

npm install react-grid-layout

Sie können diese Bibliothek wie folgt importieren:

1

import GridLayout from "react-grid-layout";

Eigenschaften

  • Abhängigkeiten frei : React Grid Layout ist rein auf React gebaut und ist frei von JQuery.
  • Reaktivierbare Widgets : Auf der Drag-and-Drop-Funktion können Sie auch die Komponenten ändern.
  • Responsive Breakpoints: Die Bibliothek bietet für jeden Breakpoint ein separates Layout.
  • Anpassbar: Sie können Widgets hinzufügen oder entfernen, ohne das gesamte Netz wieder aufzubauen. React Grid Layout ist eine kostenlose Open-Source-React-Bibliothek.

React rnd

React rnd ist eine ziehbare und resisierbare Komponente für React.

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

Installation

npm i -S react-rnd

Oder

yarn add react-rnd

Eigenschaften

  • Einfach: React rnd ist einfach, aber sehr leistungsstark.
  • Kompatibel mit TypeScript und JavaScript: Sie können React rnd mit Ihrer App verwenden, unabhängig davon, ob Sie sie mit JavaScript oder TypeScript konfiguriert haben.
  • Unterstützt Resizing : Sie können einfach Komponenten, die mit React rnd erstellt werden, um Ihren Bedürfnissen anzupassen. React rnd ist eine kostenlose, Open-Source-React-Bibliothek.

React Virtualized dnd

React Virtualized dnd ist ein Drag-and-Drop-React-Framework, das eingebaute Virtualisierung Scrollbars bietet.

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

Installation

npm install --save react-virtualized-dnd

Sie können React Virtualized dnd wie importieren;

1

import ExampleBoard from 'react-virtualized-dnd';

Eigenschaften

  • Vielfalt der Komponenten zur Auswahl: Die Komponenten werden in „Fixed Height“, „Variable Height“ und „Groupable Droppables“ zusammengefasst.
  • Anpassbar: Sie können die Komponenten von React Virtualized dnd auf Ihre Bedürfnisse anpassen. Reaktion Virtualized dnd ist ein Open-Source-React-Framework, dessen Quellcode auf GitHub gehostet wird.

React Movable

React Movable ist eine Drag-and-Drop-React-Bibliothek für Listen und Tabellen.

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

Installation

yarn add react-movable

Sie können diese Bibliothek wie importieren;

1

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

Eigenschaften

  • Verschiedene Drag-and-Drop Optionen zur Auswahl: Die Bibliothek verfügt über Kesselplatten-Codes für verschiedene Arten von Drag-and-Drop-Komponenten zur Auswahl.
  • Leichte Bibliothek: React Movable hat keine Abhängigkeiten wie JQuery. Es ist weniger als 4kB (gzipped).
  • Unopiniiertes Styling: React Movable kontrolliert nicht, wie Sie Ihre App gestalten möchten.
  • Touch-Unterstützung: Diese Bibliothek hilft, Apps zu erstellen, die auf Smartphones, Tablets und jedem Gerät mit Touch-Funktionalität verwendet werden können.
  • Geschrieben in TypeScript: Sie können Types zu Ihrem Code einführen, eine Funktionalität, die in JavaScript nicht verfügbar ist. React Movable ist eine kostenlose, Open-Source-React-Bibliothek.

Ziehbar

Ziehbar ist ein Drag-and-Drop Reagieren Sie Bibliothek, die Entwicklern erlaubt, Drag-and-Drop-Ereignisse zu erstellen, indem Sie native Browser-Ereignisse in eine umfassende API abstrahieren.

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

Installation

npm install @shopify/draggable --save

oder über Garne:

yarn add @shopify/draggable

Sie können Draggable zu Ihrer React App importieren, wie;

1

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

Eigenschaften

  • Kategorisierte Komponenten: Das Finden der genauen Komponente ist einfach, da die Komponenten kategorisiert sind. Diese Komponenten sind anpassbar.
  • Kompatibel mit großen Browsern: Sie können Draggable mit Browsern wie Google Chrome, Mozilla Firefox und Apple Safari verwenden.
  • Unterstützt TypeScript: Wenn Sie mit dieser Bibliothek arbeiten, können Sie TypeScript-Definitionen zu Ihrem Code hinzufügen.
  • Unterstützt Plugins: Sie können Draggables Funktionalität mit Plugins wie Kollision und SwapAnimation . Draggable ist eine kostenlose, Open-Source-React-Bibliothek, die von Mitwirkenden gepflegt wird.

React Drag auswählen

React Drag-to-select ist eine React-Bibliothek, die Sie verwenden können, um Drag-to-select-Funktionalität zu Ihrer Anwendung hinzuzufügen.

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

Installation

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

Oder

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

Sie können diese Bibliothek wie folgt in Ihre App importieren;

1

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

Eigenschaften

  • Einfach: Diese Bibliothek wählt keine Artikel aus. Allerdings zieht die Bibliothek das Auswahlfeld und gibt Ihnen Koordinaten.
  • Unterstützt TypeScript: React Drag-to-select-Bibliothek wird in TypeScript geschrieben, was bedeutet, dass Sie es mit React-Apps verwenden können, die in TypeScript und JavaScript geschrieben sind.
  • Unterstützt die Prüfung: Sie können diese Bibliothek mit den meisten React Test Frameworks verwenden. React Drag-to-select ist eine kostenlose Open-Source-Bibliothek.

React Dragula

React Dragula ist eine einfache Drag-and-Drop React-Bibliothek.

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

Installation

npm install react-dragula --save

Oder,

bower install react-dragula --save

Eigenschaften

  • Anpassbar: Sie können die Komponenten von React Dragula an Ihre Bedürfnisse anpassen.
  • Unterstützt Touch: Mit dieser Bibliothek können Sie Apps erstellen, die auf Smartphones, Tablets und anderen Touch-Geräten verwendet werden können.
  • Leicht: React Dragula hat eine kleine Bündelgröße, so dass es perfekt ist, wenn Sie Ihre React-App klein sein möchten. React Dragula ist eine kostenlose Open-Source-Bibliothek.

Schlussfolgerung

Sie haben jetzt eine Vielzahl von Drag-and-Drop-Bibliotheken, die Sie auf Ihrer nächsten React-Anwendung verwenden können. Die Auswahl der Bibliothek hängt von den Funktionen ab, die Sie auf Ihre nächste App, Geschmack und Präferenzen haben möchten.

Wenn Ihre App groß ist, können Sie mehrere Drag-and-Drop-Bibliotheken verwenden, um verschiedene Bedürfnisse zu erfüllen. Die meisten dieser Bibliotheken sind mit verschiedenen kompatibel React Testbibliotheken , so dass es einfach, fehlerfreie Anwendungen zu versenden.

title: “10 Best Drag & Drop React Libraries für Effortless UI Interactions” date: “2023-10-28T04:03:01” draft: false description: “Wussten Sie, dass Sie die Benutzerinteraktivität Ihrer React-App durch Drag-and-Drop-Bibliotheken verbessern können? Die folgenden sind einige der besten Drag-and-Drop-Bibliotheken, um heute zu versuchen. " 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

React ist eine berühmte Benutzeroberfläche (UI) JavaScript-Bibliothek. Sie können React-Bibliothek verwenden, um verschiedene Arten von Web-Apps zu erstellen, von Social Media-Apps, E-Commerce-Plattformen, Blogs, Einseitige Anwendungen , Content Management Systeme (CMS), Dashboards und Datenvisualisierungen, um einige zu erwähnen.

Entwickler können die Funktionalität von React Apps mit verschiedenen Bibliotheken und Frameworks erweitern. Solche Bibliotheken können in verschiedene Klassen gruppiert werden; Drag-and-Drop ist eine Bibliothekskategorie, die sehr beliebt ist.

Drag & Drop-Funktionalität ist eine UI-Interaktion, die es einem Benutzer ermöglicht, ein Element auf dem Bildschirm anzuklicken/ auszuwählen, zu ziehen und auf eine andere Komponente zu fallen. Ein perfektes Beispiel für diese Funktionalität ist das Umrüsten von Gegenständen in einer Liste durch Ziehen und Ablegen von Gegenständen an Ihren gewünschten Ort.

Sie können auch Drag-and-Drop-Funktionalität in den folgenden Fällen verwenden;

  • Datei hochladen: Benutzer können Drag & Drop Dateien statt Scrolling durch ihre Maschinen, um Dateien auszuwählen und hochladen.
  • Kanban Boards: Sie können ein Dashboard erstellen, in dem die Benutzer Elemente je nach Aktivitätsstufen oder -stufen ziehen und fallen können.
  • Bildergalerien: Sie können eine Bildergalerie haben, in der Benutzer Bilder hochladen und umordnen können.
  • Widgets: Benutzer können das Aussehen der App durch Ziehen und Ablegen von Widgets anpassen.
  • Warenkorb: Benutzer können auf einen Artikel klicken, ziehen Sie ihn und fallen Sie ihn in den Warenkorb. Eine React Drag and Drop-Bibliothek ist eine Reihe von vorgefertigten Komponenten, die es Entwicklern ermöglichen, Drag- und Drop-Funktionalität in React-Anwendungen zu implementieren.

Diese Bibliotheken kommen mit wiederverwendbaren Komponenten, so dass Entwickler Elemente erstellen, die gezogen und fallen gelassen werden können. Die Bibliotheken behandeln verschiedene Ereignisse wie Drag Start, Drag Enter, Drag Leave und Drop.

Wie Drag- und Drop-Bibliotheken in besseren UI-Interaktionen helfen

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

  • Verbesserte Benutzererfahrung: Die Drag-and-Drop-Funktionalität ist ein intuitiver Ansatz für Anwender, die mit einer Anwendung interagieren. Die Möglichkeit, Gegenstände zu ziehen und zu fallen, anstatt sie manuell einzugeben, bietet eine interaktive und nahtlose Interaktion.
  • Vereinfachte Workflows: Anstatt Dateien von verschiedenen Standorten Ihres Computers auf eine Anwendung hochzuladen, können Sie einfach ziehen und fallen.
  • Erhöhte Produktivität: Drag-and-Drop-Funktionalität spart Zeit und macht Anwender produktiver.
  • Geeignet für mobile Geräte: Mobile Geräte wie Smartphones und Tablets haben einen begrenzten Bildschirmraum. Nutzer verlassen sich meistens auf Gesten für die Navigation, was Drag-and-Drop eine tolle Ergänzung macht.
  • Bietet angreifende Schnittstellen: Drag-and-Drop-Funktionalität kann visuellen Reiz an die Benutzeroberfläche Ihrer App hinzufügen. Sie können Animationen hinzufügen, die Feedback liefern oder Aktionen beschreiben, wie Benutzer ziehen und Drop-Elemente auf der App. Dies sind die besten Drag und Drop React Bibliotheken:

React DnD

React DnD ist eine Reihe von React-Diensten für den Aufbau komplexer Drag-and-Drop-Schnittstellen. Diese Bibliothek ist perfekt für die Erstellung von Apps ähnlich Trello und Storify, wo Drag-and-Drop-Funktionalität auch Datenübertragung beinhaltet.

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

Installation

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

Sie können React DnD zu Ihrer React-Komponente als importieren;

1

import { useDrag } from 'react-dnd'

Hauptmerkmale

  • Funktioniert mit Ihren Komponenten: Diese Bibliothek bietet keine fertigen Widgets. Es wickelt jedoch Ihre Komponenten und spritzt Props in sie ein.
  • Erweiterbar: Sie können ein benutzerdefiniertes Backend basierend auf Maus-Events oder Touch-Events hinzufügen, wenn Sie React DnD-Bibliothek verwenden.
  • Prüfbar: Sie können Jest oder Enzyme verwenden, um React DnD-Code zu testen.
  • Touch-Unterstützung: React DnD Touch Backend fügt dieser Bibliothek Touch-Funktionalität hinzu. React DnD ist eine kostenlose Open-Source-Bibliothek.

React Dragg

React Dragg ist eine einfache, aber mächtige Reagieren Sie Bibliothek, die es einfach macht, Draggable Elemente zu erstellen.

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

Installation

npm install react-draggable

Um React Draggable zu verwenden, importieren Sie wie folgt auf Ihre React-Komponente.

1

import Draggable from 'react-draggable';

Eigenschaften

  • Einfach zu installieren und zu konfigurieren: Sie müssen nur die Bibliothek installieren und importieren, um zu starten. Sie können auch einzelne Komponenten aus der Bibliothek importieren.
  • Kompatibel mit Vanille JavaScript und React: Sie können React Draggable mit einfachem JavaScript wie folgt verwenden;
1

let Draggable = require('react-draggable');let DraggableCore = Draggable.DraggableCore;
  • Kompatibel mit anderen React-Bibliotheken: Sie können React Draggable mit anderen Bibliotheken wie React Grid Layout verwenden. React Draggable ist eine kostenlose, Open Source Drap und Drop React Bibliothek.

React Dropzone

React Dropzone ist ein einfacher React Hook zum Erstellen einer HTML-5-konformen Drag-and-Drop-Zone für Dateien.

React-Dropzone

Installation

npm install --save react-dropzone

oder

yarn add react-dropzone

Sie können diese Bibliothek dann wie folgt importieren:

1

import {useDropzone} from 'react-dropzone';

Eigenschaften

  • Styling Dropzone: Diese Bibliothek setzt keine Styling-Regeln, und Sie können so Ihre Komponenten, wie Sie sehen fit.
  • Ermöglicht Benutzern, akzeptable Dateitypen zu definieren: Sie können die Dropzone anweisen, bestimmte Dateitypen zu akzeptieren oder abzulehnen, indem Sie akzeptieren prop.
  • Akzeptiert individuelle Validierung: Mit der Validierungsrequisite können Sie benutzerdefinierte Validierungen für verschiedene Dateien angeben. React Dropzone ist eine kostenlose, Open Source Drag und Drop React Bibliothek.

React Grid Layout

React Grid Layout ist ein resizeables und ziehbares Rasterlayout für React.

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

Installation

npm install react-grid-layout

Sie können diese Bibliothek wie folgt importieren:

1

import GridLayout from "react-grid-layout";

Eigenschaften

  • Abhängigkeiten frei : React Grid Layout ist rein auf React gebaut und ist frei von JQuery.
  • Reaktivierbare Widgets : Auf der Drag-and-Drop-Funktion können Sie auch die Komponenten ändern.
  • Responsive Breakpoints: Die Bibliothek bietet für jeden Breakpoint ein separates Layout.
  • Anpassbar: Sie können Widgets hinzufügen oder entfernen, ohne das gesamte Netz wieder aufzubauen. React Grid Layout ist eine kostenlose Open-Source-React-Bibliothek.

React rnd

React rnd ist eine ziehbare und resisierbare Komponente für React.

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

Installation

npm i -S react-rnd

Oder

yarn add react-rnd

Eigenschaften

  • Einfach: React rnd ist einfach, aber sehr leistungsstark.
  • Kompatibel mit TypeScript und JavaScript: Sie können React rnd mit Ihrer App verwenden, unabhängig davon, ob Sie sie mit JavaScript oder TypeScript konfiguriert haben.
  • Unterstützt Resizing : Sie können einfach Komponenten, die mit React rnd erstellt werden, um Ihren Bedürfnissen anzupassen. React rnd ist eine kostenlose, Open-Source-React-Bibliothek.

React Virtualized dnd

React Virtualized dnd ist ein Drag-and-Drop-React-Framework, das eingebaute Virtualisierung Scrollbars bietet.

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

Installation

npm install --save react-virtualized-dnd

Sie können React Virtualized dnd wie importieren;

1

import ExampleBoard from 'react-virtualized-dnd';

Eigenschaften

  • Vielfalt der Komponenten zur Auswahl: Die Komponenten werden in „Fixed Height“, „Variable Height“ und „Groupable Droppables“ zusammengefasst.
  • Anpassbar: Sie können die Komponenten von React Virtualized dnd auf Ihre Bedürfnisse anpassen. Reaktion Virtualized dnd ist ein Open-Source-React-Framework, dessen Quellcode auf GitHub gehostet wird.

React Movable

React Movable ist eine Drag-and-Drop-React-Bibliothek für Listen und Tabellen.

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

Installation

yarn add react-movable

Sie können diese Bibliothek wie importieren;

1

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

Eigenschaften

  • Verschiedene Drag-and-Drop Optionen zur Auswahl: Die Bibliothek verfügt über Kesselplatten-Codes für verschiedene Arten von Drag-and-Drop-Komponenten zur Auswahl.
  • Leichte Bibliothek: React Movable hat keine Abhängigkeiten wie JQuery. Es ist weniger als 4kB (gzipped).
  • Unopiniiertes Styling: React Movable kontrolliert nicht, wie Sie Ihre App gestalten möchten.
  • Touch-Unterstützung: Diese Bibliothek hilft, Apps zu erstellen, die auf Smartphones, Tablets und jedem Gerät mit Touch-Funktionalität verwendet werden können.
  • Geschrieben in TypeScript: Sie können Types zu Ihrem Code einführen, eine Funktionalität, die in JavaScript nicht verfügbar ist. React Movable ist eine kostenlose, Open-Source-React-Bibliothek.

Ziehbar

Ziehbar ist ein Drag-and-Drop Reagieren Sie Bibliothek, die Entwicklern erlaubt, Drag-and-Drop-Ereignisse zu erstellen, indem Sie native Browser-Ereignisse in eine umfassende API abstrahieren.

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

Installation

npm install @shopify/draggable --save

oder über Garne:

yarn add @shopify/draggable

Sie können Draggable zu Ihrer React App importieren, wie;

1

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

Eigenschaften

  • Kategorisierte Komponenten: Das Finden der genauen Komponente ist einfach, da die Komponenten kategorisiert sind. Diese Komponenten sind anpassbar.
  • Kompatibel mit großen Browsern: Sie können Draggable mit Browsern wie Google Chrome, Mozilla Firefox und Apple Safari verwenden.
  • Unterstützt TypeScript: Wenn Sie mit dieser Bibliothek arbeiten, können Sie TypeScript-Definitionen zu Ihrem Code hinzufügen.
  • Unterstützt Plugins: Sie können Draggables Funktionalität mit Plugins wie Kollision und SwapAnimation . Draggable ist eine kostenlose, Open-Source-React-Bibliothek, die von Mitwirkenden gepflegt wird.

React Drag auswählen

React Drag-to-select ist eine React-Bibliothek, die Sie verwenden können, um Drag-to-select-Funktionalität zu Ihrer Anwendung hinzuzufügen.

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

Installation

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

Oder

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

Sie können diese Bibliothek wie folgt in Ihre App importieren;

1

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

Eigenschaften

  • Einfach: Diese Bibliothek wählt keine Artikel aus. Allerdings zieht die Bibliothek das Auswahlfeld und gibt Ihnen Koordinaten.
  • Unterstützt TypeScript: React Drag-to-select-Bibliothek wird in TypeScript geschrieben, was bedeutet, dass Sie es mit React-Apps verwenden können, die in TypeScript und JavaScript geschrieben sind.
  • Unterstützt die Prüfung: Sie können diese Bibliothek mit den meisten React Test Frameworks verwenden. React Drag-to-select ist eine kostenlose Open-Source-Bibliothek.

React Dragula

React Dragula ist eine einfache Drag-and-Drop React-Bibliothek.

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

Installation

npm install react-dragula --save

Oder,

bower install react-dragula --save

Eigenschaften

  • Anpassbar: Sie können die Komponenten von React Dragula an Ihre Bedürfnisse anpassen.
  • Unterstützt Touch: Mit dieser Bibliothek können Sie Apps erstellen, die auf Smartphones, Tablets und anderen Touch-Geräten verwendet werden können.
  • Leicht: React Dragula hat eine kleine Bündelgröße, so dass es perfekt ist, wenn Sie Ihre React-App klein sein möchten. React Dragula ist eine kostenlose Open-Source-Bibliothek.

Schlussfolgerung

Sie haben jetzt eine Vielzahl von Drag-and-Drop-Bibliotheken, die Sie auf Ihrer nächsten React-Anwendung verwenden können. Die Auswahl der Bibliothek hängt von den Funktionen ab, die Sie auf Ihre nächste App, Geschmack und Präferenzen haben möchten.

Wenn Ihre App groß ist, können Sie mehrere Drag-and-Drop-Bibliotheken verwenden, um verschiedene Bedürfnisse zu erfüllen. Die meisten dieser Bibliotheken sind mit verschiedenen kompatibel React Testbibliotheken , so dass es einfach, fehlerfreie Anwendungen zu versenden.

title: “10 Best Drag & Drop React Libraries für Effortless UI Interactions” date: “2023-10-30T05:03:01” draft: false description: “Wussten Sie, dass Sie die Benutzerinteraktivität Ihrer React-App durch Drag-and-Drop-Bibliotheken verbessern können? Die folgenden sind einige der besten Drag-and-Drop-Bibliotheken, um heute zu versuchen. " autor: “toto” image: “https://cdn.99tz.top/be55757c94/2023/04/fe5d5c4d71a242e0a9df2d461cfe0ba8.webp" cover: “https://cdn.99tz.top/be55757c94/2023/04/fe5d5c4d71a242e0a9df2d461cfe0ba8.webp" tags: [] categories: [‘Development’] theme: light

React ist eine berühmte Benutzeroberfläche (UI) JavaScript-Bibliothek. Sie können React-Bibliothek verwenden, um verschiedene Arten von Web-Apps zu erstellen, von Social Media-Apps, E-Commerce-Plattformen, Blogs, Einseitige Anwendungen , Content Management Systeme (CMS), Dashboards und Datenvisualisierungen, um einige zu erwähnen.

Entwickler können die Funktionalität von React Apps mit verschiedenen Bibliotheken und Frameworks erweitern. Solche Bibliotheken können in verschiedene Klassen gruppiert werden; Drag-and-Drop ist eine Bibliothekskategorie, die sehr beliebt ist.

Drag & Drop-Funktionalität ist eine UI-Interaktion, die es einem Benutzer ermöglicht, ein Element auf dem Bildschirm anzuklicken/ auszuwählen, zu ziehen und auf eine andere Komponente zu fallen. Ein perfektes Beispiel für diese Funktionalität ist das Umrüsten von Gegenständen in einer Liste durch Ziehen und Ablegen von Gegenständen an Ihren gewünschten Ort.

Sie können auch Drag-and-Drop-Funktionalität in den folgenden Fällen verwenden;

  • Datei hochladen: Benutzer können Drag & Drop Dateien statt Scrolling durch ihre Maschinen, um Dateien auszuwählen und hochladen.
  • Kanban Boards: Sie können ein Dashboard erstellen, in dem die Benutzer Elemente je nach Aktivitätsstufen oder -stufen ziehen und fallen können.
  • Bildergalerien: Sie können eine Bildergalerie haben, in der Benutzer Bilder hochladen und umordnen können.
  • Widgets: Benutzer können das Aussehen der App durch Ziehen und Ablegen von Widgets anpassen.
  • Warenkorb: Benutzer können auf einen Artikel klicken, ziehen Sie ihn und fallen Sie ihn in den Warenkorb. Eine React Drag and Drop-Bibliothek ist eine Reihe von vorgefertigten Komponenten, die es Entwicklern ermöglichen, Drag- und Drop-Funktionalität in React-Anwendungen zu implementieren.

Diese Bibliotheken kommen mit wiederverwendbaren Komponenten, so dass Entwickler Elemente erstellen, die gezogen und fallen gelassen werden können. Die Bibliotheken behandeln verschiedene Ereignisse wie Drag Start, Drag Enter, Drag Leave und Drop.

Wie Drag- und Drop-Bibliotheken in besseren UI-Interaktionen helfen

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

  • Verbesserte Benutzererfahrung: Die Drag-and-Drop-Funktionalität ist ein intuitiver Ansatz für Anwender, die mit einer Anwendung interagieren. Die Möglichkeit, Gegenstände zu ziehen und zu fallen, anstatt sie manuell einzugeben, bietet eine interaktive und nahtlose Interaktion.
  • Vereinfachte Workflows: Anstatt Dateien von verschiedenen Standorten Ihres Computers auf eine Anwendung hochzuladen, können Sie einfach ziehen und fallen.
  • Erhöhte Produktivität: Drag-and-Drop-Funktionalität spart Zeit und macht Anwender produktiver.
  • Geeignet für mobile Geräte: Mobile Geräte wie Smartphones und Tablets haben einen begrenzten Bildschirmraum. Nutzer verlassen sich meistens auf Gesten für die Navigation, was Drag-and-Drop eine tolle Ergänzung macht.
  • Bietet angreifende Schnittstellen: Drag-and-Drop-Funktionalität kann visuellen Reiz an die Benutzeroberfläche Ihrer App hinzufügen. Sie können Animationen hinzufügen, die Feedback liefern oder Aktionen beschreiben, wie Benutzer ziehen und Drop-Elemente auf der App. Dies sind die besten Drag und Drop React Bibliotheken:

React DnD

React DnD ist eine Reihe von React-Diensten für den Aufbau komplexer Drag-and-Drop-Schnittstellen. Diese Bibliothek ist perfekt für die Erstellung von Apps ähnlich Trello und Storify, wo Drag-and-Drop-Funktionalität auch Datenübertragung beinhaltet.

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

Installation

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

Sie können React DnD zu Ihrer React-Komponente als importieren;

1

import { useDrag } from 'react-dnd'

Hauptmerkmale

  • Funktioniert mit Ihren Komponenten: Diese Bibliothek bietet keine fertigen Widgets. Es wickelt jedoch Ihre Komponenten und spritzt Props in sie ein.
  • Erweiterbar: Sie können ein benutzerdefiniertes Backend basierend auf Maus-Events oder Touch-Events hinzufügen, wenn Sie React DnD-Bibliothek verwenden.
  • Prüfbar: Sie können Jest oder Enzyme verwenden, um React DnD-Code zu testen.
  • Touch-Unterstützung: React DnD Touch Backend fügt dieser Bibliothek Touch-Funktionalität hinzu. React DnD ist eine kostenlose Open-Source-Bibliothek.

React Dragg

React Dragg ist eine einfache, aber mächtige Reagieren Sie Bibliothek, die es einfach macht, Draggable Elemente zu erstellen.

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

Installation

npm install react-draggable

Um React Draggable zu verwenden, importieren Sie wie folgt auf Ihre React-Komponente.

1

import Draggable from 'react-draggable';

Eigenschaften

  • Einfach zu installieren und zu konfigurieren: Sie müssen nur die Bibliothek installieren und importieren, um zu starten. Sie können auch einzelne Komponenten aus der Bibliothek importieren.
  • Kompatibel mit Vanille JavaScript und React: Sie können React Draggable mit einfachem JavaScript wie folgt verwenden;
1

let Draggable = require('react-draggable');let DraggableCore = Draggable.DraggableCore;
  • Kompatibel mit anderen React-Bibliotheken: Sie können React Draggable mit anderen Bibliotheken wie React Grid Layout verwenden. React Draggable ist eine kostenlose, Open Source Drap und Drop React Bibliothek.

React Dropzone

React Dropzone ist ein einfacher React Hook zum Erstellen einer HTML-5-konformen Drag-and-Drop-Zone für Dateien.

React-Dropzone

Installation

npm install --save react-dropzone

oder

yarn add react-dropzone

Sie können diese Bibliothek dann wie folgt importieren:

1

import {useDropzone} from 'react-dropzone';

Eigenschaften

  • Styling Dropzone: Diese Bibliothek setzt keine Styling-Regeln, und Sie können so Ihre Komponenten, wie Sie sehen fit.
  • Ermöglicht Benutzern, akzeptable Dateitypen zu definieren: Sie können die Dropzone anweisen, bestimmte Dateitypen zu akzeptieren oder abzulehnen, indem Sie akzeptieren prop.
  • Akzeptiert individuelle Validierung: Mit der Validierungsrequisite können Sie benutzerdefinierte Validierungen für verschiedene Dateien angeben. React Dropzone ist eine kostenlose, Open Source Drag und Drop React Bibliothek.

React Grid Layout

React Grid Layout ist ein resizeables und ziehbares Rasterlayout für React.

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

Installation

npm install react-grid-layout

Sie können diese Bibliothek wie folgt importieren:

1

import GridLayout from "react-grid-layout";

Eigenschaften

  • Abhängigkeiten frei : React Grid Layout ist rein auf React gebaut und ist frei von JQuery.
  • Reaktivierbare Widgets : Auf der Drag-and-Drop-Funktion können Sie auch die Komponenten ändern.
  • Responsive Breakpoints: Die Bibliothek bietet für jeden Breakpoint ein separates Layout.
  • Anpassbar: Sie können Widgets hinzufügen oder entfernen, ohne das gesamte Netz wieder aufzubauen. React Grid Layout ist eine kostenlose Open-Source-React-Bibliothek.

React rnd

React rnd ist eine ziehbare und resisierbare Komponente für React.

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

Installation

npm i -S react-rnd

Oder

yarn add react-rnd

Eigenschaften

  • Einfach: React rnd ist einfach, aber sehr leistungsstark.
  • Kompatibel mit TypeScript und JavaScript: Sie können React rnd mit Ihrer App verwenden, unabhängig davon, ob Sie sie mit JavaScript oder TypeScript konfiguriert haben.
  • Unterstützt Resizing : Sie können einfach Komponenten, die mit React rnd erstellt werden, um Ihren Bedürfnissen anzupassen. React rnd ist eine kostenlose, Open-Source-React-Bibliothek.

React Virtualized dnd

React Virtualized dnd ist ein Drag-and-Drop-React-Framework, das eingebaute Virtualisierung Scrollbars bietet.

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

Installation

npm install --save react-virtualized-dnd

Sie können React Virtualized dnd wie importieren;

1

import ExampleBoard from 'react-virtualized-dnd';

Eigenschaften

  • Vielfalt der Komponenten zur Auswahl: Die Komponenten werden in „Fixed Height“, „Variable Height“ und „Groupable Droppables“ zusammengefasst.
  • Anpassbar: Sie können die Komponenten von React Virtualized dnd auf Ihre Bedürfnisse anpassen. Reaktion Virtualized dnd ist ein Open-Source-React-Framework, dessen Quellcode auf GitHub gehostet wird.

React Movable

React Movable ist eine Drag-and-Drop-React-Bibliothek für Listen und Tabellen.

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

Installation

yarn add react-movable

Sie können diese Bibliothek wie importieren;

1

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

Eigenschaften

  • Verschiedene Drag-and-Drop Optionen zur Auswahl: Die Bibliothek verfügt über Kesselplatten-Codes für verschiedene Arten von Drag-and-Drop-Komponenten zur Auswahl.
  • Leichte Bibliothek: React Movable hat keine Abhängigkeiten wie JQuery. Es ist weniger als 4kB (gzipped).
  • Unopiniiertes Styling: React Movable kontrolliert nicht, wie Sie Ihre App gestalten möchten.
  • Touch-Unterstützung: Diese Bibliothek hilft, Apps zu erstellen, die auf Smartphones, Tablets und jedem Gerät mit Touch-Funktionalität verwendet werden können.
  • Geschrieben in TypeScript: Sie können Types zu Ihrem Code einführen, eine Funktionalität, die in JavaScript nicht verfügbar ist. React Movable ist eine kostenlose, Open-Source-React-Bibliothek.

Ziehbar

Ziehbar ist ein Drag-and-Drop Reagieren Sie Bibliothek, die Entwicklern erlaubt, Drag-and-Drop-Ereignisse zu erstellen, indem Sie native Browser-Ereignisse in eine umfassende API abstrahieren.

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

Installation

npm install @shopify/draggable --save

oder über Garne:

yarn add @shopify/draggable

Sie können Draggable zu Ihrer React App importieren, wie;

1

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

Eigenschaften

  • Kategorisierte Komponenten: Das Finden der genauen Komponente ist einfach, da die Komponenten kategorisiert sind. Diese Komponenten sind anpassbar.
  • Kompatibel mit großen Browsern: Sie können Draggable mit Browsern wie Google Chrome, Mozilla Firefox und Apple Safari verwenden.
  • Unterstützt TypeScript: Wenn Sie mit dieser Bibliothek arbeiten, können Sie TypeScript-Definitionen zu Ihrem Code hinzufügen.
  • Unterstützt Plugins: Sie können Draggables Funktionalität mit Plugins wie Kollision und SwapAnimation . Draggable ist eine kostenlose, Open-Source-React-Bibliothek, die von Mitwirkenden gepflegt wird.

React Drag auswählen

React Drag-to-select ist eine React-Bibliothek, die Sie verwenden können, um Drag-to-select-Funktionalität zu Ihrer Anwendung hinzuzufügen.

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

Installation

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

Oder

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

Sie können diese Bibliothek wie folgt in Ihre App importieren;

1

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

Eigenschaften

  • Einfach: Diese Bibliothek wählt keine Artikel aus. Allerdings zieht die Bibliothek das Auswahlfeld und gibt Ihnen Koordinaten.
  • Unterstützt TypeScript: React Drag-to-select-Bibliothek wird in TypeScript geschrieben, was bedeutet, dass Sie es mit React-Apps verwenden können, die in TypeScript und JavaScript geschrieben sind.
  • Unterstützt die Prüfung: Sie können diese Bibliothek mit den meisten React Test Frameworks verwenden. React Drag-to-select ist eine kostenlose Open-Source-Bibliothek.

React Dragula

React Dragula ist eine einfache Drag-and-Drop React-Bibliothek.

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

Installation

npm install react-dragula --save

Oder,

bower install react-dragula --save

Eigenschaften

  • Anpassbar: Sie können die Komponenten von React Dragula an Ihre Bedürfnisse anpassen.
  • Unterstützt Touch: Mit dieser Bibliothek können Sie Apps erstellen, die auf Smartphones, Tablets und anderen Touch-Geräten verwendet werden können.
  • Leicht: React Dragula hat eine kleine Bündelgröße, so dass es perfekt ist, wenn Sie Ihre React-App klein sein möchten. React Dragula ist eine kostenlose Open-Source-Bibliothek.

Schlussfolgerung

Sie haben jetzt eine Vielzahl von Drag-and-Drop-Bibliotheken, die Sie auf Ihrer nächsten React-Anwendung verwenden können. Die Auswahl der Bibliothek hängt von den Funktionen ab, die Sie auf Ihre nächste App, Geschmack und Präferenzen haben möchten.

Wenn Ihre App groß ist, können Sie mehrere Drag-and-Drop-Bibliotheken verwenden, um verschiedene Bedürfnisse zu erfüllen. Die meisten dieser Bibliotheken sind mit verschiedenen kompatibel React Testbibliotheken , so dass es einfach, fehlerfreie Anwendungen zu versenden.

© 2024 BilbyTech