First launched in 2014, this series of mini-project tutorials has proven popular ever since and shows how to build various styles of jQuery user interfaces, each of which updates a database in the background using an AJAX call.

In the first, we drag items from one list to another – we have a list of available fruits on the left and out-of-stock fruits on the right, and we can drag an item from one list to the other to change its availability. Refresh the page and the items remain in their new position because we’ve updated their details in the database in the background. This is done using “sortable” and “connect with” in jQuery to connect the two lists.

The second project is the same but with more than two lists – we can drag items from any list to any of the others and their new positions are saved. The code for this is is very similar to the first one, and again uses “sortable” and “connect with”.

Third is a ‘click’ interface where the user just clicks on an item and it is immediately added to the opposite list. Because it’s not so obvious to the user how this works, we’ll have instructions appear as the mouse moves over each of the lists.

The fourth mini-project reorders list items using a drag-and-drop interface – again, this is done with jquery sortable, this time using the serialize function to send the data to the AJAX file.

In an add-on lesson to the original course, I combine lesson 2, in whch items are dragged between multiple lists, and lesson 4, in which items are reordered in a list. In this lesson, you can drag between lists and the position of the items in the lists is also stored in the database.

The last of the mini-projects is another drag and drop interface – this time with multiple boxes as containers – using jquery draggable and droppable interactions.

As with all my tutorials, these provide everything you need to get your project working – including the database connection and AJAX files – and all the code is available as a zip file to download.

So if you’ve been searching around here and there and only found bits of code which are hard to put together, this series of tutorials may be just what you’ve been looking for – let’s get going!