Actualizar DOM mientras arrastra un artículo sortable

Question

Tengo una lista de elementos que deben ser ordenables, que en sí mismos no son difíciles de implementar utilizando JQery. Basado en este código he puesto esta funcionalidad en una directiva angular, para que mi modelo sea Mantenido actualizado al reordenar los elementos de la lista.

Mi lista tiene diferentes colores de fila según si es una fila par o impar, así como dos símbolos que cambian de color dependiendo de si el elemento es el primero o el último en la lista. He creado un violín para mostrar un ejemplo .

Ahora, el problema es que arrastrar un elemento le atraviesa el diseño y los símbolos de colores no se actualizan mientras arrastra un elemento. Cuando se libera un artículo, la lista se actualiza y se ve bien una vez más.

MI PREGUNTA: ¿Cómo mantengo la lista actualizada mientras mueve un artículo? He intentado con una función de devolución de llamada de change, pero no tengo ni idea de cómo obtener qué posición está ocupando actualmente mi artículo de arrastre. El objeto de ui no contiene información sobre esto, por lo que yo sepa. Al actualizar el modelo, la idea es que el DOM se actualizará también. ¿Luego restablecería mi arrastre?

También intenté crear un contenedor para el texto, de modo que el fondo no se arrastra con el elemento (esto todavía no resuelve el problema con la actualización de los símbolos de colores), pero no pude hacer que sea función como sea necesario.

Espero que puedas ayudar.

Editar: Después de una buena noche de sueño, me desperté y encontré ui.placeholder.index() en el evento change, obtiene la posición actual del elemento arrastrado. Usando esto puedo actualizar el modelo, pero el estilo todavía es un desastre mientras se arrastra.

mejor saludos

Answer 1

Si alguien está interesado, terminé con un hacke. Lo que hice es crear el fondo primero y luego agregar los elementos a la lista.De esta manera, el fondo no cambiará mientras arrastra mis artículos.

Acerca de la actualización de mi modelo Tuve un problema con el evento change que se llama dos veces, así que me fui a esa idea.

Este Fiddle actualizado muestra mi solución.