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

【问题标题】：How to imitate a sort event with animation using jQuery?如何使用 jQuery 模拟带有动画的排序事件？
【发布时间】：2011-10-22 12:22:39
【问题描述】：

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

这可能吗？过去我在触发可拖动/可排序事件时遇到了麻烦。我对替代解决方案持开放态度，只需要明确项目移动到的位置即可。

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

【问题讨论】：

如果用户一次只能选择一个复选框，则不需要任何“实际”排序算法。只需将新勾选的项目移动到列表的开头即可。
这是一个复选框而不是单选按钮：用户可以选择任意数量的。这个想法是将所有选中的项目移到开头，以便将它们分组。

标签： jquery animation jquery-ui-sortable

【解决方案1】：

jQuery ui 有一个transfer 动画。

在这里快速jsfiddle。

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

【讨论】：

2021...这家伙可能在转移回家时迷路了。
你在干什么？
回家后我会更新演示以使用复选框列表进行排序...
10年前更新了，jsfiddle明明有存档?‍♂️

【解决方案2】：

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

http://jsfiddle.net/bN8x6/

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

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

干得好。你已经把时间花在这上面了，对吧？ :-)
当我花时间在 Drupal 模块创建和主题化的深度上时，我需要连续 10 分钟的在线国际象棋或 jQuery 休息来保持血液流向我的头脑:)
我还想指出，如果你擅长 jQuery，就不再需要大量的 jQuery UI。我认为推出自己的自定义解决方案实际上比了解 jQuery UI 的某个功能如何工作更容易，结果通常是你更好理解的代码，以及真正调整到你想要的确切规格的功能。跨度>
哇，效果真的很好！不幸的是，这不是我想要的（请参阅更新的问题）。
你的意思是你应该也可以用鼠标拖动它们进行排序？

【解决方案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 解决方案的一个端口。 :)

【讨论】：