拖放以重新排序 HTML 列表

Posted 2023-05-08

【中文标题】拖放以重新排序 HTML 列表

【英文标题】：Drag and drop to reorder HTML lists

【发布时间】：2012-05-08 20:38:01

【问题描述】：

我有一个应用程序，我希望能够对其进行拖放以重新排序并将颜色分组。用于网格的 jQuery sortable 似乎反应迟钝，而且有点问题。 microjs 推荐 kbjr's DragDrop，但该库没有列表的概念，只有可移动对象。 Sproutcore 有一个很好的实现，但我找不到它适用于网格的演示。

我的用户界面如下所示：

我希望用户能够在组内拖动颜色以及在组之间拖动颜色。

【问题讨论】：

要问的一个问题是：临时分组有目的吗？我想是的。假设这一点-您应该真正开始@“这些集合是什么”，从您如何关联它们以及该关联对最终用户如何有意义的意义上说。编辑（对不起，按回车键）您需要听拖放位置，并且可能最好（最简单？）的方法是批量分配/取消分配课程。这些类应该代表集合@某个级别，您可能需要几个或更多来正确描述此行为-edit2-我偏爱 Jquery.so id 从那里开始

【参考方案1】：

试试this：html5 可排序。它是一个使用原生 HTML5 拖放 API 创建可排序列表和网格的 jQuery 插件。

【讨论】：

+1 但我有问题。我无法替换第一项。我的意思是，如果我将第二个或第三个拖到第一个位置，则不会替换第一个。有什么问题？谢谢！

Ali Farhadi 的原始 Html5Sortable 没有得到积极维护。 Alexandru Badiu 的叉子是更好的选择。见github.com/voidberg/html5sortable。

排序后如何得到当前订单。

@briankip in jQuery ... $('#domId subEl').each(function() $(this).text(); ); 其中#domId 是您订购的任何东西的 dom 包装器，subEl 是所订购商品的类/标签名。

【参考方案2】：

只是一个友好的更新，因为这个问题出现在搜索中。 HTML5Sortable 不再维护。推荐的库是Sortable。 大小：12kb 缩小。

代码：

var sortable = Sortable.create($('#items'));

希望这对下一个流浪者有所帮助。

【参考方案3】：

我发现this (Nastable) 更有用一点，因为它具有嵌套功能。

更新 实际上最终使用了具有更多选项的this 插件。

希望对您有所帮助。 干杯！