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
   

   View Slide

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

   View Slide

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
   

   View Slide

4. Making things draggable is super easy
   

   View Slide

5. Making elements dropzones is weird
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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)
   

   View Slide

9. View Slide

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

    View Slide

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.
    

    View Slide

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?
    

    View Slide

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?
    

    View Slide

14. Umm… How do we connect these then?
    

    View Slide

15. View Slide

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
    

    View Slide