Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTML5 Drag and Drop API is a hot steaming 💩

HTML5 Drag and Drop API is a hot steaming 💩

Ossi Hanhinen

December 04, 2015
Tweet

More Decks by Ossi Hanhinen

Other Decks in Programming

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