HTML5 Drag and Drop Nodes

A quick presentation about dragging and dropping DOM nodes between documents and listening for the correct "drop" event.

Shown at a Wurbe #47 lightning talk in Bucharest, November 2011. http://wurbe.ro/

Transcript

1. HTML5 Drag and Drop nodes across documents razvan.caliman@gmail.com
2. Cross-document drag and drop
3. Events Draggable element dragStart drag dragEnd Dropzone dragEnter dragOver dragLeave drop
4. Events Draggable element dragStart drag dragEnd Dropzone dragEnter dragOver dragLeave drop
5. Making elements draggable <li draggable="true"> ... </li>
6. Carrying the content as string el.addEventListener( "dragstart", function(e){ e.dataTransfer.effectAllowed = "move"; e.dataTransfer.setData( "text/html", e.target.outerHTML ) }, false)
7. Making a dropzone dropzone.addEventListener( "dragover", function(e){ e.preventDefault() }, false)
8. Handling a drop dropzone.addEventListener( "drop", function(e){ e.target.innerHTML = e.dataTransfer.getData("text/html") }, false)
9. Did it drop? el.addEventListener( "dragend", function(e){ if (e.dataTransfer.dropEffect !== "none") //handle your source element now }, false)
10. .end() razvan.caliman@gmail.com