如何使用 jQuery 模仿带有动画的排序事件？

Question

我有一个项目列表，每个项目都包含一个复选框。当选中一个复选框时，我希望该项目将自身排序到列表的开头，最好是动画，就像用鼠标拖动它一样（但没有鼠标光标）。

这可能吗？我过去在触发可拖动/可排序事件时遇到了麻烦。我愿意接受替代解决方案，只需清楚该项目已移至何处即可。

编辑：我最初想问如何在 jQuery sortable() 列表上实现这一点，但显然我没有很好地沟通，所以我更新了问题以匹配所有精彩的答案。

Answer 1

与 avetarman 的第二个例子类似，这个小提琴不会等待新选中的框到达顶部，然后其他框就会占据其应有的位置。相反，它们都一起动画化：

http://jsfiddle.net/ebiewener/Y5Mdt/1/

最终，它是所有这些都是为了给您要移动的行一个绝对位置，以便它可以向上滑动到其他行之上，同时为这些其他行提供必要的 CSS 属性，以便它们在删除所选行时不会立即跳出位置从文件中流量用绝对定位。完成此操作后，所选行将失去其绝对定位，但会附加到行的开头。这允许所有 css 本质上被“重置”，以便您可以继续选择新行。

Answer 2

检查这个小提琴。
这里没有使用任何插件。

http://jsfiddle.net/bN8x6/

也检查此更新。它使用相对定位。因此，在动画过程中，占位符被保留。

http://jsfiddle.net/bN8x6/1/

Answer 3

jQuery ui 有一个 transfer 动画。

快速 jsfiddle 。

您可以使用它来模拟排序，然后在回调中移动实际的复选框。
当我回到家时，我将更新演示以使用复选框列表进行排序。

Answer 4

试试这个。

$('#mytest li').click(function() {
    var $this = $(this);
    if ($this.children("input:checked")) {
        $this.effect("transfer", {
            to: $this.parent().find(":first-child")
        }, 1000);
        $this.remove();
         $(this).prependTo("#mytest");
    }    
});

.ui-effects-transfer {
    border: 2px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.js"></script>
<ul id="mytest">
    <li><input type="checkbox" id="check1" /><label for="check1">One</label></li>
    <li><input type="checkbox" id="check2" /><label for="check2">Two</label></li>
    <li><input type="checkbox" id="check3" /><label for="check3">Three</label></li>
    <li><input type="checkbox" id="check4" /><label for="check4">Four</label></li>
    <li><input type="checkbox" id="check5" /><label for="check5">Five</label></li>
    <li><input type="checkbox" id="check6" /><label for="check6">Six</label></li>
    <li><input type="checkbox" id="check7" /><label for="check7">Seven</label></li>
    <li><input type="checkbox" id="check8" /><label for="check8">Eight</label></li>
    <li><input type="checkbox" id="check9" /><label for="check9">Nine</label></li>
    <li><input type="checkbox" id="check10" /><label for="check10">Ten</label></li>
</ul>

此处演示： http://jsfiddle.net/naveen/gLBjt/

免责声明：这本质上是一个端口@redsquare 解决方案。 :)