Lightweight Alternative to jQuery UI's sortable()?

javascript jquery jquery-ui jquery-ui-sortable
tbeseda picture tbeseda · Mar 17, 2011 · Viewed 30.5k times · Source

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/

Answer

Artem Verbo picture Artem Verbo · Jan 6, 2014

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>

Related questions

jQuery UI sortable: determining in what order the items are

Here is an interesting use of JavaScript: reordering items with drag and drop. The implementation itself in my page works fine, but is there a way to determine in which order the user put the items? I'm asking because I …

Read More
How do I connect multiple sortable lists to each other in jQuery UI?

I'm new to jQuery, and I'm totally struggling with using jQuery UI's sortable. I'm trying to put together a page to facilitate grouping and ordering of items. My page has a list of groups, and each group contains a list …

Read More
Moving an item programmatically with jQuery sortable while still triggering events

I am using jQuery Sortable. I have the HTML setup like so: <ul id='plan'> <li class='item'>1</li> <li class='item'>2</li> <li class='item'>3</li&…

Read More