Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Design and personalized recommendations.Start Your Free Trial Now
- View Offline
- Making content editable
- Saving edits
- Setting up the core files for your app
- Removing list items
- Enabling drag-and-drop sorting
Skill Level Intermediate
Next we test to see if this is the first time a new list item has been added by checking our flag. If so we get the value from the input field and then build up our list item code. You can see that code on line ten. Let's go through this bit by bit. First, there is the opening LI tag followed by a span with a class of handle. This is the :: that form our gripper handle for moving the list item. After the closing span tag is an input field where the list item goes.
You may be wondering why we're using in input rather then the HTML 5 content editable attribute. Unfortunately there's a pretty major conflict between the dragable API and content editable in the current crop of web kit and blink browsers. That's iOS in Google Chrome, whether it's as designed or a design flaw doesn't really matter right now, what does matter is that you can't currently use content editable on dynamically inserted dragable items. So, I've switched things up a bit and gone back to the old reliable input field, which drags just fine, thank you very much.
Now back to our list item. The last element, after the input tag, is a link for removing that list item. Basically a big red X. Once that's all set, we'll change our new list flag to false. That happens on line 11, now if this isn't the first list item we get the to do entry as before on line 13 and then next we clone the last item in the list and then substitute its value attribute with the one that the user entered. Pretty cool, right? Next up is a bit of code to determine whether to show the clear all link or not.
It's hidden when the list is empty or when there's just one list item. Because that can always be removed by clicking the red X. So we get the number of list items and, if there's more than one, we show the paragraph. That holds the clear-all link. Let's scroll down a bit. Now on line 23, we're ready to add our new item. Next, we just have a little housekeeping to keep things neat and tidy. First, we'll clear out the value that the user put in to the add new item list, and then we reset it's focus, so that the user can make another item entry very easily.
Finally, we bring our HTML5 sortable library into play. To make sure we're starting from a clean slate, we actually get rid of it first if it does exist and then we set it up and target the span with a class of handle to act as our, well, handle. So that's the full code breakdown. Let's select the entire block and then copy it and go back to our index.htm file. After the call to jquery.sortable.js, I'll enter in a new script tag, give it a type also of text Java script.
And then within that tag, paste in our snippet, with our major building block in place we can now save our file and we're ready for the next step, handling the edits.