Aktualisieren Sie DOM, während Sie ein sortierbares Element ziehen

Question

Ich habe eine Liste von Elementen, die sortierbar sein sollten, was an sich mit jQuery nicht schwer zu implementieren ist.Bezogen auf diesen Code Ich habe diese Funktionalität in eine Angular-Direktive eingefügt, damit mein Modell beim Neuordnen der Elemente in der Liste auf dem neuesten Stand bleibt.

Meine Liste hat unterschiedliche Zeilenfarben, je nachdem, ob es sich um eine gerade oder ungerade Zeile handelt, sowie zwei Symbole, deren Farbe sich ändert, je nachdem, ob das Element an erster oder letzter Stelle in der Liste steht.ich habe erschaffen eine Geige, um ein Beispiel zu zeigen.

Das Problem besteht nun darin, dass das Ziehen eines Elements das Layout durcheinander bringt und die farbigen Symbole beim Ziehen eines Elements nicht aktualisiert werden.Wenn ein Artikel veröffentlicht wird, wird die Liste aktualisiert und sieht wieder gut aus.

Meine Frage:Wie halte ich die Liste auf dem neuesten Stand, während ich ein Element verschiebe?Ich habe es mit einem versucht change Rückruffunktion, aber ich habe keine Ahnung, wie ich herausfinden kann, welche Position mein Ziehelement derzeit einnimmt.Der ui-object enthält meines Wissens keine Informationen darüber.Bei der Aktualisierung des Modells besteht die Idee darin, dass auch das DOM aktualisiert wird.Würde dies dann mein Ziehen zurücksetzen?

Ich habe auch versucht, einen Container für den Text zu erstellen, damit der Hintergrund nicht mit dem Element mitgezogen wird (das Problem mit der Aktualisierung der Farbsymbole wird dadurch immer noch nicht gelöst), aber ich konnte die Funktion nicht wie erforderlich gestalten.

Ich hoffe, Sie können helfen.

Bearbeiten:Nach einer erholsamen Nacht wachte ich auf und fand ui.placeholder.index() im change-event ruft die aktuelle Position des gezogenen Elements ab.Damit kann ich das Modell aktualisieren, aber das Styling ist beim Ziehen immer noch ein Chaos.

Beste grüße

Answer 1

Falls es jemanden interessiert: Am Ende habe ich einen Hack gemacht.Ich habe zuerst den Hintergrund erstellt und anschließend die Elemente zur Liste hinzugefügt.Auf diese Weise ändert sich der Hintergrund beim Ziehen meiner Elemente nicht.

Beim Aktualisieren meines Modells hatte ich ein Problem mit dem change Da die Veranstaltung zweimal aufgerufen wurde, bin ich von dieser Idee abgerückt.

Diese aktualisierte Geige zeigt meine Lösung.