React-dnd: Wer verwendet React DnD?

• Projekt: https://github.com/WikiEducationFoundation/WikiEduDashboard
• Nützlichkeit: Sehr
• Probleme: Zustandsgesteuerte Animationen waren der schwierigste Teil. Ich endete mit einer Kombination aus React-Motion- und React-CSS-Übergangsgruppen. Dann musste ich einen zusätzlichen Zustand für Dinge verwalten, die sich mitten in der Animation befanden, um zu verhindern, dass sie während der Animation Drop-Ziele waren. Am Ende habe ich https://github.com/yahoo/react-dnd-touch-backend verwendet, das seine eigenen Probleme hatte (Text wird während des Ziehens ausgewählt), aber _während_ von Animationen besser kontrollierbar war. Ich habe wahrscheinlich ~4 Arbeitstage für diese Funktion und die richtigen Animationen aufgewendet, was in einer nicht reagierenden App wahrscheinlich erheblich weniger Zeit in Anspruch genommen hätte.

_- In welchen Produkten verwenden Sie React DnD?_

Ich verwende es in verschiedenen Apps (Kanban-Board, Branchenanwendungen)

_- Wie nützlich finden Sie es?_

Vor React DnD habe ich alle DnD-Lösungen ausprobiert, die ich finden konnte, sowohl React- als auch Jquery-basierte, und React DnD ist meilenweit voraus.

_- Wie oft haben Sie Probleme damit und wie frustrierend sind sie?_

Seit 1.0 habe ich keine Probleme mehr. Beachten Sie, dass ich auf meinen Produkten nur moderne Browser unterstütze.

_- Welche Funktionen interessieren Sie?_

Ich nutze alle Features in verschiedenen Kombinationen in verschiedenen Bereichen.

_- Können Sie ein paar Screenshots Ihres Produkts anhängen?_

Ich habe es gerade gestern in ein privates Projekt integriert (ich kann im Moment keine Bildschirme geben, sorry), und ich fand die vorhandene Dokumentation großartig. Der Ansatz ist sauber, leicht verständlich, einfach zu erweitern und insgesamt freundlich.

Ich habe ehrlich gesagt keine Probleme mit dem Kit gehabt. Ich denke, seine Einfachheit ist wirklich das größte Merkmal, und es ermutigt Leute, die es verwenden, sich an Best Practices wie HOCs zu orientieren.

In welchen Produkten verwenden Sie React DnD?

Wir verwenden es in unserer neuen Webkonsole bei Treasure Data. Ich habe es auch für private Projekte verwendet.

Wie nützlich finden Sie es?

Sehr hilfreich. Es ist einfach die beste Drag-and-Drop-Bibliothek, die ich je verwendet habe. Ich bin sehr zuversichtlich, dass damit anspruchsvolle Drag-and-Drop-Interaktionen problemlos implementiert werden können.

Wie oft haben Sie Probleme damit und wie frustrierend sind sie?

Jedes Mal, wenn ich die Bibliothek verwende, brauche ich eine Weile, um mich daran zu erinnern, wie alles zusammenhängt: wo jedes Teil hingehört und was es tut. Dies passiert auch nach mehrmaligem Gebrauch.

Vielleicht würde eine Visualisierung, die alle Teile zeigt, das Erinnern erleichtern.

Insgesamt scheint die Bibliothek alles zu tun, was ich brauche.

Welche Funktionen liegen Ihnen am Herzen?

Prüfbarkeit! Meine bisherigen Erfahrungen mit Drag & Drop waren ziemlich schlecht, und niemand hat ihren Drag & Drop-bezogenen Code getestet.

Ich habe keinerlei mobilen Support durchgeführt, aber ich weiß nicht, wie ich sowohl Desktop als auch Mobile ansprechen soll.

Ich habe „ react-dnd-touch-backend“ gesehen, aber ich weiß nicht, wie ich beide mischen würde.

Können Sie ein paar Screenshots Ihres Produkts anhängen?

https://gfycat.com/ScientificEvilAmericanbadger

Das ist im Grunde nur meine Spielerei. React-dnd macht es trivial, die File-Drop-Zone zu implementieren.

In welchen Produkten verwenden Sie React DnD?

codecks.io befindet sich noch in der Entwicklung, steht aber kurz vor dem frühen Zugriff

Wie nützlich finden Sie es?

Viel. Das Normalisieren des Browserverhaltens und das Anbieten eines Reaktionsansatzes für dnd machen diese Bibliothek für mich zu einem Kinderspiel

Wie oft haben Sie Probleme damit und wie frustrierend sind sie?

Die Dokumentation ist großartig, aber als ich anfing, damit zu arbeiten, stieß ich auf überraschende Probleme, bei denen es nicht ohne Fehlermeldungen funktionierte, ich es nicht zuverlässig reproduzieren konnte, aber wahrscheinlich mit Null-Höhen-Drag-Targets zu tun hatte.

Welche Funktionen liegen Ihnen am Herzen?

Browser-Normalisierung, Unterstützung für Touch-Interaktionen

Können Sie ein paar Screenshots Ihres Produkts anhängen?

https://gfycat.com/CleanLegitimateAracari

Ich habe React DnD in meiner Doktorarbeit an einer Suchmaschine für medizinische Bildgebungsarchive verwendet. Es erlaubt mir, Suchergebnisse zu ziehen, um Teil der Abfrage zu werden (was ähnliche Bilder ergibt). Hätte es keine Bibliothek wie diese gegeben, hätte ich mit der HTML5-API herumspielen und sicherstellen müssen, dass sie neben React gut funktioniert. Alles, was mich auf wichtigere Dinge konzentrieren lässt, ist Gold!

Ich hatte keine ernsthaften Probleme, aber der Übergang von 0.x zu 1.x war sehr verwirrend und ein gutes Beispiel dafür, dass dist-Tags nicht richtig verwendet wurden (1.0.0-rc wurde als latest ohne Aktualisierung veröffentlicht Dokumentation). Das ist sowieso alles Wasser unter der Brücke. :)

1.0.0-rc wurde als neueste Version ohne aktualisierte Dokumentation veröffentlicht

Ja, das war, bevor ich gelernt habe, wie Dist-Tags funktionieren. :Freude:

In welchen Produkten verwenden Sie React DnD?

Verwenden Sie es für ein Kundenprojekt mit vielen Drag-and-Drop-Interaktionen. Einige der bemerkenswerten Komponenten sind:

• Eine Baumansicht, in der Sie Knoten sortieren und verschachteln können
• Eine Listen-/Kartenansicht ähnlich wie Trello unterstützt nur das Sortieren.

Es ist auch ein Kollaborationstool, sodass die meisten Schnittstellenaktualisierungen an einen Socket-Server gesendet werden.

Wie nützlich finden Sie es?

Sehr nützlich, es ist sehr einfach, die Ziehlogik von Ihrer Komponente zu trennen und einzeln zu testen.

Wie oft haben Sie Probleme damit und wie frustrierend sind sie?

Wir haben viele Probleme mit der Baumansicht, die Verschachtelung und Sortierung unterstützt,

Eines der größeren Probleme, auf die wir gestoßen sind, war die Implementierung der Baumansicht, die Verschachtelung und Sortierung unterstützt.

Wir haben verschiedene Arten von Knoten (Ordner, Listen). Ein Benutzer kann entweder etwas in einem Ordner ablegen, wodurch es verschachtelt wird, oder es unter oder über einem anderen Knoten sortieren. Diese Interaktion ist mit viel Flackern, etwas fehlerhaftem Verhalten und gelegentlichem Leistungsabfall verbunden. Siehe dieses Video: http://s.2to1.be/fAtX ,

Die Funktionsweise ist wie folgt:

1. Der Benutzer beginnt, einen Knoten zu ziehen, der Knoten bleibt an seiner Position
2. Benutzer bewegt den Mauszeiger über einen Knoten -> zeigt einen Indikator der neuen Position an, die Position davon wird mit einer Redux-Aktion versendet. (der gesamte Baum ist Teil des Anwendungsstatus).
3. Der Benutzer beendet das Ziehen, wodurch eine Aktion ausgelöst wird, die die neue Position des Knotens auf dem Server beibehält und an alle verbundenen Socket-Clients überträgt.

Derzeit verwenden wir etwas Mathematik (eine Variation des sortierbaren Beispiels in diesem Repo), um zu berechnen, ob sich ein Knoten auf oder unter/über einem Ordner befindet oder nicht. Anfangs habe ich versucht, die Komponente Folder zu DropTarget zu machen, aber das hat nicht funktioniert, weil ich dann die anderen Node DropTarget nicht sortieren konnte

Welche Funktionen liegen Ihnen am Herzen?

• Testbarkeit
• Backends auswechseln
• Sich in Ereignisse einklinken
• Browserunterstützung

Können Sie ein paar Screenshots Ihres Produkts anhängen?

Siehe das Video oben

Ich habe React-dnd erst letzte Woche zu einer (noch zu veröffentlichenden) Bildungs-Web-App hinzugefügt. Es ist erstaunlich! Vielen Dank für Ihre Arbeit!

Der größte Gewinn meiner Meinung nach ist, dass „react-dnd“ genau die richtige Abstraktionsebene für die Verwaltung der DnD-Funktionalität in der gesamten App bietet.

Abgesehen davon, dass ich die umständliche Kombination isolierter Einheits-Drag-Komponenten (sortierbar usw.) loswerden konnte, konnte ich innerhalb weniger Stunden einige Drag-basierte Funktionen hinzufügen, die ich zuvor als zu kompliziert abgeschrieben hatte sich lohnt (z. B. eine Karte ziehen, um sie innerhalb ihrer Liste neu zu sortieren ODER auf ein Benutzerlistensymbol ziehen, um eine Benutzerliste anzuzeigen, und sie dann auf dem entsprechenden Benutzer ablegen).

Das einzige Problem, auf das ich bisher gestoßen bin, war das Touch-Backend, aber ich konnte einen schnellen Hack machen, um voranzukommen, und jemand kommentierte, dass sie an einem allgemeineren Pull-Request arbeiten.

Das Hauptmerkmal, das mir angesichts der bereits wunderbaren API am Herzen liegt, ist die solide Touch-Unterstützung.

Apropos, warum ich keine Pull-Requests für Open-Source-Projekte mache (jedenfalls bis jetzt) ​​... Ich bin Designer. Obwohl ich zum Beispiel dieses Tool verwende, denkt mein Kopf natürlich über ganz andere Probleme nach. Abgesehen davon, dass ich einfach nicht gut darin bin, Probleme zu lösen, die in solchen Bibliotheken auftreten, ist das wirklich nicht die Art von Arbeit, die ich normalerweise mache, und ich würde meiner Lösung nicht "vertrauen". Ich weiß, dass hier ein gewisses Maß an Egoismus vorhanden ist, aber ich kann mir vorstellen, dass es mehr als ein paar Designer gibt, die zufällig auch in der Frontend-Entwicklung programmieren und so handeln. Ich bin sehr dankbar für Leute wie Sie, die bereit sind, Designern wie mir mit Tools zu helfen, die die Komplexität der App-Entwicklung enger mit der Komplexität des Produktdesigns in Einklang bringen, sodass der Wechsel zwischen den Domänen weniger störend ist.

Zu Ihrer Information, ich verwende React-Dnd in Kombination mit React-Flip-Move, um Layoutänderungen zu animieren. Es ist erst ein paar Tage her, aber sie scheinen großartig zusammen zu passen.

@arstin

Das hat meinen Tag total versüßt. :Herz:

_In welchen Produkten verwenden Sie React DnD?_
Produkt ist noch unter Verschluss.

_Wie nützlich finden Sie es?_
Sehr nützlich, wir haben viele Drag-and-Drop-Typen. Die Beibehaltung der DnD-Logik innerhalb der Komponenten hat unserem Gehirn geholfen, die gesamte Komplexität zu bewältigen.

_Wie oft haben Sie Probleme damit und wie frustrierend sind sie?_
Wir haben einige Probleme mit der Leistung aufgrund der schieren Menge an Drop-Targets, die wir registrieren. Ansonsten funktioniert es super!

_Welche Funktionen interessieren Sie?_
Leistung und SVG-Kompatibilität.

Können Sie ein paar Screenshots Ihres Produkts anhängen?
Nicht vollständig, aber das gibt Ihnen eine Vorstellung von dem Problem, das wir mit React-DnD zu lösen versuchen.

Die Anwendung funktioniert wie ein Karteneditor für Strategiespiele. Sie können neue Elemente basierend auf einer Reihe von Regeln per Drag & Drop auf die Karte ziehen und Elemente auch auf der Karte verschieben. Wir bauen kein Online-Spiel, sondern verwenden einige der Ideen, um andere Mapping-Probleme zu lösen (wieder kann ich das noch nicht erwähnen).

Vielen, vielen Dank für eine tolle Bibliothek!

Dies ist ein Lebensretter, wenn Sie React verwenden und dnd-Sachen erledigen müssen. Gute Arbeit!

Ich verwende React DND in unserer Transportmanagementsoftware . bisher hatte ich überhaupt keine probleme.

der Nutzer zieht die Lieferstopps herum und sieht sie direkt auf einer Karte mit den errechneten Entfernungen.

In welchen Produkten verwenden Sie React DnD?

Blockbasiertes Drag-and-Dropy-CMS (noch eine weitere interne Beta-Version, die im April für einen Kunden eingeführt wird)

Wie nützlich finden Sie es?

Immens. Obwohl die API nicht _exakt_ so unkompliziert ist wie einige andere Komponenten von Drittanbietern, ist sie super leistungsfähig und lässt Sie wirklich tun, was immer Sie brauchen.

Wie oft haben Sie Probleme damit und wie frustrierend sind sie?

Selten und nicht sehr frustrierend.

Welche Funktionen liegen Ihnen am Herzen?

Stabilität und Cross-Browser-Bullet-Proofness.

Können Sie ein paar Screenshots Ihres Produkts anhängen?

In welchen Produkten verwenden Sie React DnD?

Wir verwenden React DnD in der Asana -Webanwendung für alle Stellen, an denen wir Drag-and-Drop verwenden. Beachten Sie, dass wir derzeit unsere Anwendung von unserem hauseigenen Luna-Framework auf React umschreiben und React DnD während des Umschreibens an allen Stellen verwenden, an denen wir Drag-and-Drop verwenden.

Wie nützlich finden Sie es?

Wir fanden es sehr nützlich. Die API ist einfach zu handhaben und ermöglicht uns eine klare Trennung von Anliegen, indem Drag-and-Drop in wenigen Komponenten enthalten ist.

Wie oft haben Sie Probleme damit und wie frustrierend sind sie?

Abgesehen vom anfänglichen Hochfahren haben wir nicht oft Probleme damit. Wir verwenden React DnD mit TypeScript, und ich denke, das Schreiben der Typdefinitionen hat die Anlaufphase für uns verkürzt (da wir dabei die gesamte API erkunden mussten). Jetzt drehen sich unsere Probleme im Allgemeinen um das Testen (z. B. Aufräumen zwischen den Tests, interne Helfer, um mit den dnd-dekorierten Komponenten zu arbeiten, und so weiter). Das ist manchmal frustrierend, aber jetzt weniger, da wir einige allgemein verwendbare Komponenten oder Beispielkomponenten haben, auf denen zukünftige aufbauen können.

Welche Funktionen liegen Ihnen am Herzen?

Leistung, Trennung von Bedenken, Testbarkeit

Können Sie ein paar Screenshots Ihres Produkts anhängen?

@epelz Du solltest wahrscheinlich Asana holen, um es zu sponsern, sonst wird das Projekt langsamer

entweder https://github.com/Asana oder https://github.com/FogCreek , die Trello herstellen, das auf jeden Fall „react-dnd“ verwendet, könnten großartige Sponsoren sein.

@gaearon besser noch von Facebook sponsern lassen

In welchen Produkten verwenden Sie React DnD?

Die nächste Generation unserer Benutzeroberfläche.

Wie nützlich finden Sie es?

Äußerst! Ich mag die Dokumentation, aber es könnte mehr Beispiele aus der realen Welt verwenden.

Wie oft haben Sie Probleme damit und wie frustrierend sind sie?

Beim Dekorieren einer Komponente mit DragSource ist gerade ein Problem aufgetreten, das verhindert, dass die Methode „componentWillUpdate“ ausgeführt wird, wenn sich Props ändern. Super frustrierend, also denke ich, ich sollte einen Fehler melden. Ich vermute allerdings, dass ich es bin und nicht du. ;)

Welche Funktionen liegen Ihnen am Herzen?

Leistung, Stabilität und Berührungsunterstützung.

Können Sie ein paar Screenshots Ihres Produkts anhängen?

Noch nicht, fürchte ich, aber denken Sie an Listen mit Neuordnung und Ziehen von Sachen aus neuen Listen. Ganz einfach im Vergleich zu den anderen Beispielen hier.

In welchen Produkten verwenden Sie React DnD?

Wir bei @teleport verwenden React DnD in unserem Zen -Produkt (Moving Checklist), um die Aufgaben neu zu ordnen und zu kategorisieren.

Außerdem haben wir gerade eine wiederverwendbare Baumansichtskomponente „ react-dnd- treeview“ mit DnD-Unterstützung erstellt, die mithilfe von React DnD für die Verwendung in einem derzeit internen Projekt implementiert wurde. Wir haben zuerst React -ui-tree verwendet, konnten aber die UX nicht richtig hinbekommen, und wir hatten positive Erfahrungen mit React DnD, also haben wir unsere eigene implementiert. Die Komponente befindet sich in einem sehr frühen Stadium, daher gibt es noch keine Dokumentation, CI usw., aber Feedback wäre willkommen!

Wie nützlich finden Sie es?

Obwohl es einige Zeit gedauert hat, das Modell zu verstehen, ist das Design wirklich sauber und wir haben uns so ziemlich entschieden, es überall dort einzusetzen, wo wir DnD brauchen würden. Also sehr nützlich.

Wie oft haben Sie Probleme damit und wie frustrierend sind sie?

Bisher hatten wir 2 Probleme:

• Die richtige Drag UX mit Touch-Backend (einschließlich Leistung)
• Anfangs habe ich versucht, die Drop-Area-Logik in JS zu implementieren, blieb aber damit hängen, dass ich nicht in der Lage war, die richtigen zielrelativen Koordinaten (um zu bestimmen, ob über oder unter das Ziel fallen soll) aus React DnD herauszuholen, und entschied mich schließlich, separate überlagernde DOM-Elemente zu erstellen als Drop-Targets.

Welche Funktionen liegen Ihnen am Herzen?

Leistung, Verbergen der Macken der zugrunde liegenden Browser/Plattformen.

Können Sie ein paar Screenshots Ihres Produkts anhängen?

Teleport-Zen:

reagieren-dnd-Baumansicht:

In welchen Produkten verwenden Sie React DnD?
Discord – https://discordapp.com – Ein Sprach- und Text-Chat für Gamer

Wie nützlich finden Sie es?
Sehr!

Wie oft haben Sie Probleme damit und wie frustrierend sind sie?
Gelegentlich 5/10 frustrierend.

Welche Funktionen liegen Ihnen am Herzen?
Alle aktuellen Funktionen.

Wir hätten beinahe „react-dnd“ für den Slack -Desktop-Client verwendet, sind aber leider auf zwei Einschränkungen gestoßen, die sich als Dealbreaker erwiesen haben:

1. Es ist nicht möglich, die Ziehlogik anzupassen (d. h. die Logik, die den Ziehzustand berechnet, z. B. wenn ein Ziehen im Gange ist).
   
   
   
   • Es ist super einfach, Komponenten als Reaktion auf die sich ändernden Requisiten zu wechseln, die aus dem Schleppzustand injiziert werden. Es ist auch ziemlich einfach, die Drag-Vorschau mit einer benutzerdefinierten React-Komponente anzupassen. Aber leider können Daten, die Sie an den Ziehvorgang anhängen, nur anhängen und dem Cursor folgen. Dies verhindert eine Benutzererfahrung, wie wir sie derzeit mit unserer Seitenleiste haben, in der Sie Teamsymbole verschieben können, um sie neu anzuordnen, und diese Ziehvorgänge nur auf die Y-Achse beschränkt sind. Mit React-Dnd können Sie eine Drag- Vorschau problemlos auf eine Achse beschränken, aber es ist unmöglich, die an den Cursor angehängten Daten beim Ziehen einzuschränken. Das bedeutet, dass, wenn Sie den Cursor horizontal von der Seitenleiste wegbewegen, der Cursor sich aber immer noch vertikal „über“ einem Drop-Ziel befindet, reagieren-dnd das Drop-Ziel überhaupt nicht reagieren lässt. (siehe GIF unten für das Verhalten, das wir derzeit ohne reagieren-dnd haben 👇 )
     
     
   
   
2. Die Verwendung einer benutzerdefinierten Drag-Ebene blockiert die reguläre React-Renderschleife, wenn Sie Dinge auf hover tun. Da Sie eine zusätzliche React-Komponente erstellen müssen, wenn Sie eine benutzerdefinierte Drag-Ebene möchten, und diese Drag-Ebene funktioniert, indem sie ihre Position als Reaktion auf props Änderungen von den dnd-Monitoren ändert, wird render() am Ende rief _viel_ an. Dies ist nur ein Problem, wenn Sie vorhaben, andere Komponenten (höchstwahrscheinlich andere Ablageziele) auf hover neu zu rendern, während Sie Ihre DragSource herumziehen. Wir haben es geschafft, dies etwas abzumildern, indem wir den Status von hover asynchron geändert haben und beim Schweben früh zurückgekehrt sind, wenn sich das Drop-Ziel nicht geändert hat, aber es gab immer noch eine merkliche Verzögerung beim Ändern der Drop-Ziele während des Schwebens.

Hoffentlich ist dieses Feedback hilfreich! Ich habe es genossen, mit „react-dnd“ zu arbeiten, während ich nach einer möglichen Verwendung in der Slack-App gesucht habe, und ich würde gerne sehen, dass es diese Einschränkungen nach Möglichkeit überwindet.

In welchen Produkten verwenden Sie React DnD?

Wir verwenden es in tylio , einer neuen Methode zum Erstellen von Webseiten. React-dnd befindet sich vorne und in der Mitte der Seite, auf der Sie Ihre Inhalte hochladen.

Wie nützlich finden Sie es?

Sehr hilfreich; Es ist anfangs etwas schwierig, sich darum zu kümmern, da Sie alle beweglichen Teile auf einmal verstehen müssen, aber sobald es klickt, können Sie loslegen.

Wie oft haben Sie Probleme damit und wie frustrierend sind sie?

Unser Fall ist ziemlich komplex, da wir Artikel unterschiedlicher Größe neu anordnen und verschieben, und wir möchten nicht, dass sie herumrutschen. Ich hatte einige Probleme damit, aber ich denke, es lag mehr an der Verwendung als an der Bibliothek selbst.

Welche Funktionen liegen Ihnen am Herzen?

So ziemlich alle! Wir verwenden verschiedene Arten von Drag-Quellen und Drop-Zielen, native Dateien / URLs / Text, HTML5 & Touch-Backend mit benutzerdefinierter Drag-Layer.

Können Sie ein paar Screenshots Ihres Produkts anhängen?

Wenn jemand es mit Typescript verwendet, könnten Sie ein einfaches Beispiel geben? Ich blieb bei diesem Fehler hängen:

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

Ich benutze es auf diese Weise:

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

Ich weiß nicht, ob es zu spät ist, um mich noch einzuschalten, aber ich wollte ein (hoffentlich konstruktives) Feedback geben.

Ich fand React-DnD etwas schwierig zu verstehen (und zu implementieren). Es hat viele bewegliche Teile und die Einrichtung ist ziemlich kompliziert. Ich hatte gehofft, etwas zu haben, das mehr "Plug-n-Play" ist. Und vielleicht liegt das daran, dass es versucht, viele verschiedene Dinge zu sein (Ziehen / Ablegen von Zielen, Neuordnen von Listen usw.). Aber am Ende habe ich einen anderen Ansatz gewählt, der im Grunde darin bestand, einfach Knöpfe an jedem Element anzubringen und auf diese Weise neu zu ordnen, kombiniert mit Reagieren-Flip-Move , um die Bewegung zu animieren.

Ich würde gerne einen Fork davon sehen, der sich ausschließlich auf die Neuordnung von Listen konzentriert und es _super_ einfach hält, es zum Laufen zu bringen.

Wir fangen an, es in einem großen proprietären Produkt zu verwenden, das mit React und Redux erstellt wird. Wir verwenden React-dnd, um die Drag-and-Drop-Aspekte aller Dinge außer SVG-Elementen in der App zu verwalten. Es hat genau die richtige Abstraktionsschicht. Tatsächlich haben wir intern etwas sehr Ähnliches für Code, der älter als React ist und durch Mausereignisse unterstützt wird.

Das Einzige, was ich mir für React-Dnd wünsche, ist ein Backend, das auf Mausereignissen basiert, sodass es auch für SVG-Elemente funktioniert.

Übrigens bin ich dabei, eine Flowtype-Definition dafür zu schreiben, die auf ihrer TypeScript-Definition basiert, da die vorhandene auf flow-typed unvollständig ist.

Wow, viel Input! Das sind eine Menge Daten, die durchgegangen werden müssen! Ich werde dieses Thema schließen. Vielen Dank an alle, die sich die Zeit genommen haben, Kommentare einzureichen!

Ich plane, einen Teil der Dokumentation in den nächsten Wochen zu aktualisieren, und einer meiner Gedanken ist es, ein Schaufenster für Projekte und Anwendungen mit React DND zu erstellen. Ich werde eine Folgeausgabe erstellen, um diese Projekte festzuhalten, wenn ich dazu komme, das Projekt anzunehmen!

💜

@mnquintana Sehr interessantes Feedback – haben Sie und das Team letztendlich eine andere Drag-and-Drop-Bibliothek verwendet oder einfach etwas komplett von Grund auf neu erstellt?

@mnquintana wäre wirklich großartig zu erfahren, was Sie getan haben, um dies zu überwinden, oder noch besser, ihre dnd-Bibliothek von Slack veröffentlichen zu lassen!

@epelz Brauche deine Hilfe. Haben Sie eine wiederverwendbare Drag-and-Drop-Komponente erstellt, um die Karten in das Dashboard und die Elemente in die Liste zu ziehen, oder verwenden Sie eine separate Komponente für Karten und Listen. Ich würde mich sehr freuen, wenn Sie antworten könnten.

Ich weiß, dass dies ein ziemlich alter Diskussionsthread ist, wollte aber trotzdem etwas beitragen. Evernote
🐘 verwendet für unser neues Spaces-Produkt für Unternehmen gerade jetzt respond-dnd! Wir haben viel gelernt und könnten versuchen, das, was wir gelernt haben, zu teilen, wenn die Leute interessiert sind :)

In welchen Produkten verwenden Sie React DnD?
https://evernote.com/business

Wie nützlich finden Sie es?
Sehr hilfreich! Es war eine steile Lernkurve, aber wir haben es geschafft, das meiste von dem zu tun, was wir tun wollten.

Wie oft haben Sie Probleme damit und wie frustrierend sind sie?
Ich habe das Gefühl, dass es einige große Hindernisse für Anfänger gibt und einige Dinge interessant zu handhaben sind. Einige Fehler in Bezug auf Hover-and-Drop-Effekte haben uns ziemlich verwirrt, aber wenn wir uns das genauer ansehen, scheint es, dass einige von ihnen nur Einschränkungen bei der nativen Drag/Drop-Implementierung von HTML5 sind (Drop-Effekte scheinen speziell den Cursor zu überschreiben, den Sie anwenden möchten, damit wir es können. Nutzen Sie keine Dinge wie cursor: no-drop Es ist wirklich schlau, dass Sie es so gemacht haben, dass Sie bei Bedarf Ihre eigenen Backends implementieren können, und wir haben uns noch nicht getraut, mit dem Touch-Backend zu experimentieren.

Wir hatten eine interessante Zeit damit, uns in Berechtigungen einzuklinken. Unser Drag & Drop für Notizen erfordert eine Menge Dinge, um zu wissen, ob wir etwas verschieben und/oder ablegen können. Wir haben auch festgestellt, dass wir das native Fade-Out-Drag-Back zum Haupt-DOM-Element neu implementieren mussten, als es keinen Platz fand, um uns in unserem CustomDragLayer abzulegen (dies könnte ein Beispiel sein, das wir beitragen können).

Welche Funktionen liegen Ihnen am Herzen?
Wir möchten mehrfaches Drag-and-Drop implementieren und es sieht nicht so aus, als gäbe es eine saubere Möglichkeit, dies mit React-Dnd zu tun, soweit wir wissen? Wir schauen uns das aber genauer an. Wenn wir tiefer eintauchen, werden wir mehr teilen.

@augbog nicht sicher, ob Sie es ausprobiert haben, aber haben Sie sich die Implementierung von Gaeron im ersten Beitrag in Ausgabe Nr. 14 und die Verwendung einer benutzerdefinierten Drag-Ebene angesehen?

In gewisser Weise ist dieses Szenario bereits möglich: Verbraucher können ausgewählte Elemente manuell verfolgen, dragPreview auf eine Art generisches Platzhalterbild setzen und angemessen auf das Ablegen mehrerer Elemente (soweit es die Geschäftslogik betrifft) reagieren.

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

Danke @JM-Mendez, ja, wir haben das gesehen und wir waren besorgt über den Folgekommentar, dass mehrere Komponenten wussten, dass sie gezogen wurden, aber nach dem erneuten Lesen hat es möglicherweise keine Auswirkungen auf uns, also untersuchen wir es immer noch :) Danke für den Aufruf dazu!

Immer noch kein Backend für Cross-Iframe-DnD oder Draggability von übergeordnetem Fenster zu untergeordnetem Iframe. @gaearon Ich habe Ihren Kommentar zu diesem Problem in einigen Threads gesehen. Ich möchte sagen, dass dies der einzige Grund ist, warum ich für mein Projekt eine reine js-Lösung verwenden musste.

(Bearbeiten) Ich denke, dies ist eine wirklich nützliche Funktion für alle, die versuchen, einen Drag-and-Drop-Seitenersteller zu erstellen.