3

我正在开发一个简单的建议投票系统，用户可以在其中 +1 或 -1 建议（以类似于堆栈溢出率问题的方式）。

这些建议呈现在一个长表中，+1 或 -1 是通过 ajax 完成的，因为该表按项目的投票数量排序，当一个为 +1 或 -1 时，表失去了它的顺序。

我知道我可以使用表格排序器 jQuery 插件来解决这个问题，但它很容易丢失你 +-'d 的项目，你知道如何在跟随它的同时将行向上/向下移动吗？（也许类似于在 iPhone 上进行订购的方式？）带有流畅的动画？

谢谢你的时间，

4

2 回答 2

21

我设法使用一些图书馆解决了这个问题，并使它看起来相当不错。实际上发生的是在后台制作了一个重复的表格，然后应用了动画并交换了两个表格。

请参阅http://jsfiddle.net/NP4t3/1/并投票赞成或反对！

它基于http://www.scottlogic.co.uk/2011/01/animating-html-ranking-tables-with-javascript/的工作，然后我添加了自动排序！

所有代码都在小提琴中（包括图书馆的），希望这对某人有用！

于 2012-06-04T21:24:49.370 回答
1

我不知道有任何插件可以做到这一点。不过你可以自己写一个。我会采取以下方法：

  • 创建一个具有可识别行的表。
  • 在绝对定位的 div 中创建第二个隐藏表。
  • 当您想移动一行时，将其与主表分离（也许您想保留一份副本或空行作为占位符）并将其添加到您现在可以显示的第二个表并将其飞到所需的目的地并将其从临时表添加回主表。

哦，stackoverflow上有一个问题：在可排序的UI中制作表格行动画向上移动

我认为这应该让你开始

于 2012-05-31T11:39:54.910 回答