Join Bill Weinman for an in-depth discussion in this video Receiving drops without a drop zone, part of HTML5: Drag and Drop.
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…
- 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