Update DOM while dragging a sortable item

Question

I have list of items that should be sortable, which in itself is not hard to implement using jQuery. Based on this code I have put this functionality into an Angular directive, so that my model is kept up-to-date when reordering the items in the list.

My list have different row colors depending on whether it is an even or odd row, as well as two symbols which changes color depending on if the item is first or last in the list. I have created a fiddle to show an example.

Now, the problem is that dragging an item messes up the layout and the colored symbols do not get updated while dragging an item. When an item is released, the list is updated and looks nice once again.

My question: How do I keep the list updated while moving an item? I have tried with a change callback function, but I have no clue how to obtain which position my dragging item is currently occupying. The ui-object does not contain information about this, as far as I know. When updating the model, the idea is that the DOM will update as well. Would this then reset my dragging?

I also tried creating a container for the text, so that the background is not dragged with the item (this still does not solve the issue with updating the colored symbols), but I could not make is function as required.

I hope you are able to help.

Edit: After a good nights sleep I woke up and found ui.placeholder.index() in the change-event gets the current position of the dragged item. Using this I can update the model, but the styling still is a mess while dragging.

Best regards

Answer 1

If anyone's interested, I ended up with a hack. What I did is creating the background first and afterwards add the items to the list. This way the background won't change while dragging my items.

About updating my model I had an issue with the change event being called twice, so I went away from that idea.

This updated fiddle shows my solution.