Adding new draggable items


show more Adding new draggable items provides you with in-depth training on Design. Taught by Joseph Lowery as part of the HTML5 Projects: Advanced To-Do List show less
please wait ...

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

Adding new draggable items
Video duration: 5m 10s 45m 50s Intermediate

Viewers:

Adding new draggable items provides you with in-depth training on Design. Taught by Joseph Lowery as part of the HTML5 Projects: Advanced To-Do List

Subjects:
Design Web
Software:
HTML JavaScript CSS
Author:
please wait ...