Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

833
Views
Lightweight Alternative to jQuery UI's sortable()?

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/

over 4 years ago · Santiago Trujillo
3 answers
Answer question

0

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>

over 4 years ago · Santiago Trujillo Report

0

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.

over 4 years ago · Santiago Trujillo Report

0

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.

over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!