Tweet
Tweet

Slide 1

Slide 1 text

HTML5 Drag and Drop nodes across documents razvan.caliman@gmail.com

Slide 2

Slide 2 text

Cross-document drag and drop

Slide 3

Slide 3 text

Events Draggable element dragStart drag dragEnd Dropzone dragEnter dragOver dragLeave drop

Slide 4

Slide 4 text

Events Draggable element dragStart drag dragEnd Dropzone dragEnter dragOver dragLeave drop

Slide 5

Slide 5 text

Making elements draggable
  • ...

    • Slide 6

    Slide 6 text

    Carrying the content as string el.addEventListener( "dragstart", function(e){ e.dataTransfer.effectAllowed = "move"; e.dataTransfer.setData( "text/html", e.target.outerHTML ) }, false)

    Slide 7

    Slide 7 text

    Making a dropzone dropzone.addEventListener( "dragover", function(e){ e.preventDefault() }, false)

    Slide 8

    Slide 8 text

    Handling a drop dropzone.addEventListener( "drop", function(e){ e.target.innerHTML = e.dataTransfer.getData("text/html") }, false)

    Slide 9

    Slide 9 text

    Did it drop? el.addEventListener( "dragend", function(e){ if (e.dataTransfer.dropEffect !== "none") //handle your source element now }, false)

    Slide 10

    Slide 10 text

    .end() razvan.caliman@gmail.com