jQuery Plugin To Reorder Table Rows Via Drag And Drop - Orderable

Orderable is a small and easy jQuery plugin which enables the users to reorder your html rows using drag and drop. The plugin also provides a drag handler on touch devices so it works perfectly on mobile webpages.

Basic usage:

1. Place the CSS jquery.orderable.css in the header, and the JavaScript jquery.orderable.js at the end of the document.

<link href="css/jquery.orderable.css" rel="stylesheet">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/jquery.orderable.js"></script>

2. Active the drag and drop row reordering functionality in your html table.

$("#myTable").orderable();

3. The plugin allows you to reorder a group of rows wrapped in the tbody element.

$("#myTable").orderable({
  useTbodyAsUnit: true
});

4. Callback functions available.

$("#myTable").orderable({
  onLoad: function () { console.info('I loaded!') },
  onInit: function () { console.info('I did all my thingies!') },
  onOrderStart: function (element) { console.info('I\'m reordering! Selected unit: ', element) },
  onOrderCancel: function (element) { console.info('I\'m not reordering anymore, I got cancelled! Selected unit: ', element) },
  onOrderFinish: function (element) { console.info('I\'ve finished reordering! Selected unit: ', element) },
  onOrderReorder: function (element) { console.info('I\'ve finished reordering and I definitely changed order! Changed unit: ', element) },
});

Change log:

2016-11-05

• Added onOrderReorder parameter
• Added jquery.orderable.order.finish.reorder event
• Misc bugfixes and environment agnostic improvements

---

This awesome jQuery plugin is developed by iuliuvisovan. For more Advanced Usages, please check the demo page or visit the official website.