Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Adding new draggable items

From: HTML5 Projects: Advanced To-Do List

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.

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.

Show transcript

This video is part of

Image for HTML5 Projects: Advanced To-Do List
HTML5 Projects: Advanced To-Do List

13 video lessons · 9997 viewers

Joseph Lowery
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

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.


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.

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
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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

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
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.