Using a drop zone


show more Using a drop zone provides you with in-depth training on Developer. Taught by Bill Weinman as part of the HTML5: Drag and Drop in Depth show less
please wait ...

Using a drop zone

HTML5 drag and drop has a feature that allows you to attach a payload to a drop event. In theory, this can be very convenient, but in practice it's really a mixed bag, and at least for now, I am recommending do not use this feature in production. Here's how it works. For this example, I will be demonstrating this code in the Google Chrome browser because it fully supports it as part of the spec. It's important to note that this does not work in Firefox or Internet Explorer. So let's start by taking a look at the code, and I am just going to page through it really quick for those of you who need that, and there is the top of the javascript, and there's the next page of it. Here we are actually in a start down in the HTML.

There is a couple of things you need to see. First of all, in our image you will notice there is another attribute here called data value, and its value is in quote marks I Am a Rock, and that's the payload. And down in the div for dz1, you will no...

Using a drop zone
Video duration: 6m 5s 1h 0m Intermediate

Viewers:

Using a drop zone provides you with in-depth training on Developer. Taught by Bill Weinman as part of the HTML5: Drag and Drop in Depth

Subjects:
Developer Web
Software:
HTML
Author:
please wait ...