react-draggable

React-Draggable est une bibliothèque de composants React permettant de rendre des éléments déplaçables. Elle fait partie de l'organisation react-grid-layout et est publiée sur npm sous le nom react-draggable. La bibliothèque fournit deux composants. `<Draggable>` enveloppe un élément existant et l'étend avec des gestionnaires d'événements de glisser et des styles, déplaçant les éléments via des CSS Transforms afin qu'ils puissent être glissés indépendamment de leur positionnement actuel. Il ne crée pas d'élément d'enveloppe dans le DOM. `<DraggableCore>` est une option de plus bas niveau pour les utilisateurs ayant besoin d'un contrôle total : il fournit des callbacks de glisser sans gérer l'état ni les styles et ne définit pas de transforms, laissant le positionnement au développeur. Le README renvoie à React-Resizable et React-Grid-Layout comme exemples d'utilisation de DraggableCore. Les props clés de `<Draggable>` incluent axis (both, x, y, none), bounds (parent, sélecteur CSS, ou objet left/top/right/bottom), les sélecteurs CSS cancel et handle, le magnétisme sur grille (grid snapping), position pour un usage contrôlé, positionOffset, scale pour les parents transformés, disabled, et les callbacks onStart, onDrag, onStop et onMouseDown. DraggableData transmis aux gestionnaires contient node, x, y, deltaX, deltaY, lastX et lastY. Retourner false depuis onStart annule le glisser. Définir className, style ou transform sur `<Draggable>` est une erreur ; ceux-ci appartiennent à l'élément enfant. Le README documente la compatibilité : la version 4.x prend en charge React 16.3+, la 3.x prend en charge React 15–16, et la 2.x prend en charge React 0.14–15. Les types TypeScript sont inclus. L'installation se fait via npm ou yarn, avec des exemples d'import en module ES et CommonJS. Une section notable couvre nodeRef : passer une prop nodeRef évite les avertissements de dépréciation de ReactDOM.findDOMNode() en React Strict Mode, et le README montre comment transmettre à la fois ref et props pour des composants personnalisés. Une autre section explique l'usage contrôlé versus non contrôlé, en montrant comment passer une prop position pour un repositionnement programmatique tout en utilisant la gestion d'état de Draggable. La section Content Security Policy explique que react-draggable injecte un petit élément style dans le head du document lors du premier glisser (le comportement enableUserSelectHack, activé par défaut) afin d'empêcher la sélection de texte pendant le glisser. Sous une CSP stricte sans 'unsafe-inline' dans style-src, cela est bloqué. Trois remèdes sont documentés : passer une prop nonce, s'appuyer sur le repli global __webpack_nonce__ de webpack, ou définir enableUserSelectHack={false} et ajouter les deux règles de sélection à votre propre feuille de style. Le nonce n'est lu que lors de la première création de l'élément, et le même élément est partagé par chaque Draggable/DraggableCore de la page. Le dépôt inclut un site de démonstration, un changelog, un workflow CI et des instructions de contribution couvrant yarn dev, yarn test, et une liste de vérification de release utilisant des cibles make. Le projet est sous licence MIT.