Mise à jour DOM tout en faisant glisser un élément sortable

Question

J'ai la liste des éléments qui doivent être sortable, ce qui en soi n'est pas difficile à mettre en œuvre à l'aide de jQuery.Basé sur ce code J'ai mis cette fonctionnalité dans une Angulaire de la directive, de sorte que mon modèle est mis à jour lors de la remise en ordre des éléments dans la liste.

Ma liste ont une ligne différente couleurs selon qu'il s'agit d'un pair ou impair ligne, ainsi que deux symboles qui change de couleur en fonction de si l'élément est le premier ou le dernier dans la liste.J'ai créé un violon pour montrer un exemple.

Maintenant, le problème est que en faisant glisser un élément bousille la mise en page et la couleur des symboles ne sont pas mises à jour tout en faisant glisser un élément.Quand un article est publié, la liste est mise à jour et de l'air sympa encore une fois.

Ma question:Comment puis-je garder la liste à jour pendant le déplacement d'un élément?J'ai essayé avec un change fonction de rappel, mais je n'ai aucune idée de comment faire pour obtenir la position de mon glisser l'élément actuellement occupant.L' ui-objet ne contient pas d'informations à ce sujet, autant que je sache.Lors de la mise à jour du modèle, l'idée est que le DOM sera mis à jour aussi bien.Serait-ce alors réinitialiser mon glisser?

J'ai aussi essayé de créer un conteneur pour le texte, afin que le fond n'est pas déplacée avec le point (ce n'est toujours pas résoudre le problème avec la mise à jour de la couleur des symboles), mais je ne pouvais pas faire est de fonctionner comme requis.

J'espère que vous êtes en mesure de les aider.

Edit: Après une bonne nuit de sommeil, je me suis réveillé et a trouvé ui.placeholder.index() dans le change-événement obtient la position actuelle de l'élément déplacé.À l'aide de ce que je peux mettre à jour le modèle, mais le style est toujours un gâchis tout en faisant glisser.

Meilleures salutations

Answer 1

Si ça intéresse quelqu'un, j'ai fini avec un hack.Ce que j'ai fait est de créer le premier fond et ensuite d'ajouter les éléments à la liste.De cette façon, le fond ne change pas tout en faisant glisser mes articles.

À propos de la mise à jour de mon modèle, j'ai eu un problème avec l' change événement appelé deux fois, donc je suis loin de cette idée.

Cette mise à jour du violon montre ma solution.