在重新排序表行时,如何为移动的其他行添加动画效果?

时间:2013-04-27 00:46:32

标签: javascript jquery html animation

我的Web应用程序中的某些表可以使用以下代码进行拖放重新排序:

http://isocra.com/2007/07/dragging-and-dropping-table-rows-in-javascript/

这使用标准JavaScript insertBefore方法将表移动到不同的DOM位置,如下所示:

dragObject.parentNode.insertBefore(dragObject, currentRow.nextSibling);

它工作正常,但运动似乎突然。我想更新这个,以便当我拖动一个表行时,其他行动画到他们的新位置。这与在可编辑表格中拖动表格行时iOS具有的效果相同。

我认为这可能是jQuery的一项工作,所以我调整了代码,将标准的insertBefore方法更改为jQuery的insertBefore函数,我认为我可以将其设置为动画:

jQuery(".dragging").insertBefore(currentRow.nextSibling)

但是在玩了不同的动画选项后,我意识到他们只能为正在移动的行设置动画,而不是围绕它的其他行。

有没有人见过这样的解决方案 - 基本上模拟iOS表重新排序?我更喜欢一个适用于我现有表行的解决方案,所以我不必完全更改我的代码,但我会考虑在必要时更改为基于div的标记。

1 个答案:

答案 0 :(得分:0)

为什么不使用jQuery sortable

我认为它会做你想要的。