{ Lekker Logic }

Technology Solutions

Easy Drag and Drop HTML Table Rows With jQuery

Quick Intro: Drag and Drop, re-ordering of HTML Table Rows.  Working Demo

I love simple, easy things and love even more when those things involve programming!   When needing to re-arrange table rows in an HTML table via drag & drop UI/UX, it doesn’t get much easier than jQuery UI.  This basic library make this task so quick you can move on to more pressing issues.  Here is the working demo.

First, you will need to add jQuery UI to your file:

You will also need the core jQuery library file, but I will assume you already have that somewhere at this point.  If not, make sure you insert this ahead of the UI file script.  Since I already have my own CSS on the table I’m not going to include the jQuery UI CSS file either.

Then all we need to do is add the jQuery sortable() to our table on the <tdbody>  element:

That’s it!  The finished code is below and your table rows are now drag & drop and sortable!

Working Demo & Complete Source Code:

 

Lekker Logic
Tags: Bootstrap, Javascript, jQuery, Programming, Tutorials