拖动可排序项时更新DOM

Question

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

我的列表具有不同的行颜色，具体取决于它是偶数行还是奇数行，以及两个符号，它们根据列表中的项目是第一个还是最后一个而改变颜色。我创造了 一把小提琴来展示一个例子.

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

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

我还尝试为文本创建一个容器，以便背景不会与项目一起拖动（这仍然无法解决更新彩色符号的问题），但我无法根据需要制作is功能。

我希望你能帮上忙。

编辑: 睡了一个好觉后，我醒来发现 ui.placeholder.index() 在 change-事件获取拖动项目的当前位置。使用这个我可以更新模型，但在拖动时样式仍然是一团糟。

致以最良好的问候

Answer 1

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

关于更新我的模型，我有一个问题 change 事件被叫了两次，所以我放弃了这个想法。

这个更新的小提琴 显示我的解决方案。