10 Meilleurs bibliothèques de drag and Drop React pour les interactions utilisateur sans faille

React est une célèbre bibliothèque JavaScript interface utilisateur (UI). Vous pouvez utiliser la bibliothèque React pour créer différents types d’applications Web allant des applications de médias sociaux, plateformes eCommerce, blogs, applications à une seule page , systèmes de gestion de contenu (CMS), tableaux de bord et visualisation de données, pour en citer quelques-uns.

Les développeurs peuvent étendre la fonctionnalité des applications React en utilisant diverses bibliothèques et cadres. Ces bibliothèques peuvent être regroupées en différentes classes; Drag-and-Drop est une catégorie de bibliothèque très populaire.

La fonctionnalité glisser-déposer est une interaction utilisateur qui permet à un utilisateur de cliquer / choisir un élément sur l’écran, de le glisser et de le déposer sur un autre composant. Un exemple parfait de cette fonctionnalité est de réorganiser les éléments dans une liste en faisant glisser et déposer des éléments à votre emplacement souhaité.

Vous pouvez également utiliser la fonctionnalité Drag-and-Drop dans les cas suivants;

Téléchargement de fichiers : Les utilisateurs peuvent glisser et déposer des fichiers au lieu de défiler à travers leurs machines pour sélectionner et télécharger des fichiers.
Panneaux Kanban: Vous pouvez créer un tableau de bord où les utilisateurs peuvent glisser et déposer des éléments en fonction des niveaux d’activité ou des étapes.
Galeries d’images: Vous pouvez avoir une galerie d’images où les utilisateurs peuvent télécharger et réorganiser des images.
Widgets: Les utilisateurs peuvent personnaliser l’apparence de l’application en traînant et en déplaçant des widgets.
Panier : Les utilisateurs peuvent cliquer sur un article, le glisser et le déposer dans le panier. Une bibliothèque React Drag et Drop est un ensemble de composants pré-construits qui permettent aux développeurs de mettre en œuvre la fonctionnalité Drag et Drop dans les applications React.

Ces bibliothèques viennent avec des composants réutilisables, permettant aux développeurs de créer des éléments qui peuvent être traînés et abandonnés. Les bibliothèques s’occupent de différents événements tels que le glisser-démarrer, glisser-déposer et déposer.

Comment les bibliothèques Drag et Drop aideront à améliorer les interactions utilisateur

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

Expérience utilisateur améliorée: La fonctionnalité glisser-déposer est une approche intuitive pour les utilisateurs d’interagir avec une application. L’option de glisser et de déposer des éléments au lieu de les intégrer manuellement fournit une interaction interactive et transparente.
Flux de travail simplifiés: Au lieu de télécharger des fichiers de différents emplacements de votre ordinateur vers une application, vous pouvez simplement les glisser et les déposer.
Augmentation de la productivité : La fonctionnalité Drag-and-drop enregistre le temps, rendant les utilisateurs plus productifs.
Convient pour les appareils mobiles: Les appareils mobiles comme les smartphones et les tablettes ont un espace d’écran limité. Les utilisateurs comptent principalement sur les gestes pour la navigation, ce qui fait glisser-déposer un ajout impressionnant.
Fournit des interfaces attrayantes: La fonctionnalité glisser-déposer peut ajouter un appel visuel à l’interface utilisateur de votre application. Vous pouvez ajouter des animations qui fournissent des commentaires ou décrivent des actions comme les utilisateurs font glisser et déposent des éléments sur l’application. Ce sont les meilleures bibliothèques Drag et Drop React:

React DnD

React DnD est un ensemble d’utilitaires React pour la construction d’interfaces de drag-and-drop complexes. Cette bibliothèque est parfaite pour créer des applications similaires à Trello et Storify, où la fonctionnalité glisser-déposer implique également le transfert de données.

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

Installation;

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

Vous pouvez importer React DnD à votre composant React comme;

1
import { useDrag } from 'react-dnd'

Caractéristiques principales

Fonctionne avec vos composants: Cette bibliothèque ne fournit pas de widgets faits prêts. Cependant, il enveloppe vos composants et injecte des propulseurs dans eux.
Extensible: Vous pouvez ajouter un backend personnalisé basé sur des événements de souris ou des événements tactiles lors de l’utilisation de la bibliothèque React DnD.
Testable: Vous pouvez utiliser Jest ou Enzyme pour tester le code DnD Réact.
Support tactile: React DnD touch backend ajoute des fonctionnalités tactiles à cette bibliothèque. React DnD est une bibliothèque libre et open-source.

React Draggable

React Draggable est simple mais puissant Réagir la bibliothèque qui permet de créer facilement des éléments évolutifs.

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

Installation;

npm install react-draggable

Pour utiliser React Draggable, importer comme suit sur votre composant React.

1
import Draggable from 'react-draggable';

Caractéristiques

Facile à installer et à configurer: Vous devez juste installer et importer la bibliothèque pour commencer. Vous pouvez également importer des composants individuels de la bibliothèque.
Compatible avec vanille JavaScript et React: Vous pouvez utiliser React Draggable with plain JavaScript comme suit;

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

Compatible avec d’autres bibliothèques React: Vous pouvez utiliser React Draggable avec d’autres bibliothèques, telles que React Grid Layout. React Draggable est une bibliothèque libre, open-source Drap et Drop React.

React Dropzone

React Dropzone est un simple Crochet de Réact pour créer une zone de glisser-déposer compatible HTML-5 pour les fichiers.

React-Dropzone

Installation;

npm install --save react-dropzone

ou :

yarn add react-dropzone

Vous pouvez ensuite importer cette bibliothèque comme suit;

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

Caractéristiques

Styling Dropzone: Cette bibliothèque ne définit pas de règles de style, et vous pouvez donc styler vos composants comme vous le voyez.
Permet aux utilisateurs de définir des types de fichiers acceptables : Vous pouvez demander à la Dropzone d’accepter ou de rejeter certains types de fichiers en fournissant l’additif.
Accepte la validation personnalisée: L’attribut validator vous permet de spécifier la validation personnalisée pour différents fichiers. React Dropzone is a free, open-source Drag and Drop React library.

React Grid Layout

React Grid Layout est une mise en page de grille redimensionable et glissergable pour React.

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

Installation;

npm install react-grid-layout

Vous pouvez importer cette bibliothèque comme suit;

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

Caractéristiques

Dépendencies-free : React Grid Layout est construit purement sur React et est libre de JQuery.
widgets Resizable : En plus de la fonction glisser-déposer, vous pouvez également redimensionner les composants.
Points de rupture responsables : La bibliothèque fournit une disposition séparée pour chaque point de rupture.
Personnalisable : Vous pouvez ajouter ou supprimer des widgets sans reconstruire la grille entière. React Grid Layout est une bibliothèque de React gratuite et open-source.

React rnd

React rnd est un élément draggable et resizable pour React.

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

Installation;

npm i -S react-rnd

yarn add react-rnd

Caractéristiques

Simple: React rnd est conçu pour être simple mais très puissant.
Compatible avec TypeScript et JavaScript: Vous pouvez utiliser React rnd avec votre application indépendamment de votre configuration avec JavaScript ou TypeScript.
Supports resizing : Vous pouvez facilement redimensionner les composants créés en utilisant React rnd pour répondre à vos besoins. React rnd est une bibliothèque de React gratuite et open-source.

React Virtualized dnd

React Virtualized dnd est un cadre de React glisser-déposer qui dispose de barres de défilement de virtualisation intégrées.

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

Installation;

npm install --save react-virtualized-dnd

Vous pouvez importer React Virtualized dnd as;

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

Caractéristiques

Variété de composants à choisir: Les composants sont regroupés en “Fixed Height”, “Variable Height” et “Groupable Droppables”.
Personnalisable : Vous pouvez personnaliser les composants de React Virtualized dnd en fonction de vos besoins. React Virtualized dnd is an open-source React framework whose source code is hosted on GitHub.

React Movable

React Movable est une bibliothèque de React glisser-déposer pour les listes et les tableaux.

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

Installation;

yarn add react-movable

Vous pouvez importer cette bibliothèque comme;

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

Caractéristiques

Diverses options de glisser-déposer pour choisir: La bibliothèque dispose de codes à chaud pour différents types de composants glisser-déposer à choisir.
Bibliothèque légère: React Movable n’a pas de dépendances comme JQuery. Il est inférieur à 4kB (gzippé).
Style inopiné : React Movable ne contrôle pas comment vous pouvez vouloir styler votre application.
Support tactile: Cette bibliothèque aide à créer des applications qui peuvent être utilisées sur les smartphones, les tablettes et tout appareil avec fonctionnalité tactile.
Écrit dans TypeScript: Vous pouvez introduire Types à votre code, une fonctionnalité non disponible en JavaScript. React Movable est une bibliothèque de React gratuite et open-source.

Draggable

Draggable c’est un drag-and-drop Réagir la bibliothèque qui permet aux développeurs de créer des événements de drag-and-drop en abstrait les événements de navigateur natif dans une API complète.

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

Installation;

npm install @shopify/draggable --save

ou par fil:

yarn add @shopify/draggable

Vous pouvez importer Draggable à votre application React comme;

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

Caractéristiques

Composants catégorisés: Trouver le composant exact à utiliser est facile car les composants sont classés. Ces composants sont personnalisables.
Compatible avec les principaux navigateurs: Vous pouvez utiliser Draggable avec les navigateurs tels que Google Chrome, Mozilla Firefox et Apple Safari.
Supports TypeScript: Lorsque vous travaillez avec cette bibliothèque, vous pouvez ajouter des définitions TypeScript à votre code.
Supports plugins: Vous pouvez ajouter à la fonctionnalité de Draggable avec des plugins tels que Collidable et SwapAnimation . Draggable est une bibliothèque de React gratuite et open-source gérée par les contributeurs.

React Drag pour sélectionner

React drag-to-select est une bibliothèque React que vous pouvez utiliser pour ajouter la fonctionnalité glisser-désélectionner à votre application.

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

Installation;

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

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

Vous pouvez importer cette bibliothèque à votre application comme suit;

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

Caractéristiques

Simple: Cette bibliothèque ne sélectionne pas d’articles. Cependant, la bibliothèque dessine la boîte de sélection et vous donne des coordonnées.
Supports TypeScript: React La bibliothèque Drag-to-select est écrite dans TypeScript, ce qui signifie que vous pouvez l’utiliser avec les applications React écrites dans TypeScript et JavaScript.
Essais de support: Vous pouvez utiliser cette bibliothèque avec la plupart des cadres de test React. React Drag-to-select est une bibliothèque libre et open-source.

React Dragula

React Dragula est une simple bibliothèque React glisser-déposer.

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

Installation;

npm install react-dragula --save

Ou,

bower install react-dragula --save

Caractéristiques

Personnalisable : Vous pouvez personnaliser les composants de React Dragula en fonction de vos besoins.
Supports touch: Vous pouvez utiliser cette bibliothèque pour créer des applications qui peuvent être utilisées sur les smartphones, tablettes et autres appareils tactiles.
Poids léger: React Dragula a une petite taille de paquet, le rendant parfait si vous voulez que votre application React soit petite. React Dragula est une bibliothèque libre et open-source.

Conclusion

Vous avez maintenant une variété de bibliothèques Drag-and-Drop que vous pouvez utiliser sur votre prochaine application React. Le choix de la bibliothèque dépendra des fonctionnalités que vous comptez avoir sur votre prochaine application, goût et préférences.

Si votre application est grande, vous pouvez utiliser plusieurs bibliothèques glisser-déposer pour répondre à différents besoins. La plupart de ces bibliothèques sont compatibles avec divers Réagir des bibliothèques de test , rendant facile à expédier les applications sans erreur.

title: “10 Meilleurs bibliothèques de drag and Drop React pour les interactions utilisateur sans faille” date: “2023-10-24T04:03:01” draft: false description: “Saviez-vous que vous pouvez améliorer l’interactivité utilisateur sur votre application React à travers des bibliothèques de drag-and-drop? Voici quelques-unes des meilleures bibliothèques de drag-and-drop à essayer aujourd’hui. " 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

Vous pouvez également utiliser la fonctionnalité Drag-and-Drop dans les cas suivants;

Téléchargement de fichiers : Les utilisateurs peuvent glisser et déposer des fichiers au lieu de défiler à travers leurs machines pour sélectionner et télécharger des fichiers.
Panneaux Kanban: Vous pouvez créer un tableau de bord où les utilisateurs peuvent glisser et déposer des éléments en fonction des niveaux d’activité ou des étapes.
Galeries d’images: Vous pouvez avoir une galerie d’images où les utilisateurs peuvent télécharger et réorganiser des images.
Widgets: Les utilisateurs peuvent personnaliser l’apparence de l’application en traînant et en déplaçant des widgets.
Panier : Les utilisateurs peuvent cliquer sur un article, le glisser et le déposer dans le panier. Une bibliothèque React Drag et Drop est un ensemble de composants pré-construits qui permettent aux développeurs de mettre en œuvre la fonctionnalité Drag et Drop dans les applications React.

Comment les bibliothèques Drag et Drop aideront à améliorer les interactions utilisateur

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

Expérience utilisateur améliorée: La fonctionnalité glisser-déposer est une approche intuitive pour les utilisateurs d’interagir avec une application. L’option de glisser et de déposer des éléments au lieu de les intégrer manuellement fournit une interaction interactive et transparente.
Flux de travail simplifiés: Au lieu de télécharger des fichiers de différents emplacements de votre ordinateur vers une application, vous pouvez simplement les glisser et les déposer.
Augmentation de la productivité : La fonctionnalité Drag-and-drop enregistre le temps, rendant les utilisateurs plus productifs.
Convient pour les appareils mobiles: Les appareils mobiles comme les smartphones et les tablettes ont un espace d’écran limité. Les utilisateurs comptent principalement sur les gestes pour la navigation, ce qui fait glisser-déposer un ajout impressionnant.
Fournit des interfaces attrayantes: La fonctionnalité glisser-déposer peut ajouter un appel visuel à l’interface utilisateur de votre application. Vous pouvez ajouter des animations qui fournissent des commentaires ou décrivent des actions comme les utilisateurs font glisser et déposent des éléments sur l’application. Ce sont les meilleures bibliothèques Drag et Drop React:

React DnD

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

Installation;

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

Vous pouvez importer React DnD à votre composant React comme;

1
import { useDrag } from 'react-dnd'

Caractéristiques principales

Fonctionne avec vos composants: Cette bibliothèque ne fournit pas de widgets faits prêts. Cependant, il enveloppe vos composants et injecte des propulseurs dans eux.
Extensible: Vous pouvez ajouter un backend personnalisé basé sur des événements de souris ou des événements tactiles lors de l’utilisation de la bibliothèque React DnD.
Testable: Vous pouvez utiliser Jest ou Enzyme pour tester le code DnD Réact.
Support tactile: React DnD touch backend ajoute des fonctionnalités tactiles à cette bibliothèque. React DnD est une bibliothèque libre et open-source.

React Draggable

React Draggable est simple mais puissant Réagir la bibliothèque qui permet de créer facilement des éléments évolutifs.

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

Installation;

npm install react-draggable

Pour utiliser React Draggable, importer comme suit sur votre composant React.

1
import Draggable from 'react-draggable';

Caractéristiques

Facile à installer et à configurer: Vous devez juste installer et importer la bibliothèque pour commencer. Vous pouvez également importer des composants individuels de la bibliothèque.
Compatible avec vanille JavaScript et React: Vous pouvez utiliser React Draggable with plain JavaScript comme suit;

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

Compatible avec d’autres bibliothèques React: Vous pouvez utiliser React Draggable avec d’autres bibliothèques, telles que React Grid Layout. React Draggable est une bibliothèque libre, open-source Drap et Drop React.

React Dropzone

React Dropzone est un simple Crochet de Réact pour créer une zone de glisser-déposer compatible HTML-5 pour les fichiers.

React-Dropzone

Installation;

npm install --save react-dropzone

ou :

yarn add react-dropzone

Vous pouvez ensuite importer cette bibliothèque comme suit;

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

Caractéristiques

Styling Dropzone: Cette bibliothèque ne définit pas de règles de style, et vous pouvez donc styler vos composants comme vous le voyez.
Permet aux utilisateurs de définir des types de fichiers acceptables : Vous pouvez demander à la Dropzone d’accepter ou de rejeter certains types de fichiers en fournissant l’additif.
Accepte la validation personnalisée: L’attribut validator vous permet de spécifier la validation personnalisée pour différents fichiers. React Dropzone is a free, open-source Drag and Drop React library.

React Grid Layout

React Grid Layout est une mise en page de grille redimensionable et glissergable pour React.

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

Installation;

npm install react-grid-layout

Vous pouvez importer cette bibliothèque comme suit;

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

Caractéristiques

Dépendencies-free : React Grid Layout est construit purement sur React et est libre de JQuery.
widgets Resizable : En plus de la fonction glisser-déposer, vous pouvez également redimensionner les composants.
Points de rupture responsables : La bibliothèque fournit une disposition séparée pour chaque point de rupture.
Personnalisable : Vous pouvez ajouter ou supprimer des widgets sans reconstruire la grille entière. React Grid Layout est une bibliothèque de React gratuite et open-source.

React rnd

React rnd est un élément draggable et resizable pour React.

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

Installation;

npm i -S react-rnd

yarn add react-rnd

Caractéristiques

Simple: React rnd est conçu pour être simple mais très puissant.
Compatible avec TypeScript et JavaScript: Vous pouvez utiliser React rnd avec votre application indépendamment de votre configuration avec JavaScript ou TypeScript.
Supports resizing : Vous pouvez facilement redimensionner les composants créés en utilisant React rnd pour répondre à vos besoins. React rnd est une bibliothèque de React gratuite et open-source.

React Virtualized dnd

React Virtualized dnd est un cadre de React glisser-déposer qui dispose de barres de défilement de virtualisation intégrées.

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

Installation;

npm install --save react-virtualized-dnd

Vous pouvez importer React Virtualized dnd as;

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

Caractéristiques

Variété de composants à choisir: Les composants sont regroupés en “Fixed Height”, “Variable Height” et “Groupable Droppables”.
Personnalisable : Vous pouvez personnaliser les composants de React Virtualized dnd en fonction de vos besoins. React Virtualized dnd is an open-source React framework whose source code is hosted on GitHub.

React Movable

React Movable est une bibliothèque de React glisser-déposer pour les listes et les tableaux.

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

Installation;

yarn add react-movable

Vous pouvez importer cette bibliothèque comme;

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

Caractéristiques

Diverses options de glisser-déposer pour choisir: La bibliothèque dispose de codes à chaud pour différents types de composants glisser-déposer à choisir.
Bibliothèque légère: React Movable n’a pas de dépendances comme JQuery. Il est inférieur à 4kB (gzippé).
Style inopiné : React Movable ne contrôle pas comment vous pouvez vouloir styler votre application.
Support tactile: Cette bibliothèque aide à créer des applications qui peuvent être utilisées sur les smartphones, les tablettes et tout appareil avec fonctionnalité tactile.
Écrit dans TypeScript: Vous pouvez introduire Types à votre code, une fonctionnalité non disponible en JavaScript. React Movable est une bibliothèque de React gratuite et open-source.

Draggable

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

Installation;

npm install @shopify/draggable --save

ou par fil:

yarn add @shopify/draggable

Vous pouvez importer Draggable à votre application React comme;

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

Caractéristiques

Composants catégorisés: Trouver le composant exact à utiliser est facile car les composants sont classés. Ces composants sont personnalisables.
Compatible avec les principaux navigateurs: Vous pouvez utiliser Draggable avec les navigateurs tels que Google Chrome, Mozilla Firefox et Apple Safari.
Supports TypeScript: Lorsque vous travaillez avec cette bibliothèque, vous pouvez ajouter des définitions TypeScript à votre code.
Supports plugins: Vous pouvez ajouter à la fonctionnalité de Draggable avec des plugins tels que Collidable et SwapAnimation . Draggable est une bibliothèque de React gratuite et open-source gérée par les contributeurs.

React Drag pour sélectionner

React drag-to-select est une bibliothèque React que vous pouvez utiliser pour ajouter la fonctionnalité glisser-désélectionner à votre application.

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

Installation;

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

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

Vous pouvez importer cette bibliothèque à votre application comme suit;

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

Caractéristiques

Simple: Cette bibliothèque ne sélectionne pas d’articles. Cependant, la bibliothèque dessine la boîte de sélection et vous donne des coordonnées.
Supports TypeScript: React La bibliothèque Drag-to-select est écrite dans TypeScript, ce qui signifie que vous pouvez l’utiliser avec les applications React écrites dans TypeScript et JavaScript.
Essais de support: Vous pouvez utiliser cette bibliothèque avec la plupart des cadres de test React. React Drag-to-select est une bibliothèque libre et open-source.

React Dragula

React Dragula est une simple bibliothèque React glisser-déposer.

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

Installation;

npm install react-dragula --save

Ou,

bower install react-dragula --save

Caractéristiques

Personnalisable : Vous pouvez personnaliser les composants de React Dragula en fonction de vos besoins.
Supports touch: Vous pouvez utiliser cette bibliothèque pour créer des applications qui peuvent être utilisées sur les smartphones, tablettes et autres appareils tactiles.
Poids léger: React Dragula a une petite taille de paquet, le rendant parfait si vous voulez que votre application React soit petite. React Dragula est une bibliothèque libre et open-source.

Conclusion

title: “10 Meilleurs bibliothèques de drag and Drop React pour les interactions utilisateur sans faille” date: “2023-10-25T04:03:01” draft: false description: “Saviez-vous que vous pouvez améliorer l’interactivité utilisateur sur votre application React à travers des bibliothèques de drag-and-drop? Voici quelques-unes des meilleures bibliothèques de drag-and-drop à essayer aujourd’hui. " 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

Vous pouvez également utiliser la fonctionnalité Drag-and-Drop dans les cas suivants;

Téléchargement de fichiers : Les utilisateurs peuvent glisser et déposer des fichiers au lieu de défiler à travers leurs machines pour sélectionner et télécharger des fichiers.
Panneaux Kanban: Vous pouvez créer un tableau de bord où les utilisateurs peuvent glisser et déposer des éléments en fonction des niveaux d’activité ou des étapes.
Galeries d’images: Vous pouvez avoir une galerie d’images où les utilisateurs peuvent télécharger et réorganiser des images.
Widgets: Les utilisateurs peuvent personnaliser l’apparence de l’application en traînant et en déplaçant des widgets.
Panier : Les utilisateurs peuvent cliquer sur un article, le glisser et le déposer dans le panier. Une bibliothèque React Drag et Drop est un ensemble de composants pré-construits qui permettent aux développeurs de mettre en œuvre la fonctionnalité Drag et Drop dans les applications React.

Comment les bibliothèques Drag et Drop aideront à améliorer les interactions utilisateur

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

Expérience utilisateur améliorée: La fonctionnalité glisser-déposer est une approche intuitive pour les utilisateurs d’interagir avec une application. L’option de glisser et de déposer des éléments au lieu de les intégrer manuellement fournit une interaction interactive et transparente.
Flux de travail simplifiés: Au lieu de télécharger des fichiers de différents emplacements de votre ordinateur vers une application, vous pouvez simplement les glisser et les déposer.
Augmentation de la productivité : La fonctionnalité Drag-and-drop enregistre le temps, rendant les utilisateurs plus productifs.
Convient pour les appareils mobiles: Les appareils mobiles comme les smartphones et les tablettes ont un espace d’écran limité. Les utilisateurs comptent principalement sur les gestes pour la navigation, ce qui fait glisser-déposer un ajout impressionnant.
Fournit des interfaces attrayantes: La fonctionnalité glisser-déposer peut ajouter un appel visuel à l’interface utilisateur de votre application. Vous pouvez ajouter des animations qui fournissent des commentaires ou décrivent des actions comme les utilisateurs font glisser et déposent des éléments sur l’application. Ce sont les meilleures bibliothèques Drag et Drop React:

React DnD

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

Installation;

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

Vous pouvez importer React DnD à votre composant React comme;

1
import { useDrag } from 'react-dnd'

Caractéristiques principales

Fonctionne avec vos composants: Cette bibliothèque ne fournit pas de widgets faits prêts. Cependant, il enveloppe vos composants et injecte des propulseurs dans eux.
Extensible: Vous pouvez ajouter un backend personnalisé basé sur des événements de souris ou des événements tactiles lors de l’utilisation de la bibliothèque React DnD.
Testable: Vous pouvez utiliser Jest ou Enzyme pour tester le code DnD Réact.
Support tactile: React DnD touch backend ajoute des fonctionnalités tactiles à cette bibliothèque. React DnD est une bibliothèque libre et open-source.

React Draggable

React Draggable est simple mais puissant Réagir la bibliothèque qui permet de créer facilement des éléments évolutifs.

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

Installation;

npm install react-draggable

Pour utiliser React Draggable, importer comme suit sur votre composant React.

1
import Draggable from 'react-draggable';

Caractéristiques

Facile à installer et à configurer: Vous devez juste installer et importer la bibliothèque pour commencer. Vous pouvez également importer des composants individuels de la bibliothèque.
Compatible avec vanille JavaScript et React: Vous pouvez utiliser React Draggable with plain JavaScript comme suit;

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

Compatible avec d’autres bibliothèques React: Vous pouvez utiliser React Draggable avec d’autres bibliothèques, telles que React Grid Layout. React Draggable est une bibliothèque libre, open-source Drap et Drop React.

React Dropzone

React Dropzone est un simple Crochet de Réact pour créer une zone de glisser-déposer compatible HTML-5 pour les fichiers.

React-Dropzone

Installation;

npm install --save react-dropzone

ou :

yarn add react-dropzone

Vous pouvez ensuite importer cette bibliothèque comme suit;

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

Caractéristiques

Styling Dropzone: Cette bibliothèque ne définit pas de règles de style, et vous pouvez donc styler vos composants comme vous le voyez.
Permet aux utilisateurs de définir des types de fichiers acceptables : Vous pouvez demander à la Dropzone d’accepter ou de rejeter certains types de fichiers en fournissant l’additif.
Accepte la validation personnalisée: L’attribut validator vous permet de spécifier la validation personnalisée pour différents fichiers. React Dropzone is a free, open-source Drag and Drop React library.

React Grid Layout

React Grid Layout est une mise en page de grille redimensionable et glissergable pour React.

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

Installation;

npm install react-grid-layout

Vous pouvez importer cette bibliothèque comme suit;

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

Caractéristiques

Dépendencies-free : React Grid Layout est construit purement sur React et est libre de JQuery.
widgets Resizable : En plus de la fonction glisser-déposer, vous pouvez également redimensionner les composants.
Points de rupture responsables : La bibliothèque fournit une disposition séparée pour chaque point de rupture.
Personnalisable : Vous pouvez ajouter ou supprimer des widgets sans reconstruire la grille entière. React Grid Layout est une bibliothèque de React gratuite et open-source.

React rnd

React rnd est un élément draggable et resizable pour React.

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

Installation;

npm i -S react-rnd

yarn add react-rnd

Caractéristiques

Simple: React rnd est conçu pour être simple mais très puissant.
Compatible avec TypeScript et JavaScript: Vous pouvez utiliser React rnd avec votre application indépendamment de votre configuration avec JavaScript ou TypeScript.
Supports resizing : Vous pouvez facilement redimensionner les composants créés en utilisant React rnd pour répondre à vos besoins. React rnd est une bibliothèque de React gratuite et open-source.

React Virtualized dnd

React Virtualized dnd est un cadre de React glisser-déposer qui dispose de barres de défilement de virtualisation intégrées.

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

Installation;

npm install --save react-virtualized-dnd

Vous pouvez importer React Virtualized dnd as;

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

Caractéristiques

Variété de composants à choisir: Les composants sont regroupés en “Fixed Height”, “Variable Height” et “Groupable Droppables”.
Personnalisable : Vous pouvez personnaliser les composants de React Virtualized dnd en fonction de vos besoins. React Virtualized dnd is an open-source React framework whose source code is hosted on GitHub.

React Movable

React Movable est une bibliothèque de React glisser-déposer pour les listes et les tableaux.

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

Installation;

yarn add react-movable

Vous pouvez importer cette bibliothèque comme;

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

Caractéristiques

Diverses options de glisser-déposer pour choisir: La bibliothèque dispose de codes à chaud pour différents types de composants glisser-déposer à choisir.
Bibliothèque légère: React Movable n’a pas de dépendances comme JQuery. Il est inférieur à 4kB (gzippé).
Style inopiné : React Movable ne contrôle pas comment vous pouvez vouloir styler votre application.
Support tactile: Cette bibliothèque aide à créer des applications qui peuvent être utilisées sur les smartphones, les tablettes et tout appareil avec fonctionnalité tactile.
Écrit dans TypeScript: Vous pouvez introduire Types à votre code, une fonctionnalité non disponible en JavaScript. React Movable est une bibliothèque de React gratuite et open-source.

Draggable

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

Installation;

npm install @shopify/draggable --save

ou par fil:

yarn add @shopify/draggable

Vous pouvez importer Draggable à votre application React comme;

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

Caractéristiques

Composants catégorisés: Trouver le composant exact à utiliser est facile car les composants sont classés. Ces composants sont personnalisables.
Compatible avec les principaux navigateurs: Vous pouvez utiliser Draggable avec les navigateurs tels que Google Chrome, Mozilla Firefox et Apple Safari.
Supports TypeScript: Lorsque vous travaillez avec cette bibliothèque, vous pouvez ajouter des définitions TypeScript à votre code.
Supports plugins: Vous pouvez ajouter à la fonctionnalité de Draggable avec des plugins tels que Collidable et SwapAnimation . Draggable est une bibliothèque de React gratuite et open-source gérée par les contributeurs.

React Drag pour sélectionner

React drag-to-select est une bibliothèque React que vous pouvez utiliser pour ajouter la fonctionnalité glisser-désélectionner à votre application.

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

Installation;

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

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

Vous pouvez importer cette bibliothèque à votre application comme suit;

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

Caractéristiques

Simple: Cette bibliothèque ne sélectionne pas d’articles. Cependant, la bibliothèque dessine la boîte de sélection et vous donne des coordonnées.
Supports TypeScript: React La bibliothèque Drag-to-select est écrite dans TypeScript, ce qui signifie que vous pouvez l’utiliser avec les applications React écrites dans TypeScript et JavaScript.
Essais de support: Vous pouvez utiliser cette bibliothèque avec la plupart des cadres de test React. React Drag-to-select est une bibliothèque libre et open-source.

React Dragula

React Dragula est une simple bibliothèque React glisser-déposer.

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

Installation;

npm install react-dragula --save

Ou,

bower install react-dragula --save

Caractéristiques

Personnalisable : Vous pouvez personnaliser les composants de React Dragula en fonction de vos besoins.
Supports touch: Vous pouvez utiliser cette bibliothèque pour créer des applications qui peuvent être utilisées sur les smartphones, tablettes et autres appareils tactiles.
Poids léger: React Dragula a une petite taille de paquet, le rendant parfait si vous voulez que votre application React soit petite. React Dragula est une bibliothèque libre et open-source.

Conclusion

title: “10 Meilleurs bibliothèques de drag and Drop React pour les interactions utilisateur sans faille” date: “2023-10-28T04:03:01” draft: false description: “Saviez-vous que vous pouvez améliorer l’interactivité utilisateur sur votre application React à travers des bibliothèques de drag-and-drop? Voici quelques-unes des meilleures bibliothèques de drag-and-drop à essayer aujourd’hui. " autor: “toto” image: “https://cdn.99tz.top/be55757c94/2023/04/d66aba6df0e5452dbdfbcb4cf46b463f.webp" cover: “https://cdn.99tz.top/be55757c94/2023/04/d66aba6df0e5452dbdfbcb4cf46b463f.webp" tags: [] categories: [‘Development’] theme: light

Vous pouvez également utiliser la fonctionnalité Drag-and-Drop dans les cas suivants;

Téléchargement de fichiers : Les utilisateurs peuvent glisser et déposer des fichiers au lieu de défiler à travers leurs machines pour sélectionner et télécharger des fichiers.
Panneaux Kanban: Vous pouvez créer un tableau de bord où les utilisateurs peuvent glisser et déposer des éléments en fonction des niveaux d’activité ou des étapes.
Galeries d’images: Vous pouvez avoir une galerie d’images où les utilisateurs peuvent télécharger et réorganiser des images.
Widgets: Les utilisateurs peuvent personnaliser l’apparence de l’application en traînant et en déplaçant des widgets.
Panier : Les utilisateurs peuvent cliquer sur un article, le glisser et le déposer dans le panier. Une bibliothèque React Drag et Drop est un ensemble de composants pré-construits qui permettent aux développeurs de mettre en œuvre la fonctionnalité Drag et Drop dans les applications React.

Comment les bibliothèques Drag et Drop aideront à améliorer les interactions utilisateur

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

Expérience utilisateur améliorée: La fonctionnalité glisser-déposer est une approche intuitive pour les utilisateurs d’interagir avec une application. L’option de glisser et de déposer des éléments au lieu de les intégrer manuellement fournit une interaction interactive et transparente.
Flux de travail simplifiés: Au lieu de télécharger des fichiers de différents emplacements de votre ordinateur vers une application, vous pouvez simplement les glisser et les déposer.
Augmentation de la productivité : La fonctionnalité Drag-and-drop enregistre le temps, rendant les utilisateurs plus productifs.
Convient pour les appareils mobiles: Les appareils mobiles comme les smartphones et les tablettes ont un espace d’écran limité. Les utilisateurs comptent principalement sur les gestes pour la navigation, ce qui fait glisser-déposer un ajout impressionnant.
Fournit des interfaces attrayantes: La fonctionnalité glisser-déposer peut ajouter un appel visuel à l’interface utilisateur de votre application. Vous pouvez ajouter des animations qui fournissent des commentaires ou décrivent des actions comme les utilisateurs font glisser et déposent des éléments sur l’application. Ce sont les meilleures bibliothèques Drag et Drop React:

React DnD

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

Installation;

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

Vous pouvez importer React DnD à votre composant React comme;

1
import { useDrag } from 'react-dnd'

Caractéristiques principales

Fonctionne avec vos composants: Cette bibliothèque ne fournit pas de widgets faits prêts. Cependant, il enveloppe vos composants et injecte des propulseurs dans eux.
Extensible: Vous pouvez ajouter un backend personnalisé basé sur des événements de souris ou des événements tactiles lors de l’utilisation de la bibliothèque React DnD.
Testable: Vous pouvez utiliser Jest ou Enzyme pour tester le code DnD Réact.
Support tactile: React DnD touch backend ajoute des fonctionnalités tactiles à cette bibliothèque. React DnD est une bibliothèque libre et open-source.

React Draggable

React Draggable est simple mais puissant Réagir la bibliothèque qui permet de créer facilement des éléments évolutifs.

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

Installation;

npm install react-draggable

Pour utiliser React Draggable, importer comme suit sur votre composant React.

1
import Draggable from 'react-draggable';

Caractéristiques

Facile à installer et à configurer: Vous devez juste installer et importer la bibliothèque pour commencer. Vous pouvez également importer des composants individuels de la bibliothèque.
Compatible avec vanille JavaScript et React: Vous pouvez utiliser React Draggable with plain JavaScript comme suit;

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

Compatible avec d’autres bibliothèques React: Vous pouvez utiliser React Draggable avec d’autres bibliothèques, telles que React Grid Layout. React Draggable est une bibliothèque libre, open-source Drap et Drop React.

React Dropzone

React Dropzone est un simple Crochet de Réact pour créer une zone de glisser-déposer compatible HTML-5 pour les fichiers.

React-Dropzone

Installation;

npm install --save react-dropzone

ou :

yarn add react-dropzone

Vous pouvez ensuite importer cette bibliothèque comme suit;

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

Caractéristiques

Styling Dropzone: Cette bibliothèque ne définit pas de règles de style, et vous pouvez donc styler vos composants comme vous le voyez.
Permet aux utilisateurs de définir des types de fichiers acceptables : Vous pouvez demander à la Dropzone d’accepter ou de rejeter certains types de fichiers en fournissant l’additif.
Accepte la validation personnalisée: L’attribut validator vous permet de spécifier la validation personnalisée pour différents fichiers. React Dropzone is a free, open-source Drag and Drop React library.

React Grid Layout

React Grid Layout est une mise en page de grille redimensionable et glissergable pour React.

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

Installation;

npm install react-grid-layout

Vous pouvez importer cette bibliothèque comme suit;

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

Caractéristiques

Dépendencies-free : React Grid Layout est construit purement sur React et est libre de JQuery.
widgets Resizable : En plus de la fonction glisser-déposer, vous pouvez également redimensionner les composants.
Points de rupture responsables : La bibliothèque fournit une disposition séparée pour chaque point de rupture.
Personnalisable : Vous pouvez ajouter ou supprimer des widgets sans reconstruire la grille entière. React Grid Layout est une bibliothèque de React gratuite et open-source.

React rnd

React rnd est un élément draggable et resizable pour React.

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

Installation;

npm i -S react-rnd

yarn add react-rnd

Caractéristiques

Simple: React rnd est conçu pour être simple mais très puissant.
Compatible avec TypeScript et JavaScript: Vous pouvez utiliser React rnd avec votre application indépendamment de votre configuration avec JavaScript ou TypeScript.
Supports resizing : Vous pouvez facilement redimensionner les composants créés en utilisant React rnd pour répondre à vos besoins. React rnd est une bibliothèque de React gratuite et open-source.

React Virtualized dnd

React Virtualized dnd est un cadre de React glisser-déposer qui dispose de barres de défilement de virtualisation intégrées.

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

Installation;

npm install --save react-virtualized-dnd

Vous pouvez importer React Virtualized dnd as;

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

Caractéristiques

Variété de composants à choisir: Les composants sont regroupés en “Fixed Height”, “Variable Height” et “Groupable Droppables”.
Personnalisable : Vous pouvez personnaliser les composants de React Virtualized dnd en fonction de vos besoins. React Virtualized dnd is an open-source React framework whose source code is hosted on GitHub.

React Movable

React Movable est une bibliothèque de React glisser-déposer pour les listes et les tableaux.

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

Installation;

yarn add react-movable

Vous pouvez importer cette bibliothèque comme;

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

Caractéristiques

Diverses options de glisser-déposer pour choisir: La bibliothèque dispose de codes à chaud pour différents types de composants glisser-déposer à choisir.
Bibliothèque légère: React Movable n’a pas de dépendances comme JQuery. Il est inférieur à 4kB (gzippé).
Style inopiné : React Movable ne contrôle pas comment vous pouvez vouloir styler votre application.
Support tactile: Cette bibliothèque aide à créer des applications qui peuvent être utilisées sur les smartphones, les tablettes et tout appareil avec fonctionnalité tactile.
Écrit dans TypeScript: Vous pouvez introduire Types à votre code, une fonctionnalité non disponible en JavaScript. React Movable est une bibliothèque de React gratuite et open-source.

Draggable

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

Installation;

npm install @shopify/draggable --save

ou par fil:

yarn add @shopify/draggable

Vous pouvez importer Draggable à votre application React comme;

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

Caractéristiques

Composants catégorisés: Trouver le composant exact à utiliser est facile car les composants sont classés. Ces composants sont personnalisables.
Compatible avec les principaux navigateurs: Vous pouvez utiliser Draggable avec les navigateurs tels que Google Chrome, Mozilla Firefox et Apple Safari.
Supports TypeScript: Lorsque vous travaillez avec cette bibliothèque, vous pouvez ajouter des définitions TypeScript à votre code.
Supports plugins: Vous pouvez ajouter à la fonctionnalité de Draggable avec des plugins tels que Collidable et SwapAnimation . Draggable est une bibliothèque de React gratuite et open-source gérée par les contributeurs.

React Drag pour sélectionner

React drag-to-select est une bibliothèque React que vous pouvez utiliser pour ajouter la fonctionnalité glisser-désélectionner à votre application.

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

Installation;

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

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

Vous pouvez importer cette bibliothèque à votre application comme suit;

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

Caractéristiques

Simple: Cette bibliothèque ne sélectionne pas d’articles. Cependant, la bibliothèque dessine la boîte de sélection et vous donne des coordonnées.
Supports TypeScript: React La bibliothèque Drag-to-select est écrite dans TypeScript, ce qui signifie que vous pouvez l’utiliser avec les applications React écrites dans TypeScript et JavaScript.
Essais de support: Vous pouvez utiliser cette bibliothèque avec la plupart des cadres de test React. React Drag-to-select est une bibliothèque libre et open-source.

React Dragula

React Dragula est une simple bibliothèque React glisser-déposer.

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

Installation;

npm install react-dragula --save

Ou,

bower install react-dragula --save

Caractéristiques

Personnalisable : Vous pouvez personnaliser les composants de React Dragula en fonction de vos besoins.
Supports touch: Vous pouvez utiliser cette bibliothèque pour créer des applications qui peuvent être utilisées sur les smartphones, tablettes et autres appareils tactiles.
Poids léger: React Dragula a une petite taille de paquet, le rendant parfait si vous voulez que votre application React soit petite. React Dragula est une bibliothèque libre et open-source.

Conclusion

title: “10 Meilleurs bibliothèques de drag and Drop React pour les interactions utilisateur sans faille” date: “2023-10-30T05:03:01” draft: false description: “Saviez-vous que vous pouvez améliorer l’interactivité utilisateur sur votre application React à travers des bibliothèques de drag-and-drop? Voici quelques-unes des meilleures bibliothèques de drag-and-drop à essayer aujourd’hui. " 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

Vous pouvez également utiliser la fonctionnalité Drag-and-Drop dans les cas suivants;

Téléchargement de fichiers : Les utilisateurs peuvent glisser et déposer des fichiers au lieu de défiler à travers leurs machines pour sélectionner et télécharger des fichiers.
Panneaux Kanban: Vous pouvez créer un tableau de bord où les utilisateurs peuvent glisser et déposer des éléments en fonction des niveaux d’activité ou des étapes.
Galeries d’images: Vous pouvez avoir une galerie d’images où les utilisateurs peuvent télécharger et réorganiser des images.
Widgets: Les utilisateurs peuvent personnaliser l’apparence de l’application en traînant et en déplaçant des widgets.
Panier : Les utilisateurs peuvent cliquer sur un article, le glisser et le déposer dans le panier. Une bibliothèque React Drag et Drop est un ensemble de composants pré-construits qui permettent aux développeurs de mettre en œuvre la fonctionnalité Drag et Drop dans les applications React.

Comment les bibliothèques Drag et Drop aideront à améliorer les interactions utilisateur

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

Expérience utilisateur améliorée: La fonctionnalité glisser-déposer est une approche intuitive pour les utilisateurs d’interagir avec une application. L’option de glisser et de déposer des éléments au lieu de les intégrer manuellement fournit une interaction interactive et transparente.
Flux de travail simplifiés: Au lieu de télécharger des fichiers de différents emplacements de votre ordinateur vers une application, vous pouvez simplement les glisser et les déposer.
Augmentation de la productivité : La fonctionnalité Drag-and-drop enregistre le temps, rendant les utilisateurs plus productifs.
Convient pour les appareils mobiles: Les appareils mobiles comme les smartphones et les tablettes ont un espace d’écran limité. Les utilisateurs comptent principalement sur les gestes pour la navigation, ce qui fait glisser-déposer un ajout impressionnant.
Fournit des interfaces attrayantes: La fonctionnalité glisser-déposer peut ajouter un appel visuel à l’interface utilisateur de votre application. Vous pouvez ajouter des animations qui fournissent des commentaires ou décrivent des actions comme les utilisateurs font glisser et déposent des éléments sur l’application. Ce sont les meilleures bibliothèques Drag et Drop React:

React DnD

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

Installation;

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

Vous pouvez importer React DnD à votre composant React comme;

1
import { useDrag } from 'react-dnd'

Caractéristiques principales

Fonctionne avec vos composants: Cette bibliothèque ne fournit pas de widgets faits prêts. Cependant, il enveloppe vos composants et injecte des propulseurs dans eux.
Extensible: Vous pouvez ajouter un backend personnalisé basé sur des événements de souris ou des événements tactiles lors de l’utilisation de la bibliothèque React DnD.
Testable: Vous pouvez utiliser Jest ou Enzyme pour tester le code DnD Réact.
Support tactile: React DnD touch backend ajoute des fonctionnalités tactiles à cette bibliothèque. React DnD est une bibliothèque libre et open-source.

React Draggable

React Draggable est simple mais puissant Réagir la bibliothèque qui permet de créer facilement des éléments évolutifs.

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

Installation;

npm install react-draggable

Pour utiliser React Draggable, importer comme suit sur votre composant React.

1
import Draggable from 'react-draggable';

Caractéristiques

Facile à installer et à configurer: Vous devez juste installer et importer la bibliothèque pour commencer. Vous pouvez également importer des composants individuels de la bibliothèque.
Compatible avec vanille JavaScript et React: Vous pouvez utiliser React Draggable with plain JavaScript comme suit;

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

Compatible avec d’autres bibliothèques React: Vous pouvez utiliser React Draggable avec d’autres bibliothèques, telles que React Grid Layout. React Draggable est une bibliothèque libre, open-source Drap et Drop React.

React Dropzone

React Dropzone est un simple Crochet de Réact pour créer une zone de glisser-déposer compatible HTML-5 pour les fichiers.

React-Dropzone

Installation;

npm install --save react-dropzone

ou :

yarn add react-dropzone

Vous pouvez ensuite importer cette bibliothèque comme suit;

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

Caractéristiques

Styling Dropzone: Cette bibliothèque ne définit pas de règles de style, et vous pouvez donc styler vos composants comme vous le voyez.
Permet aux utilisateurs de définir des types de fichiers acceptables : Vous pouvez demander à la Dropzone d’accepter ou de rejeter certains types de fichiers en fournissant l’additif.
Accepte la validation personnalisée: L’attribut validator vous permet de spécifier la validation personnalisée pour différents fichiers. React Dropzone is a free, open-source Drag and Drop React library.

React Grid Layout

React Grid Layout est une mise en page de grille redimensionable et glissergable pour React.

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

Installation;

npm install react-grid-layout

Vous pouvez importer cette bibliothèque comme suit;

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

Caractéristiques

Dépendencies-free : React Grid Layout est construit purement sur React et est libre de JQuery.
widgets Resizable : En plus de la fonction glisser-déposer, vous pouvez également redimensionner les composants.
Points de rupture responsables : La bibliothèque fournit une disposition séparée pour chaque point de rupture.
Personnalisable : Vous pouvez ajouter ou supprimer des widgets sans reconstruire la grille entière. React Grid Layout est une bibliothèque de React gratuite et open-source.

React rnd

React rnd est un élément draggable et resizable pour React.

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

Installation;

npm i -S react-rnd

yarn add react-rnd

Caractéristiques

Simple: React rnd est conçu pour être simple mais très puissant.
Compatible avec TypeScript et JavaScript: Vous pouvez utiliser React rnd avec votre application indépendamment de votre configuration avec JavaScript ou TypeScript.
Supports resizing : Vous pouvez facilement redimensionner les composants créés en utilisant React rnd pour répondre à vos besoins. React rnd est une bibliothèque de React gratuite et open-source.

React Virtualized dnd

React Virtualized dnd est un cadre de React glisser-déposer qui dispose de barres de défilement de virtualisation intégrées.

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

Installation;

npm install --save react-virtualized-dnd

Vous pouvez importer React Virtualized dnd as;

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

Caractéristiques

Variété de composants à choisir: Les composants sont regroupés en “Fixed Height”, “Variable Height” et “Groupable Droppables”.
Personnalisable : Vous pouvez personnaliser les composants de React Virtualized dnd en fonction de vos besoins. React Virtualized dnd is an open-source React framework whose source code is hosted on GitHub.

React Movable

React Movable est une bibliothèque de React glisser-déposer pour les listes et les tableaux.

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

Installation;

yarn add react-movable

Vous pouvez importer cette bibliothèque comme;

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

Caractéristiques

Diverses options de glisser-déposer pour choisir: La bibliothèque dispose de codes à chaud pour différents types de composants glisser-déposer à choisir.
Bibliothèque légère: React Movable n’a pas de dépendances comme JQuery. Il est inférieur à 4kB (gzippé).
Style inopiné : React Movable ne contrôle pas comment vous pouvez vouloir styler votre application.
Support tactile: Cette bibliothèque aide à créer des applications qui peuvent être utilisées sur les smartphones, les tablettes et tout appareil avec fonctionnalité tactile.
Écrit dans TypeScript: Vous pouvez introduire Types à votre code, une fonctionnalité non disponible en JavaScript. React Movable est une bibliothèque de React gratuite et open-source.

Draggable

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

Installation;

npm install @shopify/draggable --save

ou par fil:

yarn add @shopify/draggable

Vous pouvez importer Draggable à votre application React comme;

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

Caractéristiques

Composants catégorisés: Trouver le composant exact à utiliser est facile car les composants sont classés. Ces composants sont personnalisables.
Compatible avec les principaux navigateurs: Vous pouvez utiliser Draggable avec les navigateurs tels que Google Chrome, Mozilla Firefox et Apple Safari.
Supports TypeScript: Lorsque vous travaillez avec cette bibliothèque, vous pouvez ajouter des définitions TypeScript à votre code.
Supports plugins: Vous pouvez ajouter à la fonctionnalité de Draggable avec des plugins tels que Collidable et SwapAnimation . Draggable est une bibliothèque de React gratuite et open-source gérée par les contributeurs.

React Drag pour sélectionner

React drag-to-select est une bibliothèque React que vous pouvez utiliser pour ajouter la fonctionnalité glisser-désélectionner à votre application.

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

Installation;

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

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

Vous pouvez importer cette bibliothèque à votre application comme suit;

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

Caractéristiques

Simple: Cette bibliothèque ne sélectionne pas d’articles. Cependant, la bibliothèque dessine la boîte de sélection et vous donne des coordonnées.
Supports TypeScript: React La bibliothèque Drag-to-select est écrite dans TypeScript, ce qui signifie que vous pouvez l’utiliser avec les applications React écrites dans TypeScript et JavaScript.
Essais de support: Vous pouvez utiliser cette bibliothèque avec la plupart des cadres de test React. React Drag-to-select est une bibliothèque libre et open-source.

React Dragula

React Dragula est une simple bibliothèque React glisser-déposer.

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

Installation;

npm install react-dragula --save

Ou,

bower install react-dragula --save

Caractéristiques

Personnalisable : Vous pouvez personnaliser les composants de React Dragula en fonction de vos besoins.
Supports touch: Vous pouvez utiliser cette bibliothèque pour créer des applications qui peuvent être utilisées sur les smartphones, tablettes et autres appareils tactiles.
Poids léger: React Dragula a une petite taille de paquet, le rendant parfait si vous voulez que votre application React soit petite. React Dragula est une bibliothèque libre et open-source.