React-dnd: Qui utilise React DnD ?

Créé le 17 févr. 2016  ·  35Commentaires  ·  Source: react-dnd/react-dnd

Au cours de la semaine dernière, j'ai résolu un tas de problèmes et publié quelques versions, mais il est difficile de le faire sans comprendre les besoins des utilisateurs. Ce projet a de nombreuses stars, mais lorsqu'il y a un problème, il est difficile de dire combien de personnes cela impacte et pourquoi nous ne recevons pas plus de pull requests.

La base de code n'est pas documentée et peut être intimidante pour les étrangers, ce que je comprends bien. Est-ce la raison pour laquelle nous ne recevons pas plus de demandes d'extraction de correctifs ? Ou est-ce parce que le projet n'est pas utilisé aussi largement que les étoiles me le laissent croire ?

Je voudrais demander aux utilisateurs actuels de React DnD de s'enregistrer ici pour dire quelques mots.

  • Dans quels produits utilisez-vous React DnD ?
  • À quel point le trouvez-vous utile ?
  • À quelle fréquence avez-vous des problèmes avec cela, et à quel point sont-ils frustrants ?
  • Quelles sont les fonctionnalités qui vous intéressent ?
  • Pouvez-vous joindre quelques captures d'écran de votre produit ?

Cela m'aidera à comprendre comment ce projet s'intègre dans l'écosystème et quelle part de mon temps libre vaut la peine d'y être consacrée. Merci!

announcement

Commentaire le plus utile

Dans quels produits utilisez-vous React DnD ?

Nous utilisons React DnD dans l'application Web Asana , pour tous les endroits où nous utilisons le glisser-déposer. Notez que nous réécrivons actuellement notre application à partir de notre framework Luna interne vers React, et utilisons React DnD lors de la réécriture dans tous les endroits où nous utilisons le glisser-déposer.

À quel point le trouvez-vous utile ?

Nous l'avons trouvé très utile. L'API est facile à utiliser et nous permet d'avoir une séparation claire des préoccupations en gardant le glisser-déposer contenu dans quelques composants.

À quelle fréquence avez-vous des problèmes avec cela, et à quel point sont-ils frustrants ?

En dehors de la montée en puissance initiale, nous n'avons pas souvent de problèmes avec cela. Nous utilisons React DnD avec TypeScript, et je pense que l'écriture des définitions de type a réduit la période de montée en puissance pour nous (puisque nous avons dû explorer l'intégralité de l'API dans le processus). Maintenant, nos problèmes concernent généralement les tests (par exemple, le nettoyage entre les tests, les aides internes pour travailler avec les composants décorés par le dnd, etc.). C'est parfois frustrant, mais moins maintenant que nous avons des composants à usage général à utiliser ou des exemples de composants sur lesquels baser les futurs.

Quelles sont les fonctionnalités qui vous intéressent ?

Performance, séparation des préoccupations, testabilité

Pouvez-vous joindre quelques captures d'écran de votre produit ?

Drag to subtask
Dashboards

Tous les 35 commentaires

  • Projet : https://github.com/WikiEducationFoundation/WikiEduDashboard
  • Utilité : Très
  • Problèmes : les animations basées sur l'état étaient la partie la plus difficile. Je me suis retrouvé avec une combinaison de groupes de transition react-motion et react css. Ensuite, j'ai dû gérer un état supplémentaire pour les choses qui étaient en cours d'animation pour les empêcher d'être des cibles de chute pendant l'animation. J'ai fini par utiliser https://github.com/yahoo/react-dnd-touch-backend , qui avait ses propres problèmes (le texte étant sélectionné pendant le glissement) mais était plus contrôlable pendant les animations. J'ai probablement passé environ 4 jours de travail sur cette fonctionnalité et sur la bonne animation des animations, ce qui aurait probablement pris beaucoup moins de temps dans une application sans réaction.

feb 17 2016 07 34

_- Dans quels produits utilisez-vous React DnD ?_

Je l'utilise sur diverses applications (tableau Kanban, applications métier)

_- À quel point le trouvez-vous utile ?_

Avant React DnD, j'ai essayé toutes les solutions DnD que j'ai pu trouver, à la fois réactives et basées sur jquery, et React DnD a une longueur d'avance.

_- À quelle fréquence rencontrez-vous des problèmes avec, et à quel point sont-ils frustrants ?_

Depuis la 1.0, je n'ai rencontré aucun problème. À noter que je ne prends en charge que les navigateurs modernes sur mes produits.

_- Quelles fonctionnalités vous intéressent ?_

J'utilise toutes les fonctionnalités, dans différentes combinaisons dans différents domaines.

_- Pouvez-vous joindre quelques captures d'écran de votre produit ?_

image

Je viens de l'intégrer hier à un projet privé (je ne peux pas donner d'écrans pour le moment, désolé), et j'ai trouvé la documentation existante superbe. L'approche est propre, facile à comprendre, simple à augmenter et globalement conviviale.

Honnêtement, je n'ai rencontré aucun problème avec le kit. Je pense que sa simplicité est vraiment la plus grande caractéristique, et elle encourage les gens qui l'utilisent à s'orienter vers les meilleures pratiques comme les HOC.

Dans quels produits utilisez-vous React DnD ?

Nous l'utilisons dans notre nouvelle console Web chez Treasure Data. Je l'ai également utilisé pour des projets personnels.

À quel point le trouvez-vous utile ?

Très utile. C'est facilement la meilleure bibliothèque de glisser-déposer que j'ai utilisée. Je suis convaincu qu'il peut être utilisé pour mettre en œuvre facilement des interactions sophistiquées par glisser-déposer.

À quelle fréquence avez-vous des problèmes avec cela, et à quel point sont-ils frustrants ?

Chaque fois que j'utilise la bibliothèque, il me faut un certain temps pour me rappeler comment tout s'assemble : où va chaque partie et ce qu'elle fait. Cela se produit même après l'avoir utilisé plusieurs fois.

Peut-être qu'avoir une visualisation pour montrer toutes les parties faciliterait la mémorisation.

Dans l'ensemble, il semble que la bibliothèque fasse tout ce dont j'ai besoin.

Quelles sont les fonctionnalités qui vous intéressent ?

Testabilité ! Mes expériences précédentes avec le glisser-déposer étaient plutôt médiocres et personne n'a testé leur code lié au glisser-déposer.

Je n'ai fait aucun type de support mobile, mais je ne sais pas comment je ciblerais à la fois le bureau et le mobile.

J'ai vu react-dnd-touch-backend , mais je ne sais pas comment mélanger les deux.

Pouvez-vous joindre quelques captures d'écran de votre produit ?

https://gfycat.com/ScientificEvilAmericanbadger

C'est essentiellement moi qui joue. react-dnd simplifie l'implémentation de la zone de dépôt de fichiers.

Dans quels produits utilisez-vous React DnD ?

codecks.io toujours en développement mais proche de l'accès anticipé

À quel point le trouvez-vous utile ?

Beaucoup. La normalisation du comportement du navigateur et l'offre d'une approche réactive à dnd font de cette bibliothèque une évidence pour moi

À quelle fréquence avez-vous des problèmes avec cela, et à quel point sont-ils frustrants ?

La documentation est excellente, mais lorsque j'ai commencé à travailler avec, j'ai rencontré des problèmes surprenants où cela ne fonctionnait pas sans messages d'erreur, je ne pouvais pas le reproduire de manière fiable, mais j'avais probablement à faire avec des cibles de glissement de hauteur nulle.

Quelles sont les fonctionnalités qui vous intéressent ?

Normalisation du navigateur, prise en charge des interactions tactiles

Pouvez-vous joindre quelques captures d'écran de votre produit ?

https://gfycat.com/CleanLegitimateAracari

J'ai utilisé React DnD dans mon travail de doctorat sur un moteur de recherche d'archives d'imagerie médicale. Cela me permet de faire glisser les résultats de la recherche pour qu'ils fassent partie de la requête (produisant des images similaires). S'il n'y avait pas eu de bibliothèque comme celle-ci, j'aurais dû jouer avec l'API HTML5 et m'assurer qu'elle fonctionne bien avec React. Tout ce qui me permet de me concentrer sur des sujets plus importants est de l'or !

Je n'ai eu aucun problème sérieux, mais la transition de 0.x à 1.x était très déroutante et un bon exemple où les balises dist n'étaient pas utilisées correctement (1.0.0-rc a été publié en tant que latest sans mise à jour Documentation). C'est de l'eau sous le pont, de toute façon. :)

1.0.0-rc a été publié en dernier sans documentation mise à jour

Ouais, c'était avant que j'apprenne comment fonctionnent les dist-tags. :joie:

Dans quels produits utilisez-vous React DnD ?

L'utiliser pour un projet client qui a beaucoup d'interaction glisser-déposer. Certains des composants notables sont:

  • Une arborescence où vous pouvez trier et imbriquer les nœuds
  • Une vue liste/carte similaire à Trello, ne prend en charge que le tri.

C'est aussi un outil de collaboration, donc la plupart des mises à jour de l'interface sont envoyées à un serveur de socket.

À quel point le trouvez-vous utile ?

Très utile, il est très facile de séparer la logique de glissement de votre composant et de la tester individuellement.

À quelle fréquence avez-vous des problèmes avec cela, et à quel point sont-ils frustrants ?

Nous rencontrons beaucoup de problèmes avec l'arborescence qui prend en charge l'imbrication et le tri,

L'un des plus gros problèmes que nous avons rencontrés a été la mise en œuvre de l'arborescence qui prend en charge l'imbrication et le tri.

Nous avons différents types de nœuds (dossiers, listes). Un utilisateur peut soit déposer quelque chose sur un dossier qui le fera s'imbriquer, soit le trier au-dessous ou au-dessus d'un autre nœud. Cette interaction s'accompagne de beaucoup de scintillements, de certains comportements bogués et parfois d'une diminution des performances. Voir cette vidéo : http://s.2to1.be/fAtX ,

Le fonctionnement est le suivant :

  1. L'utilisateur commence à faire glisser un nœud, le nœud reste dans sa position
  2. L'utilisateur survole un nœud -> affiche un indicateur de la nouvelle position, la position de celui-ci est envoyée avec une action redux. (l'arborescence entière fait partie de l'état de l'application).
  3. L'utilisateur termine le glisser qui envoie une action qui conserve la nouvelle position du nœud sur le serveur et la transmet à tous les clients socket connectés.

Actuellement, nous utilisons des calculs (une variante de l'exemple triable dans ce référentiel) pour calculer si un nœud se trouve ou non sur ou en dessous/au-dessus d'un dossier. Au départ, j'ai essayé de faire du composant Folder un DropTarget mais cela n'a pas fonctionné car je n'ai pas pu trier les autres Node DropTarget

Quelles sont les fonctionnalités qui vous intéressent ?

  • Testabilité
  • Changer les backends
  • Accrocher aux événements
  • Prise en charge du navigateur

Pouvez-vous joindre quelques captures d'écran de votre produit ?

Voir la vidéo ci-dessus

Je viens d'ajouter react-dnd la semaine dernière à une application Web éducative (qui n'est pas encore publiée). C'est étonnant! Merci beaucoup pour votre travail !

La plus grande victoire de l'OMI est que react-dnd fournit juste le bon niveau d'abstraction pour gérer la fonctionnalité DnD dans l'ensemble de l'application.

En plus de pouvoir abandonner la combinaison maladroite de composants de traînée isolés et de taille unique (triables, etc.), j'ai pu ajouter en quelques heures des fonctionnalités basées sur la traînée que j'avais précédemment qualifiées de trop compliquées. pour en valoir la peine (par exemple, faire glisser une carte pour la trier à nouveau dans sa liste OU sur une icône de liste d'utilisateurs pour afficher une liste d'utilisateurs, puis la déposer sur l'utilisateur approprié).

Le seul problème que j'ai rencontré jusqu'à présent concernait le backend tactile, mais j'ai pu faire un hack rapide pour aller de l'avant et quelqu'un a commenté qu'il travaillait sur une demande d'extraction plus générale.

La principale caractéristique qui m'intéresse compte tenu de l'API déjà merveilleuse est la prise en charge tactile solide.

Parlant personnellement de la raison pour laquelle je ne fais pas de pull requests pour des projets open source (jusqu'à présent, en tout cas)... Je suis un designer. Bien que j'utilise cet outil, par exemple, ma tête pense naturellement à des types de problèmes très différents. En plus de ne pas être bon pour résoudre les problèmes qui surviennent dans des bibliothèques comme celle-ci, ce n'est vraiment pas le genre de travail que je fais normalement et je ne "ferais pas confiance" à ma solution. Je sais qu'il y a une certaine part d'égoïsme ici, mais j'imagine qu'il y a plus que quelques concepteurs qui codent également dans le développement front-end et qui agissent de cette façon. Je suis très reconnaissant aux personnes comme vous qui sont prêtes à aider les concepteurs comme moi avec des outils qui rapprochent les complexités du développement d'applications des complexités de la conception de produits afin que le déplacement entre les domaines soit moins choquant.

Pour votre information, j'utilise react-dnd en combinaison avec react-flip-move pour animer les changements de mise en page. Cela ne fait que quelques jours, mais ils ont l'air de bien se marier.

@arstin

Cela a totalement fait ma journée. :cœur:

_Dans quels produits utilisez-vous React DnD ?_
Le produit est encore sous enveloppe.

_A quel point le trouvez-vous utile ?_
Très utile, nous avons beaucoup de types de glisser-déposer. Garder la logique DnD dans les composants a aidé notre cerveau à gérer toute la complexité.

_À quelle fréquence rencontrez-vous des problèmes avec, et à quel point sont-ils frustrants ?_
Nous avons quelques problèmes de performances en raison du volume considérable de cibles de chute que nous enregistrons. Sinon ça marche très bien !

_Quelles sont les fonctionnalités qui vous intéressent ?_
Performances et compatibilité SVG.

Pouvez-vous joindre quelques captures d'écran de votre produit ?
Pas en entier, mais cela vous donnera une idée du problème que nous essayons de résoudre avec React-DnD.

screenshot

L'application fonctionne comme un éditeur de carte de jeu de stratégie. Vous pouvez faire glisser et déposer de nouveaux éléments sur la carte en fonction d'un certain nombre de règles et déplacer également des éléments sur la carte. Nous ne construisons pas un jeu en ligne, nous utilisons plutôt certaines des idées pour résoudre d'autres problèmes de cartographie (encore une fois, je ne peux pas encore le mentionner).

Merci beaucoup pour cette superbe bibliothèque !

C'est une bouée de sauvetage si vous utilisez React et que vous devez faire des choses mdn. Bon travail!

J'utilise React DND dans notre logiciel de gestion des transports . jusqu'à présent, je n'ai eu aucun problème.

l'utilisateur fait glisser les arrêts de livraison et les voit directement sur une carte avec les distances calculées.

tourstopmap

Dans quels produits utilisez-vous React DnD ?

CMS basé sur des blocs Drag-and-Dropy (encore une autre version bêta interne, lancée pour un client en avril)

À quel point le trouvez-vous utile ?

Immensément. Bien que l'API ne soit pas _exactement_ aussi simple que certains autres composants tiers, elle est super puissante et vous permet vraiment de faire tout ce dont vous avez besoin.

À quelle fréquence avez-vous des problèmes avec cela, et à quel point sont-ils frustrants ?

Rarement et pas très frustrant.

Quelles sont les fonctionnalités qui vous intéressent ?

Stabilité et résistance aux balles multi-navigateurs.

Pouvez-vous joindre quelques captures d'écran de votre produit ?

dnd-cms

Dans quels produits utilisez-vous React DnD ?

Nous utilisons React DnD dans l'application Web Asana , pour tous les endroits où nous utilisons le glisser-déposer. Notez que nous réécrivons actuellement notre application à partir de notre framework Luna interne vers React, et utilisons React DnD lors de la réécriture dans tous les endroits où nous utilisons le glisser-déposer.

À quel point le trouvez-vous utile ?

Nous l'avons trouvé très utile. L'API est facile à utiliser et nous permet d'avoir une séparation claire des préoccupations en gardant le glisser-déposer contenu dans quelques composants.

À quelle fréquence avez-vous des problèmes avec cela, et à quel point sont-ils frustrants ?

En dehors de la montée en puissance initiale, nous n'avons pas souvent de problèmes avec cela. Nous utilisons React DnD avec TypeScript, et je pense que l'écriture des définitions de type a réduit la période de montée en puissance pour nous (puisque nous avons dû explorer l'intégralité de l'API dans le processus). Maintenant, nos problèmes concernent généralement les tests (par exemple, le nettoyage entre les tests, les aides internes pour travailler avec les composants décorés par le dnd, etc.). C'est parfois frustrant, mais moins maintenant que nous avons des composants à usage général à utiliser ou des exemples de composants sur lesquels baser les futurs.

Quelles sont les fonctionnalités qui vous intéressent ?

Performance, séparation des préoccupations, testabilité

Pouvez-vous joindre quelques captures d'écran de votre produit ?

Drag to subtask
Dashboards

@epelz Vous devriez probablement demander à Asana de le parrainer sinon le projet va ralentir

soit https://github.com/Asana ou https://github.com/FogCreek , qui font Trello qui utilise def react-dnd, pourraient être d'excellents sponsors.

@gaearon mieux encore que Facebook le parraine

Dans quels produits utilisez-vous React DnD ?

La prochaine génération de notre interface utilisateur.

À quel point le trouvez-vous utile ?

Extrêmement! J'aime les docs mais il pourrait utiliser plus d'exemples du monde réel.

À quelle fréquence avez-vous des problèmes avec cela, et à quel point sont-ils frustrants ?

Je viens de rencontrer un problème lors de la décoration d'un composant avec DragSource qui empêche la méthode componentWillUpdate de s'exécuter lorsque les accessoires changent. Super frustrant donc je suppose que je devrais signaler un bogue. Je suppose que c'est moi et pas toi. ;)

Quelles sont les fonctionnalités qui vous intéressent ?

Performance, stabilité et support tactile.

Pouvez-vous joindre quelques captures d'écran de votre produit ?

Pas encore, j'en ai peur, mais pensez aux listes en réorganisant et en y faisant glisser des éléments à partir de nouvelles listes. Assez simple par rapport aux autres exemples ici.

Dans quels produits utilisez-vous React DnD ?

Chez @teleport , nous utilisons React DnD dans notre produit Zen (liste de contrôle mobile) pour réorganiser et catégoriser les tâches.

De plus, nous venons de créer un composant d'arborescence réutilisable react -dnd-treeview avec prise en charge DnD implémenté à l'aide de React DnD pour une utilisation dans un projet actuellement interne. Nous avons d'abord utilisé react-ui-tree , mais nous n'avons pas pu obtenir le bon UX, et nous avons eu une expérience positive avec React DnD, nous avons donc implémenté le nôtre. Le composant n'en est qu'à ses débuts, il n'y a donc pas encore de documentation, de CI, etc., mais tout commentaire serait le bienvenu !

À quel point le trouvez-vous utile ?

Bien qu'il ait fallu un certain temps pour comprendre le modèle, le design est vraiment propre et nous avons pratiquement décidé de l'utiliser partout où nous aurions besoin de DnD. Donc, très utile.

À quelle fréquence avez-vous des problèmes avec cela, et à quel point sont-ils frustrants ?

Jusqu'à présent, nous avons eu 2 problèmes :

  • obtenir le bon UX avec le backend tactile (y compris les performances)
  • Au départ, j'ai essayé d'implémenter la logique de zone de dépôt dans JS, mais je me suis retrouvé dans l'incapacité d'obtenir les bonnes coordonnées relatives à la cible (pour déterminer s'il fallait passer au-dessus ou en dessous de la cible) hors de React DnD, j'ai finalement décidé de créer des éléments DOM superposés séparés. comme cibles de dépôt.

Quelles sont les fonctionnalités qui vous intéressent ?

Performance, masquant les bizarreries des navigateurs/plateformes sous-jacents.

Pouvez-vous joindre quelques captures d'écran de votre produit ?

Téléporter ZEN :

réagir-dnd-treeview :

Dans quels produits utilisez-vous React DnD ?
Discord - https://discordapp.com - Un chat vocal et textuel pour les joueurs

À quel point le trouvez-vous utile ?
Très!

À quelle fréquence avez-vous des problèmes avec cela, et à quel point sont-ils frustrants ?
Rarement, 5/10 frustrant.

Quelles sont les fonctionnalités qui vous intéressent ?
Toutes les fonctionnalités actuelles.

Nous avons presque utilisé react-dnd pour le client de bureau Slack , mais nous nous sommes malheureusement heurtés à deux limitations qui se sont avérées être des facteurs décisifs :

  1. Il n'est pas possible de personnaliser la logique de glissement (c'est-à-dire la logique qui calcule l'état du glissement, comme lorsqu'un glissement est en cours).

    • Il est très facile de changer les composants en réponse aux changements d'accessoires injectés à partir de l'état de glissement. Il est également assez simple de personnaliser l'aperçu du glissement avec un composant React personnalisé. Mais malheureusement, les données que vous attachez à l'opération de glissement ne peuvent qu'attacher et suivre le curseur. Cela empêche une expérience utilisateur comme celle que nous avons actuellement avec notre barre latérale, où vous pouvez faire glisser les icônes d'équipe pour les réorganiser, et ces glissements sont limités à l'axe y uniquement. Avec react-dnd, vous pouvez facilement contraindre un aperçu de glissement à un axe, mais il est impossible de contraindre les données attachées au curseur lorsque vous faites glisser. Cela signifie que si vous éloignez le curseur de la barre latérale horizontalement, mais que le curseur est toujours verticalement "au-dessus" d'une cible de dépôt, react-dnd ne laissera pas la cible de dépôt répondre du tout. (voir GIF ci-dessous pour le comportement que nous avons actuellement sans react-dnd 👇 )

      untitled

  2. L'utilisation d'un calque de glissement personnalisé bloque la boucle de rendu régulière de React si vous faites des choses sur hover . Étant donné que vous devez créer un composant React supplémentaire si vous voulez un calque de glissement personnalisé, et que ce calque de glissement fonctionne en modifiant sa position en réponse aux changements de props des moniteurs dnd, render() finit par obtenir appelé _beaucoup_. Ce n'est un problème que si vous prévoyez de restituer d'autres composants (probablement d'autres cibles de dépôt) sur hover lorsque vous faites glisser votre DragSource. Nous avons réussi à atténuer quelque peu ce problème en changeant d'état sur hover manière asynchrone et en revenant tôt au survol si la cible de dépôt n'avait pas changé, mais il y avait toujours un décalage notable lors du changement des cibles de dépôt pendant le survol.

J'espère que ces commentaires sont utiles ! J'ai aimé travailler avec react-dnd pendant que je cherchais à l'utiliser dans l'application Slack, et j'aimerais le voir surmonter ces limitations si possible.

Dans quels produits utilisez-vous React DnD ?

Nous l'utilisons dans tylio , une nouvelle façon de créer des pages Web. React-dnd est au centre de la page où vous téléchargez votre contenu.

À quel point le trouvez-vous utile ?

Très utile; Il est un peu difficile de s'y retrouver au début, car vous devez comprendre toutes les pièces mobiles à la fois, mais une fois qu'il clique, vous êtes prêt à partir.

À quelle fréquence avez-vous des problèmes avec cela, et à quel point sont-ils frustrants ?

Notre cas est assez complexe, car nous réorganisons et déplaçons des articles de différentes tailles, et nous ne voulons pas qu'ils fassent volte-face. J'ai eu quelques problèmes avec, mais je suppose que c'était plus avec la façon de l'utiliser que la bibliothèque elle-même.

Quelles sont les fonctionnalités qui vous intéressent ?

Quasiment tous ! Nous utilisons différents types de sources de glisser et de cibles de dépôt, des fichiers/urls/texte natifs, HTML5 et un backend tactile avec une couche de glissement personnalisée.

Pouvez-vous joindre quelques captures d'écran de votre produit ?

capture d ecran 2016-07-07 a 10 35 58

Si quelqu'un l'utilise avec Typescript, pourriez-vous fournir un exemple de base ? Je suis resté avec cette erreur :

decorateHandler.js:13 Uncaught TypeError: Cannot call a class as a function

Je l'utilise de cette manière :

@DragSource(ItemTypes.IDEA,ideaSource,(connect:DragSourceConnector, monitor: DragSourceMonitor)=>{ return { connectDragSource:connect.dragSource(), isDragging:monitor.isDragging() }; })(Idea) export class Idea extends React.Component<IIdeaProps,{}>{...}

Je ne sais pas s'il est trop tard pour intervenir, mais je voulais donner quelques commentaires (j'espère constructifs).

J'ai trouvé React-DnD quelque peu difficile à saisir (et à mettre en œuvre). Il comporte de nombreuses pièces mobiles et la configuration est assez compliquée. J'espérais avoir quelque chose de plus "plug-n-play". Et c'est peut-être parce qu'il essaie d'être beaucoup de choses différentes (cibles de glisser/déposer, réorganisation de la liste, etc.). Mais j'ai fini par adopter une approche différente, qui consistait essentiellement à mettre des boutons haut / bas sur chaque élément et à les réorganiser de cette façon, combinés à réagir-retourner-déplacer pour animer le mouvement.

J'aimerais voir un fork de ceci qui se concentre uniquement sur la réorganisation des listes, et le maintient _super_ simple pour le faire fonctionner.

Nous commençons à l'utiliser sur un produit propriétaire à grande échelle construit à l'aide de React et Redux. Nous utilisons react-dnd pour gérer les aspects glisser-déposer de tout, à l'exception des éléments SVG dans l'application. Il a juste la bonne couche d'abstraction. En fait, nous avons quelque chose de très similaire en interne pour le code antérieur à React et il est soutenu par des événements de souris.

La seule chose que je souhaite que react-dnd ait est un backend basé sur les événements de la souris, donc cela fonctionne également pour les éléments SVG.

Au fait, je suis en train d'écrire une définition de flowtype basée sur sa définition TypeScript , car celle existante sur flow-typé est incomplète.

Wow, beaucoup d'entrées ! C'est beaucoup de données à parcourir ! Je vais clôturer ce sujet. Merci à tous d'avoir pris le temps de soumettre des commentaires!

Je prévois de mettre à jour une partie de la documentation dans les prochaines semaines, et l'une de mes pensées est de créer une vitrine pour les projets et les applications utilisant React DND. Je créerai un numéro de suivi pour capturer ces projets lorsque j'aurai le temps de prendre le projet en charge !

💜

@mnquintana Commentaires très intéressants - vous et l'équipe avez-vous fini par utiliser une autre bibliothèque de glisser-déposer ou avez-vous simplement créé quelque chose à partir de rien ?

@mnquintana serait vraiment génial d'apprendre ce que vous avez fait pour surmonter cela, ou mieux encore, que Slack publie sa bibliothèque dnd !

@epelz Besoin de votre aide. Avez-vous créé un composant de glisser-déposer réutilisable pour faire glisser les cartes dans le tableau de bord et les éléments de la liste ou en utilisant un composant séparé pour les cartes et la liste. J'apprécierais vraiment si vous pouviez répondre.

Je sais que c'est un fil de discussion assez ancien mais je voulais quand même contribuer. Evernote
🐘 utilise react-dnd en ce moment pour notre nouveau produit Spaces pour les entreprises ! Nous avons beaucoup appris et pourrions essayer de partager ce que nous avons appris si les gens sont intéressés :)

Dans quels produits utilisez-vous React DnD ?
https://evernote.com/business

À quel point le trouvez-vous utile ?
Très utile! C'était une courbe d'apprentissage abrupte, mais nous l'avons fait faire la plupart de ce que nous voulons faire.

À quelle fréquence avez-vous des problèmes avec cela, et à quel point sont-ils frustrants ?
J'ai l'impression qu'il y a de grosses barrières pour les débutants et que certaines choses sont intéressantes à gérer. Certains bogues concernant les effets de survol et de dépôt nous ont rendus assez confus, mais en y regardant de plus près, il semble que certains d'entre eux ne soient que des limitations avec l'implémentation native du glisser/déposer de HTML5 (les effets de dépôt semblent spécifiquement remplacer le curseur que vous souhaitez appliquer afin que nous puissions ' Ne tirez pas parti de choses comme cursor: no-drop C'est vraiment intelligent que vous l'ayez fait pour que vous puissiez implémenter vos propres backends si nécessaire et nous ne nous sommes pas encore aventurés à expérimenter avec le backend tactile.

Nous avons passé un moment intéressant à nous accrocher aux autorisations. Notre glisser-déposer pour les notes nécessite beaucoup de choses pour savoir si nous pouvons déplacer et/ou déposer quelque chose. Nous avons également constaté que nous devions réimplémenter le fade-out-drag-back natif vers l'élément DOM principal lorsqu'il n'a pas trouvé d'endroit où nous déposer dans notre CustomDragLayer (cela pourrait être un exemple auquel nous pouvons contribuer).

Quelles sont les fonctionnalités qui vous intéressent ?
Nous cherchons à implémenter plusieurs glisser-déposer et il ne semble pas qu'il existe un moyen propre de le faire avec React-Dnd d'après ce que nous savons ? Nous y cherchons cependant plus. Lorsque nous plongerons plus profondément, nous partagerons plus.

apr-06-2018 13-26-25

@augbog ne sais pas si vous l'avez essayé, mais avez-vous examiné l'implémentation de gaeron dans le premier message du numéro 14 et l'utilisation d'un calque de glissement personnalisé?

D'une certaine manière, ce scénario est déjà possible : les consommateurs peuvent suivre manuellement les éléments sélectionnés, définir dragPreview sur une sorte d'espace réservé Image générique et réagir de manière appropriée à la suppression (en ce qui concerne la logique métier) de plusieurs éléments.

https://react-dnd.github.io/react-dnd/examples-drag-around-custom-drag-layer.html

Merci @JM-Mendez ouais, nous avons vu cela et nous étions préoccupés par le commentaire de suivi concernant le fait que plusieurs composants étaient conscients qu'ils étaient traînés, mais après l'avoir relu, cela peut ne pas nous affecter, nous sommes donc toujours en train de l'examiner :) Merci pour l'appel à ce sujet !

Toujours pas de backend pour le cross iframe DnD ou la fenêtre parente vers la draggabilité de l'iframe enfant. @gaearon J'ai vu votre commentaire concernant ce problème sur quelques fils, je voudrais dire que c'est la seule raison pour laquelle j'ai dû utiliser une solution js pure pour mon projet.

(Modifier) ​​Je pense que c'est une fonctionnalité très utile pour quiconque essaie de créer un générateur de page par glisser-déposer.

Cette page vous a été utile?
0 / 5 - 0 notes