Make an HTML5 drag and drop project list with autosave – Part 1

October 2nd, 2012

One of the great things about where the web is going is that a lot of the functionality that we’ve had to create with JavaScript and plugins is now being built into the browser. One that’s pretty useful is drag and drop. Sure, we need a bit of JavaScript to get it to work, but it’s a lot less than we needed before when we had to create the functionality from scratch. If you haven’t used the draggable attribute then check out this post on HTML5 Rocks. I’m not going to go over the code because I got my code from there and that post is a lot more in depth than I’d do here.

What I’m going to do in the first part of this tutorial is show you how to add another item to our list and make it draggable as well as delete an item when you drag it over the delete div. In the next part, we’ll use Ajax and PHP to automatically save our list every time a chance is made. No jQuery here, everything is going to done with vanilla JavaScript.

To add a new item to our list, we just use a form and get the value of each form element by it’s name using form.elements[‘name’].

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function addItem(e) {
   e.preventDefault();
   var newItem = document.createElement('li');
   var title = form.elements['project'].value;
   if (title === '') {
       return false;
   }
   var ownerIndex = form.elements['owner'].selectedIndex;
   var owner = form.elements['owner'].options[ownerIndex].value;
   var monthIndex = form.elements['month'].selectedIndex;
   var month = form.elements['month'].options[monthIndex].value;
   var dayIndex = form.elements['day'].selectedIndex;
   var day = form.elements['day'].options[dayIndex].value;

   var newContent = title + ' - ' + owner + ' - ' + month + ' ' + day;
   newItem.innerHTML = newContent;

   ul.appendChild(newItem);
   items = document.querySelectorAll('.projects li');
   addListeners();
   form.elements['project'].value = '';
}

This function is pretty straight forward, we get the values in our form and use it to fill out the text of our new item. Then we add the item to our list of projects in the document and add it to our items list to that we add can drag it. Finally, we clear out the projects input because our addItem function has an if statement that returns false if the projects input is empty so that we can’t add empty projects.

The delete div works a lot like the project items except you can’t drag it. We still have dragover, dragenter, dragleave and drop to work with. The one that we care the most about to be able to delete our item, everything else is pretty much the same as our project items.

1
2
3
4
5
6
7
8
function deleteItem(e) {
   if (e.stopPropagation) {
       e.stopPropagation();
   }
   el.parentNode.removeChild(el);
   this.style.borderColor = '#ccc';
   return false;
}

The line of code that matters here is el.parentNode.removeChild(el). Essentially what we’re saying here is get the parent node of the element and then use removeChild to remove that element. Nothing really complicated here.

These are the keys to getting this to work. Of course, right now, if you reload the page all the projects you’ve added are gone and the ones you’ve deleted are back. Not really useful but in the next part, we’ll add our AJax and PHP to save the list of projects and the order they’re in. Check out the demo and the code on Github.

One Response to Make an HTML5 drag and drop project list with autosave – Part 1

  1. Steve says:

    Thank You so much, this is exactly what I am looking for.

Leave a Reply

Your email address will not be published. Required fields are marked *