Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
HTML5 drag and drop has a feature that allows you to attach a payload to a drop event. Unfortunately that technique breaks in browsers like Firefox that don't support the datavalue attribute. In this movie I'll present an alternative technique that has other benefits as well. So here we have the 05-nodropzone.html file from the Chapter 2 folder of our exercise files and you'll see that it works exactly the same as the drop zone version that was cover in our previous movies.
So when I pick this up you see it says drag started (I Am a Rock) and when I drop it into drop zone it says received rock: I Am a Rock. So let's take a look at the code and see how much simpler this is. Starting at the top here we have a couple variables and we have an associative array called payloads that has various messages in it. The first one is the only one is being used because we really just have the one image in this file. We have the detectDragAndDrop function that we've seen before and we have three event handlers and you can see right away that these are somewhat simpler than the ones that we were in our previous movie using the dropzone and datavalue technique.
And then down here at the bottom is our HTML which also is simple, because we don't have the datavalue attribute for the image or the dropzone attribute for the drop zone. So let's take a quick look at how this works. When the dragstart event is fired the handle dragStart function gets called, it saves the ID from the draggable element, and it displays a status message with the payload and the payload is indexed on the ID itself and you remember a payload up here. So our first image, image, 1 that's our ID, it'll say I Am a Rock.
So that displays that I Am a Rock message. And then in the handleDrop handler it simply does the same thing and you'll notice this if(event.preventDefault), this is for the benefit of the Firefox browser. Instead of handling the event it will go ahead and redirect and just display the image. So this prevents that from happen. And that's really i. It's as simple as that. All we're doing is instead of passing this payload around, we're simply passing the ID around, which we have anyway, and the whole purpose of the ID attribute is to uniquely identify a particular object on your page and so that makes a perfect index into our associative array. And so we're using things the way they were intended to be used and as a result we have much simpler code.
So for most purposes this technique is more flexible and more powerful and simpler to implement than the dropzone/datavalue technique and as more browsers include support for the full HTML5 drag-and-drop specification, both techniques will work and both techniques may end up with their place.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 101694 Viewers
61 Video lessons · 88445 Viewers
71 Video lessons · 72283 Viewers
56 Video lessons · 104006 Viewers
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.
Your file was successfully uploaded.