Web Directions Code 12: Drag and Drop

A little primer to native HTML5 drag and drop.

Transcript

1. Hello Friday, 25 May 12
2. Drag ’N’ DROp Friday, 25 May 12
3. WHY? Friday, 25 May 12 * Different user-interface models — why are we bothering? * Can really make a graphical user interface feel alive. * Simple, but often overlooked.
4. Friday, 25 May 12 * In web design we expose the underlying structure of our applications. * Users don’t care. * Computer interfaces are abstractions. * Drag and drop takes some of the abstraction away. * Touch interfaces more intuitive because the separation between action and effect is small.
5. Friday, 25 May 12 * All the major JavaScript libraries have supporting plugins or UI libraries that include some sort of drag and drop components * jQuery UI * Dojo * Mootools * None of them use the native APIs.
6. Friday, 25 May 12 * Added to the HTML5 spec. * Specification is really a reverse-engineered version of the Internet Explorer 5 implementation of drag and drop.
7. Friday, 25 May 12 * This is a Drag and Drop tutorial from 2000 that is still relevant.
8. Friday, 25 May 12 * Desktop browser support for drag and drop is generally *excellent* * Mobile less so.
9. <div  draggable='true'>Drag  me!</div> Friday, 25 May 12 * This is how you make something draggable. * Set draggable attribute to `true` * Same functionality you'll see in most browsers when dragging anchors or images * We can add functionality to our draggable objects is through the JavaScript API.
10. dragstart drag dragenter dragleave dragover dragend drop Friday, 25 May 12 * API has 7 events
11. // Handle the 'dragstart' event var onDragStart = function(e) { $(this).addClass('dragging'); } $('body').on('dragstart', '[draggable]', onDragStart); Friday, 25 May 12 * Simple event listener syntax (using jQuery). * `this` in dragstart callback is the element being dragged.
12. var onDragStart = function(e) { $(this).addClass('dragging'); } var onDragEnd = function(e) { $(this).removeClass('dragging'); } var onDragEnter = function(e) { $(this).addClass('over'); } var onDragLeave = function(e) { $(this).removeClass('over'); } Friday, 25 May 12
13. Drop it like it’s hot Friday, 25 May 12 * Default droppable targets in most browsers: inputs, textareas, and contenteditable regions. * The spec also includes a `dropzone` attribute. Only supported by Opera. * We can use the `drop` event.
14. var onDragEnter = function(e) { // You *must* cancel the default event to be able to drop e.preventDefault(); } var onDragOver = function(e) { // You *must* cancel the default event to be able to drop e.preventDefault(); } Friday, 25 May 12 * Gotchas: for the drop event to fire you need to cancel both the `dragover` and `dragenter` events. If you don't do this then *no drop events will ever fire*.
15. // What are we draggin’? var draggedElement; var onDragStart = function(e) { // Keep track of the draggable draggedElement = this; e.originalEvent.dataTransfer.setData('text/html', this.innerHTML); } var onDrop = function(e) { // Change places! $(draggedElement).html( $(this).html() ); // Pull out the transferred data $(this).html( e.originalEvent.dataTransfer.getData('text/html') ); } $('body') .on('drop', '[data-behaviour~="droppable"]', onDrop) .on('dragstart', '[draggable]', onDragStart); Friday, 25 May 12 * `dataTransfer` object is the secret. * Lets you transfer data around. * A setData and getData function. * setData takes two arguments, a data type, and then the data itself. * In the drop event we get access to that same dataTransfer object.
16. dataTransfer.dropEffect = 'copy' dataTransfer.effectAllowed = 'move' dataTransfer.setDragImage(element, x, y) dataTransfer.addElement(element) Friday, 25 May 12 * The dataTransfer object has a other properties and methods. * Drop effect lets you specify the kind of operation: copy, move, or link elements. * Effect allowed lets dropabbles specify what kind of operation they'll handle. * Set drag image lets you use an image instead of the default draggable element as the "ghost" element. * Add element lets you do the same with an arbitrary DOM element. * Some of these are broken across browsers
17. Friday, 25 May 12 * Drag and Drop isn't limited to data that's in the page. * We can also drag files from the desktop and then manipulate that data. * Combine drag and drop with other HTML5 APIs like FileReader or FileList that allow us to parse and handle the dropped file data.
18. Friday, 25 May 12 * Fontdragr is a nice example from Ryan Seddon * Allows you to drag and drop font files from your computer onto the browser window. * Converts them with the FileReader API to a data URI. * Lets you override page styles with type from your own computer. * Scope for using drag and drop and other APIs to reduce the friction between the your web app and the users desktop environment.
19. THANKS Friday, 25 May 12 @makenosound