Ich verwende Dragula für Drag and Drop-Funktionalität. Es funktioniert, bis ich meine Liste von der Serverseite aktualisiere:
%Vor%Es scheint, dass Dragula die Reihenfolge in der Liste beibehalten möchte, so wie sie vorher war, so dass es die serverseitige Sortierreihenfolge durcheinander bringt. Ich brauche diese Funktionalität nicht. Ich habe Dokumentation, Tutorials, Beispiele gelesen, kann aber nicht finden, wie man die automatische Sortierung in Dragula deaktiviert.
Ich bin ziemlich sicher, dass es keine automatische Sortierung gibt, zumindest standardmäßig. Minimale in sich geschlossene Beispiele sind unser Freund. Obwohl das Web mehr Beispiele verwenden könnte, und obwohl es schwierig ist, ein Negativ zu beweisen, werde ich zeigen, dass es im Standardfall keine automatische Sortierung gibt, und versuche zu erraten, wo das Problem liegt.
Sorry, erst nachdem ich festgestellt habe, dass Sie reines JS verwenden und wahrscheinlich AngularJS anstelle von Angular2 verwenden. Trotzdem sollte folgendes noch etwas sinnvoll sein.
Zuerst brauchen wir eine einfache Codebasis, verwenden Sie Angular-CLI, um die Basis zu erstellen ( Ссылка ): dann folge Wie installiere ich angular-quickstart mit ng2-dragula und wir werden genau die gleiche Ausgangsbasis haben.
Ersetzen Sie nun den Inhalt von app.component.html durch:
%Vor%Ersetzen Sie den Inhalt von app.component.ts durch:
%Vor% Wenn Sie das oben genannte ausführen, werden Sie feststellen, dass das Modell mit der Liste synchron ist, wie es einfach mit der Schaltfläche Anzeigestatus von Elementen angezeigt wird. Wenn wir jedoch [dragulaModel]="items" von app.component.html entfernen, werden wir feststellen, dass das Modell nicht synchronisiert ist. Es ist nicht so, dass Dragula etwas extra macht, es macht tatsächlich etwas weniger.
Nun um das Problem zu beheben ...
Beim Synchronisieren des lokalen Status können wir dies auf verschiedene Arten versuchen:
Beachten Sie zunächst, dass beim Hinzufügen von [dragulaModel]="items" zwar die Liste mit dem Array synchronisiert wird, wir aber immer noch einen Hook für unseren benutzerdefinierten Server-Synchronisierungscode benötigen, mehr dazu später.
Wenn wir das Dragula-Framework ignorieren und vielleicht versuchen, einen Getter-Setter für Objekte zu erstellen. Wenn wir jedoch alle Instanzen von Elementen in _items umbenennen und dann Folgendes hinzufügen:
%Vor%Allerdings funktioniert das obige NICHT , oder besser: es könnte funktionieren, aber wenn man in den Konsolenprotokollen nachschaut, wird der Setter einmal aufgerufen und der nachfolgende Zugriff erfolgt mit dem Getter und dem Getter Wird während eines Ziehens oft aufgerufen, wenn der Benutzer sich bewegt und sich bewegt, könnten möglicherweise Hunderte von Anrufen innerhalb von Sekunden erzeugt werden. Außerdem kann es hilfreich sein, den Benutzer wissen zu lassen, ob die Seite gespeichert werden muss oder nicht. Ein Array-Vergleich auf einer potenziell unbegrenzten Liste, eine unbestimmte Anzahl von Malen, hört sich einfach nicht nach einer guten Idee an reine Java / TypeScript-Lösungen, die diese Dragula lösen können, bieten eine Möglichkeit, die Überprüfung nur einmal durchzuführen, wenn das Objekt gelöscht wird.
Fügen Sie den folgenden Code ein, ersetzen Sie den Konstruktor und löschen Sie diesen Setter / Getter, weil es eine dumme Idee war (wir sind wirklich nur an dem Drop-Teil interessiert, aber die Vollständigkeit tut nie weh):
%Vor% Das obige Beispiel wurde aus Ссылка übernommen und bietet die Möglichkeit, die Synchronisation ohne Verwendung von manuell zu implementieren Die dragulaModel -Direktive, aber wir können auch auf dieser Anweisung aufbauen, wie der nächste Abschnitt der Dokumentation zeigt ( Ссылка ), also würden wir, anstatt das oben genannte zu tun, nur brauchen (und wir müssen in diesem Fall die dragulaModel-Direktive verwenden):
Und Sie sollten eine schöne Arbeitslösung haben.
Tags und Links javascript drag-and-drop dragula angular-dragula