Receiving drops without a drop zone
Video: Receiving drops without a drop zoneHTML5 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.
- Next steps
Viewers: in countries Watching now:
- Detecting drag and drop support
- Using the HTML5 draggable and dropzone attributes and onDragStart event
- Exploring different events
- Receiving drops with or without a drop zone
- Creating a simple game
Receiving drops without a drop zone
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.
There are currently no FAQs about HTML5: Drag and Drop in Depth.