HTML5 Drag and Drop API is a hot steaming @ohanhi Futurice WWWeeklies Dec 4th 2015

http://www.unicode.org/charts/PDF/Unicode-6.0/U60-1F300.pdf

Drag and drop (DnD) is a first class citizen in HTML5! The spec defines an event- based mechanism, JavaScript API, and additional markup for declaring that just about any type of element be draggable on a page. I don't think anyone can argue against native browser support for a particular feature. Native browser DnD means faster, more responsive web apps. - Eric Bidelman, September 30th, 2010

Making things draggable is super easy

Making elements dropzones is weird

There’s a bunch of useful events drag dragover dragstart dragend https://developer.mozilla.org/en-US/docs/Web/API/DragEvent#Event_types dragenter dragleave dragexit drop

There’s a bunch of useful events drag dragover dragstart dragend https://developer.mozilla.org/en-US/docs/Web/API/DragEvent#Event_types dragenter dragleave dragexit drop “Normal” events

There’s a bunch of useful events drag dragover dragstart dragend https://developer.mozilla.org/en-US/docs/Web/API/DragEvent#Event_types dragenter dragleave dragexit drop Fired X times per second (demo)

No content

Maybe I can use the stream of drag events as a signal!

Let’s take a look at the drag event target - The element being dragged. currentTarget - The node that had the event listener attached. … and nothing else.

What do we know from drag? ● Which DOM element is dragged ● Where the event listener was attached ● What is under the drag (dropzone) What we don’t know?

Okay so what do we know from drop? ● Which DOM element was dropped on ● Where the event listener was attached ● Which DOM element was dragged What we don’t know?

Umm… How do we connect these then?

No content

Working around the problem ● Encode necessary data in the DOM ● Dragstart: either set the dataTransfer or app state ● Dragging: update app state based on dropzone ● Drop: get the app state