拖动可排序项时更新DOM

Question

我有可以排序的项目列表，这本身并不难用jQuery实现。基于this code我已将此功能放入Angular指令中，以便在重新排序列表中的项目时使我的模型保持最新。

我的列表具有不同的行颜色，具体取决于它是偶数行还是奇数行，以及两个根据项目是列表中的第一个还是最后一个而改变颜色的符号。我创建了a fiddle to show an example。

现在，问题是拖动项目会使布局混乱，并且拖动项目时彩色符号不会更新。当一个项目被释放时，列表会更新并再次看起来很好。

我的问题：如何在移动项目时更新列表？我已尝试使用change回调函数，但我不知道如何获取拖动项目当前占用的位置。据我所知，ui - 对象不包含有关此内容的信息。更新模型时，想法是DOM也会更新。这会重置我的拖动吗？

我也尝试为文本创建一个容器，这样就不会用项目拖动背景（这仍然不能解决更新彩色符号的问题），但我无法按要求制作功能。

我希望你能帮忙。

修改 经过一夜好眠，我醒来后发现ui.placeholder.index()中的change - 事件获取了被拖动物品的当前位置。使用这个我可以更新模型，但拖动样式仍然是一团糟。

祝你好运

Answer 1

如果有人感兴趣，我最终得到了一个黑客。 我所做的是先创建背景，然后将项目添加到列表中。这样，在拖动我的项目时，背景不会发生变化。

关于更新我的模型我遇到了change事件被调用两次的问题，所以我放弃了这个想法。

This updated fiddle显示了我的解决方案。