HTML5 Drag and Drop API is a hot steaming 💩

Transcript

1. HTML5 Drag and Drop API is a hot steaming @ohanhi Futurice WWWeeklies Dec 4th 2015
2. http://www.unicode.org/charts/PDF/Unicode-6.0/U60-1F300.pdf
3. 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
4. Making things draggable is super easy
5. Making elements dropzones is weird
6. 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
7. 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
8. 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)
10. Maybe I can use the stream of drag events as a signal!
11. 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.
12. 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?
13. 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?
14. Umm… How do we connect these then?
16. 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