Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
First, I'll take a real cursory look at jquery.ndd.js. As you look at the various functions here, you can see that basically what he's doing is making it easy for the drag and drop to work across a number of different browsers. The first issue that's addressed, starting on line 21, for WebKit browsers like Safari or Google Chr1ome. Next, he fixes the events so they work across the board, and so on. You can go through all of the various functions that you see here and really get a behind-the-scenes look of how everything works.
On the other hand, you can just use the library. Now, let's spend a little bit more time working with the custom code that's in dragdrop.js. Almost all the code that's located in this file is used for binding a specific drag-and-drop event to one or more page elements. It starts with the elements that we're dragging. The first code block identifies the painting class, which are all of our paintings, as the element that we are going to bind the dragstart event to.
Now, you'll notice also that as part of that dragstart, on line 3, data transfer is a set up. And what it's transferring is the ID of the element. Now, I also have tossed in some effects here so that the page will see more lively when you start to drag something. The headings will fade in fast. And there is a Hover state. And on hover, the images will fade out, and then when you let go of them, fade in. Next, we address the target area, which is in a div called favorites.
Now, if we take a look at the HTML page--and I'll scroll down to the side section, past the paintings-- we'll see the div on line 74. And that's where we have the heading of Favorites, and the big Drag Favorites section. Now, you'll also see in unordered list with the ID of faves. That's where the favorites will be listed. Let's had back to dragdrop.js. So, there are a number of events that are bound to the favorites ID.
First, there's the dragover event. When you drag the element over the target, favorites, the background color changes to a gray. Now, you'll also see, in three out of these four bindings, the code evt.preventDefault. This is a necessary call that needs to be made for drag and drop to work properly. Now, if you leave the background color as shown starting on line 16, the background color goes back to its original-- that purple color that you saw.
Now, although there is no functionality added to the dragenter event, you still need to have the preventDefault function applied for everything to work smoothly. Finally, there is the bind drop function. This is where we transfer the data that we previously got, the ID, and bring that in to what's going to become our list. The rest of the code, from line 25 on down to 31, basically builds up the list item.
And when it's done, it adds in a new LI tag with the ID and whatever's inside of that. After the item has been added to the list, we change the background color back to its purple and issue a final command, stop propagation, in order to close everything out. Okay, we've linked this code to our page. Let's go to index.htm, save those changes, and now return to the browser. Refresh the page. So, let me scroll down first, so we can see all of our paintings and our favorites drop zone there.
Let's say that I'm interested in patterns. So, I'll go over, click it up, drag it into the target area. We saw the background color changed there. You see the plus sign indicated on the icon itself. That's being handled by the operating system. I'll drop it, and there is patterns $200, the same price as listed on the main gallery section. Looking good. So, there's one favorite. Now, let's pick up arrows and bring that in.
Again, the background color changes, and when I drop it, the background color reverts, and I have arrows at 250 listed here. So, our drag and rop is really a beauty to behold, but right now its actions are only temporary. Watch what happens if I refresh the page. Poof! All of our favorites are gone, which kind of defeats the idea of favorites. So, in the next chapter, we'll integrate another HTML5 technology to make it all better.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.