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 💩

0c7b518ea15451ceb51d6343c276c3a1?s=128

Ossi Hanhinen

December 04, 2015
Tweet

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)
  9. None
  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?

  15. None
  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