jQuery UI 的 sortable() 的轻量级替代品？ [关闭]

Posted 2023-02-24

【中文标题】jQuery UI 的 sortable() 的轻量级替代品？ [关闭]

【英文标题】：Lightweight Alternative to jQuery UI's sortable()? [closed]

【发布时间】：2011-07-17 00:38:21

【问题描述】：

jQuery UI (1.8+) 正在成为一个很棒的库，但我发现它对我来说往往做得太多了。是否有用于创建占用空间较小的可排序列表的替代库？ 排除占位符和交叉列表排序等功能是可以接受的。

编辑： （这已成为一个有趣的讨论，感谢所有回复。） 似乎有些用户不知道 jQuery UI 可排序是什么。 不是表格排序，而是列表排列。考虑重新排序您的 Netflix 队列。在此处查看演示：http://jqueryui.com/demos/sortable/

【问题讨论】：

我不知道。不过，您可以从该站点自定义构建 jQ-UI 库，并且只包含您需要的部分。

找到了吗？我还在寻找，但我找到了neb.net/playground/dragdrop 和tool-man.org/examples/sorting.html，它们可能是可食的。

没有其他东西是“交钥匙”的，比如 jQuery UI（除非你想投资 GWT。）如果你要自己写（就像我一样），你会需要大约 2-3 个月才能为所有浏览器完成所有 DOM 和 JS 怪癖。代码量将是 UI 的两倍，并且在创建构建/缩小系统以减小文件大小之后，您会想知道为什么一开始不只使用 UI。 :)

这可能对你有帮助：tool-man.org/examples/sorting.html :)

正如其他人建议的那样，我认为最好的方法是使用 jQuery UI（自定义构建以使其更轻）。确保在您的服务器中启用 gzip 压缩，以减小文件大小

【参考方案1】：

在此之前发布的答案令人惊讶地过时了。

Sortable 是一个快速、无依赖、可重新排序的小型列表小部件，支持触控，可与 HTML5 原生拖放 API 配合使用。你可以将它与 Bootstrap、Foundation 或任何你想要的 CSS 库一起使用，并且实例化它只需要一行。

它支持在列表内或跨列表重新排序。您可以定义只能接收元素的列表，或者您可以从中拖动但不能拖放到其上的列表。它也得到了非常积极的维护和MIT licensed on GitHub。

new Sortable(document.getElementsByClassName('sortable')[0]);

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

<!-- Sortable -->
<script src="https://rawgit.com/RubaXa/Sortable/master/Sortable.js"></script>

<ul class="list-group sortable">
  <li class="list-group-item">This is <a href="http://rubaxa.github.io/Sortable/">Sortable</a></li>
  <li class="list-group-item">It works with Bootstrap...</li>
  <li class="list-group-item">...out of the box.</li>
  <li class="list-group-item">It has support for touch devices.</li>
  <li class="list-group-item">Just drag some elements around.</li>
</ul>

【讨论】：

但是读起来真的很痛苦！

请注意，如果您的网站需要在内部网上的 IE（任何版本）上运行，RubaXa 的 Sortable 将不起作用。它使用.forEach，怪癖模式不支持。在将它集成到我的项目中后，我发现这是我的成本，然后它被发布给客户

请更正第一个链接

【参考方案2】：

我找到的最小和最简单的代码是HTML5 Sortable。它是一个小型 JQuery 插件，可在各种浏览器中使用，大小仅为 1.5 KB。

Demos of HTML5 sortable are here.

【讨论】：

太棒了！这个问题已经有将近 2 年的历史了。很高兴有人终于建造了一些东西。

你好。除了 jquery ui 之外，TOUCH 设备还有什么轻量级的替代品吗？

@scooterlord：是的：Rubaxa's Sortable.

【参考方案3】：

好的，我一直在等待其他人得到更好的答案，但由于这还没有发生，我将分享我自己的研究：

Jquery's sortable plugin 是迄今为止最流行的，在 download page 上只能检查相关部分（例如，只能检查可排序插件），仍然会给 jquery 带来开销。 same is possible with scrip.aculo.us 基于prototype.js 构建 还有YUI 旧的“DHTML”库提供a sortable list functionality 以及only 1 other feature besides it（就地编辑）。这是我能找到的唯一一个“专用”库（令我惊讶的是）。 很少有其他自定义脚本也都是旧的，例如this。搜索 this 会找到其中的一些。

如果我冒昧地对这种缺乏进行理论化，我猜会是这种情况，因为拖放需要大量在旧浏览器中进行跨浏览器黑客和修复，因此任何计划解决这个问题将取决于现有的库，这些库至少限制了痛苦的数量。

【讨论】：

@downvoter：想解释一下 -1 吗？

【参考方案4】：

jQuery sortable 缩小为 8.4 Kb 是另一个候选者。这是一个 jQuery 插件，似乎得到了积极的维护。

【参考方案5】：

你可以试试 javascriptmvc.com 框架。它建立在 jquery 之上，并具有强大的“窃取”机制，允许您仅包含您真正使用的框架部分。

它的 mxui 库提供了可排序的功能，你可以在这里试试： http://javascriptmvc.com/docs.html#!Mxui.Layout.Sortable

【参考方案6】：

我在查看 Samuel Hapak 提供的 SO 答案后提供我的答案。 steal.js 文件是 18.7kb 的重量级文件。然后在2.7kb“窃取”sortables.js 将它带到一个沉重的21.4kb。在4kb 处添加可选的拖放并在5.5kb 处拖动，使总数达到30.9kb。参考演示页面here 并在开发工具中查看源代码 NET 选项卡。

为了比较，jQuery UI Sortable 插件的权重为33.3Kb（包括你不想要的必要的裸UI Core）。

请考虑Interface Element Sortables 轻量级插件，它的权重仅为18.9Kb，并且包含drag、drop 和util 三个依赖项与 .

Interface Element Sortables还有一个简单的示例页面HERE和HERE。

【讨论】：

你的回答有两个问题。一...您没有清楚地回答问题，您的主要观点对重量级/轻量级的含义提出了批评。您可能会提供备份数据的参考，因为我不一定同意您对重量级的定义。二...您正在评论答案的元数据。这个讨论更适合 meta.***.com，而不是这里。

@AndyJones，我 did 提供了 jQuery UI Sortable 的替代方法，文件大小 verifiable references 您可以访问它包含在我的答案中。如果您知道小于18.9kb 的替代插件，请加入聚会并创建答案。也就是说，术语 Heavyweight 适用于插件的字节大小，因为 OP 想要的是 Lightweight 版本。

您能提供哪些参考资料表明 15.2Kb 与 33.3Kb 是轻量级还是重量级？或者重量级与轻量级对您个人意味着什么？如果您使用的是 56Kb 调制解调器，则 15Kb 是一个明显的差异 - 使用 1Mbps 连接，则不是。

@AndyJones，如需可靠参考，请访问 jQuery 主页HERE。他们正在提升 31kb 文件大小的 轻量级 足迹。我希望我的回答现在有意义并且不值得投反对票。如果您决定删除这些消息 cmets，我也会这样做。谢谢安迪琼斯。

感谢您提供一些指标和我以前从未见过的 jQuery UI 替代方案。

【参考方案7】：

我记得在下载 jQuery UI 时可以只选择您需要的功能。因此，您只能下载带有依赖项的可排序对象。

【讨论】：

是的，您可以拼凑一个自定义库，但我正在寻找一种无需 jQuery UI 核心的可排序功能的特定解决方案。

【参考方案8】：

正如您所说-“jQuery UI (1.8+) 正在成为一个很棒的库”。好吧，如果您这么认为，为什么要选择任何其他库，我认为您想要一个替代方案，因为 jQuery ui 库加载起来非常繁重。如果是，select only the features you need by making a custom download. 一旦你下载了自定义库。将其上传到您的服务器或上传到免费的 JavaScript 托管网站，例如 -http://yourjavascript.com/。 或从 this list.

中选择一个网站

【参考方案9】：

Jquery / UI 将是确保跨浏览器兼容性的最佳方式。您甚至不必从服务器加载 JS 和 CSS 文件。 jQuery 和 jQuery UI 都可以从谷歌 CDN 加载。此外，大多数用户已经从 google 缓存了 jQuery js 文件，因此大多数用户甚至不必重新加载它们。

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/start/jquery-ui.css" type="text/css" media="all" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>

还可以查看此链接以了解为什么最好从 Google 加载 jQuery，就像我上面提到的那样。 http://encosia.com/2008/12/10/3-reasons-why-you-should-let-google-host-jquery-for-you/

【讨论】：

CDN 有很多好处，还包括并行下载，但我的要求是一个专门处理可排序功能的库。