Skip to content
jQuery Orderable is a jQuery plugin that allows reording of elements inside an HTML <table> via drag'n'drop.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

jQuery Orderable

jQuery Orderable is a jQuery plugin that allows reording of elements inside an HTML <table> via drag'n'drop.



Add .js and .css files into your project:

  • Via CDN
    <script src=""></script>
    <link rel="stylesheet" href=""></link>    




  • By supplying a params object:

    Example: $('#myTable').orderable({ flagName: 'flagName' });

    Available parameters:

  • useTbodyAsUnit: Set to true if you want to move whole row-groups (<tbody> elements)

    • false (default) - The order units are the <tr> elements inside the target table
    • true - The order units are the <tbody> elements inside the target table
  • useHandlerOnTouch: Set to true if you want to use specific drag handlers to move a row when on touch devices.

    • false (default) - The entire row/row-group is draggable
    • true - Only elements decorated with the touch-move-row class will act as drag handlers when on a touch device. (It is your responsibility to place and mark these handlers.)
  • onLoad, onInit, onOrderStart, onOrderCancel, onOrderFinish, onOrderReorder: Supply functions to these parameters if you want to handle behaviour at specific points of the plugin's activity. These are fired together with their respective events, see behaviour/events below.

  • By adding state classes to markup:

    Available classes:

  • .orderable-exclude: Add this class to a row, row group or table data to exclude the element from being pullable for reordering

  • .touch-move-row: Add this class to any element if you want it to act as its containing row's handler when on a touch device

Example with full parameters:

    $('.scrollable-table-body table').orderable({
      useTbodyAsUnit: true,
      useHandlerOnTouch: true,
      onLoad: function () {'I loaded!') },
      onInit: function () {'I did all my thingies!') },
      onOrderStart: function (element) {'I\'m reordering! Selected unit: ', element) },
      onOrderCancel: function (element) {'I\'m not reordering anymore, I got cancelled! Selected unit: ', element) },
      onOrderFinish: function (element) {'I\'ve finished reordering! Selected unit: ', element) },
      onOrderReorder: function (element) {'I\'ve finished reordering and I definitely changed order! Changed unit: ', element) },


Events are dispatched at key moments of the reordering process. Add handlers to them if you want to add custom behaviour to the plugin.


  document.addEventListener('jquery.orderable.order.start', function (changedElement) {
      console.log("I\'m reordering! Selected unit: ", changedElement);
  }, false);

Available events:

  • jquery.orderable.load: Dispatched when the plugin has sucessfully loaded (make sure to add event listener before applying the plugin)
  • jquery.orderable.init: Dispatched when targeted table was found & was sucessfully prepared for reordering
  • jquery.orderable.order.start: Dispatched when the left mouse button was clicked on a reorderable row
  • jquery.orderable.order.cancel: Dispatched when the picked row was dropped in an invalid location
  • jquery.orderable.order.finish: Dispatched when the target row got successfully moved (even if onto its initial position)
  • jquery.orderable.order.finish.reorder: Dispatched when the target row sucessfully moved (but only if end position different than start position)


Iuliu Vișovan / /

You can’t perform that action at this time.