Start learning with our library of video tutorials taught by experts. Get started

HTML5 Projects: Advanced To-Do List

Adding new draggable items


From:

HTML5 Projects: Advanced To-Do List

with Joseph Lowery

Video: Adding new draggable items

In this lesson, we'll add the Javascript code to insert a new list item. Sounds simple, right? Well, our list item is going to be dynamic, editable, draggable, and deleteable, if that's even a word. So it's got a lot going on. Consequently, there's a fair amount of Javascript involved. Don't worry though, I'll guide you every step of the way. I've got the index.htm file from the chapter 3 03_02 folder open in my code editor now, let's scroll all the way to the bottom so we can put in our js after the page loads. Now, I've already got my call to jquery in place right down there on line 150 just above the closing of the body tag.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
HTML5 Projects: Advanced To-Do List
45m 50s Intermediate Aug 26, 2013

Viewers: in countries Watching now:

The HTML5 Projects series combines HTML5, CSS3, and recent JavaScript API technologies to enhance your web projects with interactivity and multimedia. This installment shows how to create a basic to-do list widget with an editable field so users can enter their tasks and delete them as they are completed, and a more advanced version with all the bells and whistles, including a drag-and-drop interface that allows for quick and easy sorting. Author Joseph Lowery covers HTML5 technologies such as web databases, content editing in the browser, and CSS transitions and transforms.

Topics include:
  • Making content editable
  • Saving edits
  • Setting up the core files for your app
  • Removing list items
  • Enabling drag-and-drop sorting
Subjects:
Design Web User Experience Web Design Projects
Software:
HTML JavaScript CSS
Author:
Joseph Lowery

Adding new draggable items

In this lesson, we'll add the Javascript code to insert a new list item. Sounds simple, right? Well, our list item is going to be dynamic, editable, draggable, and deleteable, if that's even a word. So it's got a lot going on. Consequently, there's a fair amount of Javascript involved. Don't worry though, I'll guide you every step of the way. I've got the index.htm file from the chapter 3 03_02 folder open in my code editor now, let's scroll all the way to the bottom so we can put in our js after the page loads. Now, I've already got my call to jquery in place right down there on line 150 just above the closing of the body tag.

But I need one other helper. I'm going to add a link to a jquery plug in called html5sortable by Iranian developer Ali Farhadi. HTML5 Sortable is a lighter version of the jQuery UI Sortable routine with some additional functionality. It makes using the HTML5 drag and drop API a lot easier. I've already downloaded mine, and now let's head back to the code so I can link to it. I'll put my cursor right after the call to jQuery. And I'll enter in a script tag, set the type to text javascript.

And the source or SRC will go to my underscore scripts folder. And the name of the file were looking for is jquery.sortable.js. I'll close off my script tag and that's all I need there. As I said, the Javascript for this section is a bit involved. So I've created a code snippet to bring it in without having to type in every line. Let's take a look at it. You'll find it in the underscore assets folder. And it's called snippet.js. We start by ensuring that the code doesn't launch until the document is ready, using our document ready function.

Next, we set up a series of variables. The first one is used to hold the code for the new list item. The second one is a flag to determine whether we've already begun a list or not. The third one, the list uses standard Javascript syntax to get the UL list object. Now, we go to our main routine, starting on line six. This will trigger if the add to list button which has the id of add to do is clicked. We want to not actually submit the form so in the next line we prevent the default behavior.

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.

There are currently no FAQs about HTML5 Projects: Advanced To-Do List.

Share a link to this course
Please wait... Please wait...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed HTML5 Projects: Advanced To-Do List.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked