Lightweight Alternative to jQuery UI's sortable()? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

---

开发者_JAVA百科

We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.

Closed 8 years ago.

Improve this question

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.

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 not table sorting, but list arrangement. Think re-ordering your Netflix queue. See the demo here: http://jqueryui.com/demos/sortable/

---

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>

---

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.

---

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.
• The same is possible with scrip.aculo.us which is build on prototype.js
• And with YUI
• An old 'DHTML' library provides a sortable list functionality as 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 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.

---

jQuery sortable at 8.4 Kb minified is another candidate. It's a jQuery plugin and seems to be actively maintained.

---

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

---

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.

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