Javascript jQuery UI 的 sortable() 的轻量级替代品？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5333077/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Lightweight Alternative to jQuery UI's sortable()?
提问by tbeseda
jQuery UI (1.8+) is shaping up to be a great library, but I find that it often does too much for me. Is there an alternative library for creating a sortable list that has a smaller footprint?
Excluding functionality like placeholders and cross list sort is acceptable.
jQuery UI (1.8+) 正在成为一个很棒的库，但我发现它对我来说往往做得太多。是否有用于创建占用空间较小的可排序列表的替代库？
排除占位符和交叉列表排序等功能是可以接受的。
Edit:
(This has become an interesting discussion, thanks for all the replies.)
It seems a few users are unaware what jQuery UI sortable is. It's nottable sorting, but list arrangement. Think re-ordering your Netflix queue. See the demo here: http://jqueryui.com/demos/sortable/
编辑：（
这已经成为一个有趣的讨论，感谢所有回复。）
似乎有一些用户不知道 jQuery UI 可排序是什么。这不是表格排序，而是列表排列。考虑重新排序您的 Netflix 队列。在此处查看演示：http: //jqueryui.com/demos/sortable/
采纳答案by mikemaccana
The smallest and simplest code I found was HTML5 Sortable. It's a tiny JQuery plugin that works across a wide range of browsers, and is only 1.5 KB in size.
我发现的最小和最简单的代码是HTML5 Sortable。它是一个小巧的 JQuery 插件，可在各种浏览器上运行，大小仅为 1.5 KB。
回答by Artem Verbo
The answers posted before this one are surprisingly outdated.
在此之前发布的答案令人惊讶地过时了。
Sortableis a fast, no-dependencies, small reorderable lists widget with touch support that works with the HTML5 native drag&drop API. You can use it with Bootstrap, Foundation, or any CSS library you want, and instantiating it only takes one line.
Sortable是一个快速、无依赖、小型可重新排序的列表小部件，支持触摸，可与 HTML5 原生拖放 API 配合使用。你可以将它与 Bootstrap、Foundation 或任何你想要的 CSS 库一起使用，并且实例化它只需要一行。
It supports reordering within a list or across lists. You can define lists that can only receive elements, or lists from which you can drag, but onto which you cannot drop. It's also very actively maintained and MIT licensed on GitHub.
它支持在列表内或跨列表重新排序。您可以定义只能接收元素的列表，或可以从中拖动但不能放置的列表。它也在GitHub 上得到了非常积极的维护和MIT 许可。
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>回答by David Mulder
Ok, I was waiting for somebody else to get a better answer, but as that hasn't happened yet I will share my own research:
好的，我正在等待其他人得到更好的答案，但由于尚未发生，我将分享我自己的研究：
- Jquery's sortable pluginis by far the most popular and on the download pageonly relevant parts can be checked (e.g. only the sortable plugin), still giving jquery's overhead.
- The same is possible with scrip.aculo.uswhich is build on prototype.js
- And with YUI
- An old 'DHTML' library provides a sortable list functionalityas well with only 1 other feature besides it(edit in place). This is the only 'dedicated' library I have been able to find (to my surprise).
- There are few other custom scripts which are all old as well such as this. Searching for thiswill turn up a number of those.
- jquery 的 sortable 插件是迄今为止最流行的，在下载页面上只能检查相关部分（例如，只有 sortable 插件），仍然给 jquery 的开销。
- 在同样是可能的scrip.aculo.us这是构建在Prototype.js
- 和YUI
- 一个旧的“DHTML”库提供了一个可排序的列表功能，除此之外只有一个其他功能（就地编辑）。这是我能找到的唯一“专用”图书馆（令我惊讶）。
- 很少有其他自定义脚本都是旧的，例如this。搜索这个会发现其中的一些。
If I take the liberty to theorize about this lack I would guess this to be the case because drag and drop requires a lotof cross browser hacks and fixes in older browsers and thus anybody who plans on going through that trouble will depend on existing libraries which at least limit the amount of pain.
如果我冒昧地对这种缺乏进行理论化，我会猜测情况确实如此，因为拖放需要在旧浏览器中进行大量跨浏览器黑客和修复，因此任何计划解决该问题的人都将依赖于现有的库至少要限制疼痛的量。
回答by jogaco
jQuery sortableat 8.4 Kb minified is another candidate. It's a jQuery plugin and seems to be actively maintained.
缩小为 8.4 Kb 的可排序 jQuery是另一个候选者。它是一个 jQuery 插件，似乎得到了积极维护。
回答by Samuel Hapak
You can try javascriptmvc.com framework. It is build on top of jquery and it has powerful "steal" mechanism, which allows you to include only that parts of framework you are really using.
您可以尝试 javascriptmvc.com 框架。它建立在 jquery 之上，并且具有强大的“窃取”机制，它允许您仅包含您真正使用的框架部分。
Its mxui library provides sortable functionality, you can try it here: http://javascriptmvc.com/docs.html#!Mxui.Layout.Sortable
它的 mxui 库提供了可排序的功能，你可以在这里尝试：http://javascriptmvc.com/docs.html#!Mxui.Layout.Sortable
回答by arttronics
I'm providing my answer after looking at the SO Answer provided by Samuel Hapak. The steal.jsfile is a Heavyweight at 18.7kb. Then to "steal" sortables.jsat 2.7kbbrings it to a hefty 21.4kb. Adding in optional drop at 4kband drag at 5.5kbbrings the grand total to 30.9kb. Reference demo page hereand view source NET tab in dev tools.
在查看 Samuel Hapak 提供的 SO Answer 后，我提供了我的答案。该steal.js文件是18.7kb. 然后“窃取”sortables.js在2.7kb使它变得沉重21.4kb。添加可选的 drop at4kb和 drag at5.5kb使总计为30.9kb。在此处参考演示页面并在开发工具中查看源 NET 选项卡。
For comparison, the jQuery UI Sortableplugin weights in at 33.3Kb(which includes necessary bare UI Corethat you don't want).
为了进行比较，jQuery UI Sortable插件的权重为 at 33.3Kb（包括UI Core您不想要的必要的裸露）。
Please consider the Interface Element Sortableslightweight plugin which weights in at a mere 18.9Kband that's withthree dependencies of drag, drop, and utilincluded.
请考虑界面元素Sortables轻量级插件，它在一个单纯的权重18.9Kb，这就是与3只的依赖drag，drop以及util包括在内。
Interface Element Sortablesalso has a simple example page HEREand HERE.
回答by NewUser
As you said-"jQuery UI (1.8+) is shaping up to be a great library". Well if you think so why choose any other library, I think you want an alternative to it because the jQuery ui library is very heavy to load. If yes, select only the features you need by making a custom download.Once you have downloaded the custom library. Upload it on your server or Upload it on free JavaScript hosting website such as-
http://yourjavascript.com/.
Or choose a website from this list.
正如您所说-“jQuery UI (1.8+) 正在成为一个伟大的库”。好吧，如果你这么认为为什么选择任何其他库，我认为你想要一个替代它，因为 jQuery ui 库加载非常繁重。如果是，请通过自定义下载仅选择您需要的功能。下载自定义库后。将其上传到您的服务器或上传到免费的 JavaScript 托管网站，例如 -
http://yourjavascript.com/。
或者从此列表中选择一个网站。
回答by Alexander Yezutov
As I remember it is possible to choose only the features, which are required by you, while downloading jQuery UI. So you can download only the sortable with it's dependencies.
我记得在下载 jQuery UI 时可以只选择您需要的功能。因此，您只能下载带有依赖项的 sortable。
回答by Hussein
Jquery / UI would be the best way to do this to ensure cross browser compatibility. You don't even have to load the JS and CSS files from your server. Both jQuery and jQuery UI can be loaded from google CDN. In addition most users already have jQuery js files already cached from google, so most don't even have to reload them.
Jquery/UI 将是确保跨浏览器兼容性的最佳方式。您甚至不必从服务器加载 JS 和 CSS 文件。jQuery 和 jQuery UI 都可以从 google 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>
Also check out this link to learn why it's better to load jQuery from Google as i have mentioned above. http://encosia.com/2008/12/10/3-reasons-why-you-should-let-google-host-jquery-for-you/
另请查看此链接以了解为什么我上面提到的从 Google 加载 jQuery 会更好。http://encosia.com/2008/12/10/3-reasons-why-you-should-let-google-host-jquery-for-you/
