In the first part, I showed you how to set up our drag and drop list using HTML5’s built in drag and drop as well as add new projects to our list. Everything works great except it’s not really useful because every time we refresh the page, it resets and removes all the changes we’ve made. When I made this, the one thing I really wanted to do was make is super easy to use. I wanted to build it so the user never had to push a save button for any of their actions. To do this, we’ll use Ajax to save to our database every time the user makes a change to the list, so any time they reposition items, add an item or delete one. If you don’t know how to set up a database or save to one, then I’d advise that you learn that before you do this tutorial because I’m not going to go to deeply into that here.
The first thing we need to do is create a couple of functions that allow us to get the items order and then save it to our database. The database only needs two columns, one for the project information and one for the item’s position.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | function listChange() { var tempItems = document.querySelectorAll('.projects li'); [].forEach.call(tempItems, function(item, i) { var order = i + 1; var it = 'project=' + item.innerHTML + '&project_order=' + order; saveList(it); }); } function saveList(item) { var request = new XMLHttpRequest(); request.open('GET', 'save.php?' + item); request.send(); } |
Our first function, listChange, we call whenever there’s a change to our list that’s not deleting an item. So we call it whenever an item is dropped into it’s new position or when a new item is added to the list. For each item in our list we call the saveItem function which saves the item and it’s order position. Obviously, if your list has hundreds of items, then this isn’t going to be the most efficient way to do this, but I think that because this is just a basic demo, we can get away with it here. In the saveItem function we use the simplest Ajax code possible to send the info to our save php file.
We also have a function for when we delete items from the list:
1 2 3 4 5 | function deleteProject(item) { var request = new XMLHttpRequest(); request.open('GET', 'delete.php?project=' + item); request.send(); } |
It’s the same thing as our saveItem function except we send the information to the delete php file. We call this function whenever the deleteItem function is called. With these functions, we’ve covered every change that can be made to our list which will make our app a lot easier to use. The user will never have to worry about if their list is saved or not when they leave the page.
One thing about our save.php file. In order to save our order, we need to change the order number in our database when it’s changed. We need to check each item in our list on the web page and compare it to the version in our database and if the order number has changed, then we need to save the new version. Lucky for us we don’t need to manually do this. MySQL has a built in query that will check if an item is different than the version in the database and if it is then it saves it.
1 |
Replace Into checks if the version in the database is different and if it is, then it saves the new version.
You can check out the code on Github. Remember, this is as basic as something like this can get. I wanted to show the basics of how something like this could be done because most of the web app tutorials I’ve come across make something pretty complicated and some of the code is hard for beginners to follow. This should make a good starting point for anyone that wants to move beyond regular web sites and into web apps. Because I firmly believe that web apps will surpass native as mobile speeds get faster and mobile browsers get more powerful.