重新排序表行时，如何为其他行设置动画？答案

【问题标题】：How to animate other rows moving out of the way when reordering table rows?重新排序表行时，如何为其他行设置动画？
【发布时间】：2013-04-27 09:05:35
【问题描述】：

我的网络应用程序中的一些表格可以通过拖放重新排序，使用以下代码：

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

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

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

我认为这可能是 jQuery 的工作，所以我调整了代码以将标准 insertBefore 方法更改为 jQuery 的 insertBefore 函数，我认为我可以制作动画：

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

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

有没有人看到过解决方案——基本上是在 HTML 中模拟 iOS 表格重新排序？我更喜欢一种适用于我现有表行的解决方案，因此我不必完全更改我的代码，但如有必要，我会考虑更改为基于 div 的标记。

【问题讨论】：

在新位置插入 TR 怎么样，在给它一个 height 和 0 和 overflow:hidden 之后......然后将它的高度设置为实际值？这将“推动”以下 TR 缓慢下降……
啊——这一定是这个问题的答案在做什么：stackoverflow.com/questions/3256581/animate-insertbefore-jquery。感谢您解释这项技术。我试过了，它仍然很生涩，因为随后的表格行在再次动画回落之前会抢购一空。也许我可以在移动行的旧位置添加一个空行，然后同时将其高度设置为 0，同时将移动行的高度设置为 0。

【解决方案1】：

为什么不使用jQuery sortable？

我认为它会满足您的需求。

【讨论】：

这就是我现在的效果：表格行在没有动画的情况下对齐到它们的新位置。现在我再看一遍，是没有动画还是只有非常快的动画？如果有一些动画，那么放慢它可能会产生预期的效果。
我检查了文档，但没有看到任何关于动画行移动或动画速度可调的参考：api.jqueryui.com/sortable