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.
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>
The answers posted before this one are surprisingly outdated.
Sortable is 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.
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.
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>
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 plugin is by far the most popular and on the download page only relevant parts can be checked (e.g. only the sortable plugin), still giving jquery's overhead.
There are few other custom scripts which are all old as well such as this. Searching for this will turn up a number of those.
If I take the liberty to theorize about this lack I would guess this to be the case because drag and drop requires a lot of 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.
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.
界面元素可排序还有一个简单的示例页面此处和< a href="http://interface.eyecon.ro/demos/sort_floats.html" rel="nofollow">此处。
I'm providing my answer after looking at the SO Answer provided by Samuel Hapak. The steal.js file is a Heavyweight at 18.7kb. Then to "steal" sortables.js at 2.7kb brings it to a hefty 21.4kb. Adding in optional drop at 4kb and drag at 5.5kb brings the grand total to 30.9kb. Reference demo page here and view source NET tab in dev tools.
For comparison, the jQuery UI Sortable plugin weights in at 33.3Kb (which includes necessary bare UI Core that you don't want).
Please consider the Interface Element Sortables lightweight plugin which weights in at a mere 18.9Kb and that's with three dependencies of drag, drop, and util included.
Interface Element Sortables also has a simple example page HERE and HERE.
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.
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 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.
发布评论
评论（9）
我发现的最小且最简单的代码是 HTML5 Sortable。它是一个小型 JQuery 插件，可在多种浏览器上运行，大小仅为 1.5 KB。
HTML5 可排序演示位于此处。
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.
Demos of HTML5 sortable are here.
在此之前发布的答案令人惊讶地过时了。
Sortable 是一个快速、无依赖、小型可重新排序的列表小部件，具有触摸支持，可与 HTML5 原生配合使用拖放 API。您可以将它与 Bootstrap、Foundation 或任何您想要的 CSS 库一起使用，并且实例化它只需要一行。
它支持列表内或跨列表的重新排序。您可以定义只能接收元素的列表，也可以定义可以从中拖动但不能放置元素的列表。它也得到了非常积极的维护，并MIT 在 GitHub 上获得许可。
The answers posted before this one are surprisingly outdated.
Sortable is 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.
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.
好吧，我在等待其他人得到更好的答案，但由于这还没有发生，我将分享我自己的研究：
如果我冒昧地对这种缺陷进行理论分析，我会猜测情况确实如此，因为拖放需要在旧版浏览器中进行大量跨浏览器黑客攻击和修复，因此任何计划经历这一过程的人麻烦将取决于现有的库，它们至少限制了痛苦。
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:
If I take the liberty to theorize about this lack I would guess this to be the case because drag and drop requires a lot of 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.
jQuery 可排序（缩小为 8.4 Kb）是另一个候选者。它是一个 jQuery 插件，并且似乎得到了积极的维护。
jQuery sortable at 8.4 Kb minified is another candidate. It's a jQuery plugin and seems to be actively maintained.
您可以尝试 javascriptmvc.com 框架。它建立在 jquery 之上，并且具有强大的“窃取”机制，允许您仅包含您真正使用的框架部分。
它的 mxui 库提供了可排序的功能，你可以在这里尝试一下：
http://javascriptmvc.com/docs.html#!Mxui.Layout.Sortable
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.
Its mxui library provides sortable functionality, you can try it here:
http://javascriptmvc.com/docs.html#!Mxui.Layout.Sortable
我在查看 Samuel Hapak 提供的 SO 答案后提供了我的答案。
steal.js文件是一个重量级文件，大小为18.7kb。然后“窃取”sortables.js2.7kb使其达到巨大的21.4kb< /强>。添加可选的4kb拖放和5.5kb拖动，使总计达到30.9kb。参考演示页面此处并在开发工具中查看源 NET 选项卡。为了进行比较，jQuery UI Sortable 插件的重量为
33.3Kb（其中包括您不需要的必要的裸UI Core）。请考虑 Interface Element Sortables 轻量级插件，其重量仅为
18.9Kb，具有三个依赖项：drag、drop和util包括在内。界面元素可排序还有一个简单的示例页面此处和< a href="http://interface.eyecon.ro/demos/sort_floats.html" rel="nofollow">此处。
I'm providing my answer after looking at the SO Answer provided by Samuel Hapak. The
steal.jsfile is a Heavyweight at18.7kb. Then to "steal"sortables.jsat2.7kbbrings it to a hefty21.4kb. Adding in optional drop at4kband drag at5.5kbbrings the grand total to30.9kb. Reference demo page here and view source NET tab in dev tools.For comparison, the jQuery UI Sortable plugin weights in at
33.3Kb(which includes necessary bareUI Corethat you don't want).Please consider the Interface Element Sortables lightweight plugin which weights in at a mere
18.9Kband that's with three dependencies ofdrag,drop, andutilincluded.Interface Element Sortables also has a simple example page HERE and HERE.
我记得在下载 jQuery UI 时可以只选择您需要的功能。因此，您只能下载可排序及其依赖项。
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 (1.8+) 正在成为一个伟大的库”。好吧，如果您这么认为，为什么选择任何其他库，我认为您需要一个替代方案，因为 jQuery ui 库的加载非常繁重。如果是，通过自定义下载仅选择您需要的功能。下载了自定义库。将其上传到您的服务器上或将其上传到免费 JavaScript 托管网站，例如 -
http://yourjavascript.com/。
或者从 此列表。
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 将是确保跨浏览器兼容性的最佳方法。您甚至不必从服务器加载 JS 和 CSS 文件。 jQuery 和 jQuery UI 都可以从 google CDN 加载。此外，大多数用户已经从 google 缓存了 jQuery js 文件，因此大多数用户甚至不需要重新加载它们。
另请查看此链接，了解为什么最好从 Google 加载 jQuery，正如我上面提到的。 http: //encosia.com/2008/12/10/3-reasons-why-you-should-let-google-host-jquery-for-you/
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.
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/