Question

jQuery UI（1.8+）正在成为一个伟大的图书馆，但我发现它对我来说经常做得太多。是否有替代库用于创建占地面积较小的可排序列表？排除占位符和交叉列表排序等功能是可以接受的。

编辑：
（这已成为一个有趣的讨论，感谢所有回复。）
似乎有些用户不知道jQuery UI可以排序的是什么。这是不表排序，但列表排列。想想重新订购Netflix队列。请参阅此处的演示：http://jqueryui.com/demos/sortable/

Answer 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>

Answer 2

我找到的最小和最简单的代码是HTML5 Sortable。它是一个小巧的JQuery插件，适用于各种浏览器，大小只有1.5 KB。

Demos of HTML5 sortable are here

Answer 3

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

Jquery's sortable plugin是迄今为止最受欢迎的，download page只能检查相关的部分（例如只有可排序的插件），仍然会给jquery带来开销。
构建于prototype.js

same is possible with scrip.aculo.us

并使用YUI
旧的“DHTML”库提供a sortable list functionality以及only 1 other feature besides it（就地编辑）。这是我能找到的唯一“专用”库（令我惊讶）。
很少有其他自定义脚本也是旧的，例如this。搜索this会显示其中的一些。

如果我冒昧地理解这种缺乏，我会猜测是这种情况，因为拖放需要很多的跨浏览器黑客和修复旧浏览器，因此任何计划的人经历这种麻烦将取决于现有的库，这至少会限制痛苦的数量。

Answer 4

jQuery sortable在8.4 Kb缩小是另一个候选人。它是一个jQuery插件，似乎是积极维护的。

Answer 5

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

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

Answer 6

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

为了进行比较， jQuery UI可排序插件的权重位于33.3Kb（包括您不需要的必要裸UI Core）。

请考虑Interface Element Sortables轻量级插件，其权重仅为 18.9Kb ，三个依赖关系drag，{{1 }}，以及drop包含在内。

界面元素可排序还有一个简单的示例页面HERE和HERE。

Answer 7

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

Answer 8

我记得在下载jQuery UI时，可以只选择您需要的功能。因此，您只能下载具有依赖关系的sortable。

Answer 9

Jquery / UI是确保跨浏览器兼容性的最佳方式。您甚至不必从服务器加载JS和CSS文件。 jQuery和jQuery UI都可以从谷歌CDN加载。此外，大多数用户已经有从谷歌缓存的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/

轻量级替代jQuery UI sortable（）？

9 个答案: