PHP, JQuery & Ajax Drag and Drop Table Rows

Dynamic sorting, or drag and drop list items/table rows, are great for clients as they're easy for them to understand. It's also a pretty awesome feature to have when it's going to be useful.

When I was updating MagicMan13, I made some significant changes behind the scenes to how things work. Gone was the static menu that could only be updated via FTP, to be replaced with links created via a table in the admin area of the site. The page links, content and everything else became fully manageable, but it was the page links that became the most important as there are plans for Chris to grow the site. One talked about change was possibly wanting a testimonials page. Now one can be quickly added, with the best part being that he can simply move the page link in the navigation bar to wherever he wants that new page to sit.

So I thought, let's share how to create drag and drop table rows using PHP, jQuery and Ajax, so that the table is dynamic and gets saved into a database on the fly. The first thing was to make sure that my table had a column for the position, which is notable in the below example.

With that in place, it's a matter of creating the actual table to view the information. 

On the same page, you need to make the table sortable and then update the order through Ajax. Note, in order to use .sortable() in jQuery, you need to have jQuery UI loaded as well.

Now to create the page that will update the database, called whatever you want to call it in the above (in this case, ajaxDBQuery.php)

And that is a basic example of the drag and drop system that I have employed where needed.