39

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/

8
  • 4
    not that im aware of. you can make a custom build of the jQ-UI library from the site though and only include the bits you need.
    – Erik
    Commented Mar 17, 2011 at 0:28
  • 1
    Did you find one? I'm still looking, but I've found neb.net/playground/dragdrop and tool-man.org/examples/sorting.html, which could be cannibalisable.
    – nornagon
    Commented Apr 28, 2012 at 11:23
  • 1
    There's nothing else out there that is "turn-key" such as jQuery UI (unless you want to invest in GWT.) If you were to write your own (as I have), you'll need about 2-3 months to get all the DOM and JS quirks out for all the browsers. The amount of code will be twice as large as UI and after creating a build/minify system to reduce the file sizes, you'll be wondering why you didn't just use UI in the first place. :)
    – rxgx
    Commented Jun 5, 2012 at 3:14
  • This might help you tb : tool-man.org/examples/sorting.html :)
    – Tats_innit
    Commented Jun 5, 2012 at 9:17
  • As others suggested, I think that your best shot is to use jQuery UI (customizing the build to make it lighter). Make sure to enable gzip compression in your server, that reduces the file size
    – davidaam
    Commented Jun 7, 2012 at 8:16

9 Answers 9

29

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.

3
  • Fantastic! This question is nearly 2 years old. Glad someone built something, finally.
    – tbeseda
    Commented Nov 29, 2012 at 2:28
  • 2
    Hello there. Is there any lightweight alternative for TOUCH devices besides jquery ui? Commented Feb 2, 2014 at 19:21
  • 2
    @scooterlord: yes: Rubaxa's Sortable. Commented Nov 30, 2014 at 23:26
29

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>

3
  • but it's a real pain to read!
    – n00dl3
    Commented Jan 25, 2016 at 11:29
  • 1
    Be aware that Sortable by RubaXa does NOT work if your site is required to work on IE (any version) on an intranet. It uses .forEach which is not supported in quirks mode. I discovered this to my cost after integrating it into my project and then it was released to the client
    – freefaller
    Commented Sep 23, 2016 at 15:04
  • 1
    Please correct first link
    – robsch
    Commented Dec 13, 2018 at 8:51
2

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.

1
  • @downvoter: Care to explain the -1? Commented Nov 30, 2014 at 23:47
2

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

0

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

0

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.

5
  • There are a two problems with your answer. One... you didn't answer the question clearly, you main point provided criticism on what heavyweight/lightweight means. You might provide references to backup your data as I don't necessarily agree with your definition of heavyweight. Two... you are commenting on the meta of answers. This discussion is more appropriate to meta.stackoverflow.com, not here.
    – Andy Jones
    Commented Jun 2, 2012 at 2:12
  • 1
    @AndyJones, I did provide an alternative to jQuery UI Sortable with file-size verifiable references you can access which is included in my answer. If you know of alternative plugin that is less than 18.9kb please join the party and create an answer. That said, the term Heavyweight applies to the byte-size of the plugin, as OP want's a Lightweight version instead.
    – arttronics
    Commented Jun 2, 2012 at 2:26
  • What references can your provide that 15.2Kb vs 33.3Kb is lightweight vs heavyweight? Or what heavyweight vs lightweight means to you personally? If you're using a 56Kb modem, 15Kb is an appreciable difference - using a 1Mbps connection, it is not.
    – Andy Jones
    Commented Jun 2, 2012 at 2:30
  • 1
    @AndyJones, for creditable reference please visit the jQuery Home Page HERE. They are boosting about Lightweight Footprint of 31kb file-size. I hope my answer now makes sense and is not worthy of a down-vote. If you decide to delete these message comments I will do the same. Thanks Andy Jones.
    – arttronics
    Commented Jun 3, 2012 at 2:23
  • Thank you for providing some metrics and a jQuery UI alternative I hadn't seen before.
    – tbeseda
    Commented Jun 20, 2012 at 0:52
-1

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.

1
  • 2
    Yes, you can piece together a custom library, but I'm looking for a specific solution to sortable functionality without the need for jQuery UI's core.
    – tbeseda
    Commented Mar 18, 2011 at 15:13
-1

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.

-5

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/

1
  • 3
    CDNs have many benefits, also including parallel downloads, but my requirement is for a library that exclusively tackles the sortable functionality.
    – tbeseda
    Commented Mar 18, 2011 at 15:10

Not the answer you're looking for? Browse other questions tagged or ask your own question.