jQuery UI interfaces

A series of mini-projects on how to build various styles of instantly-updating, AJAX-powered jQuery user interfaces.

A series of mini-project tutorials on how to build various styles of jQuery user interfaces, each of which updates a database in the background using an AJAX call.

In my Ultimate Web Development Course, I show all the steps needed to build from scratch a user interface like Youtube’s “add to favourites” feature. This course shows how to build more jQuery interfaces like this, using draggable(), sortable(), connectWith(), click(), and serialize().

Here are live demos of all the interfaces we build in this course.

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.

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!

Intended Audience: students, professionals, web developers

Download project files and import database
Lesson 1: Drag from one list to another using Sortable connectWith
Sortable.js - Source code
Lesson 2: Using sortable connectWith to connect multiple lists
Connectwith-multiple.js - Source code
Lesson 3: Click to remove item from one list and add to another
Click.js - Source code
Lesson 4: Using serialize to reorder drag-and-drop list items
Reorder.js - Source code
Lesson 5: Drag and drop to multiple destinations
Dragndrop.js - Source code


akaratzas , 4 months ago

good afternoon the course is very good and helped me develop an application that skeftomoun long. I know php and mysql, but little jquery and I needed an application drag and drop to move objects in different baskets - categories. All you will need to develop is with tooltips messaging categories for each object. Thanks for the knowledge and cοde

What's included

  • 6 Video Lessons
  • 6 Text Lessons

  • Works on all devices
  • Certificate of completion

Richard Stibbard