{ "attachments": [], "comments_archived": true, "date": "2009-07-15T15:26:40.000Z", "layout": "post", "tags": [ "webdev", "firefox", "js", "outliners", "outlining", "javascript", "dhtml", "eventdelegation", "entries", "mozilla", "draganddrop" ], "title": "HTML5 drag and drop in Firefox 3.5", "wordpress_id": 1793, "wordpress_slug": "html5-drag-and-drop", "wordpress_url": "http://decafbad.com/blog/?p=1793", "year": "2009", "month": "07", "day": "15", "isDir": false, "slug": "html5-drag-and-drop", "type": "entry", "postName": "2009-07-15-html5-drag-and-drop", "html": "

\nOh hey, look! It's another blog post—and this one\nis cross-posted on hacks.mozilla.com.\nI won't say this is the start of a renewed blogging habit, but let's see what happens.\n

\n\n\n
\n

\nDrag and drop is one of the most fundamental interactions\nafforded by graphical user interfaces. In one gesture, it\nallows users to pair the selection of an object with the\nexecution of an action, often including a second object in the\noperation. It's a simple yet powerful UI concept used to\nsupport copying, list reordering, deletion (ala the Trash / Recycle Bin),\nand even the creation of link relationships.\n

\nSince it's so fundamental, offering drag and drop in web\napplications has been a no-brainer ever since browsers first\noffered mouse events in DHTML. But, although\nmousedown, mousemove, and\nmouseup made it possible, the implementation has been\nlimited to the bounds of the browser window. Additionally,\nsince these events refer only to the object being dragged,\nthere's a challenge to find the subject of the drop when\nthe interaction is completed.\n

\nOf course, that doesn't prevent most modern JavaScript\nframeworks from abstracting away most of the problems and\nthrowing in some flourishes while they're at it. But, wouldn't\nit be nice if browsers offered first-class support for drag and\ndrop, and maybe even extended it beyond the window sandbox?\n

\nAs it turns out, this very wish is answered by the HTML 5 specification \nsection on new drag-and-drop events, and \nFirefox 3.5 includes an implementation of those events.\n

\nIf you want to jump straight to the code, I've put together \nsome simple demos \nof the new events. \n

\nI've even scratched an itch of my own and\nbuilt the beginnings of an outline editor,\nwhere every draggable element is also a drop target—of which\nthere could be dozens to hundreds in a complex document, something\nthat gave me some minor hair-tearing moments in the past\nwhile trying to make do with plain old mouse events.\n

\nAnd, all the above can be downloaded or cloned from \na GitHub repository\nI've created especially for this article—which continues after the jump.\n

\n
\n\n\n\n\n\n\n\n\n\n
\n

The New Drag and Drop Events

\n

\nSo, with no further ado, here are the new drag and drop events,\nin roughly the order you might expect to see them fired:\n

\n
\n
dragstart
\n
\nA drag has been initiated, with the dragged element as the\nevent target.\n
\n
drag
\n
\nThe mouse has moved, with the dragged element as the event target.\n
\n
dragenter
\n
\nThe dragged element has been moved into a drop listener,\nwith the drop listener element as the event target.\n
\n
dragover
\n
\nThe dragged element has been moved over a drop listener,\nwith the drop listener element as the event target. Since\nthe default behavior is to cancel drops, returning\nfalse or calling preventDefault() in\nthe event handler indicates that a drop is allowed here.\n
\n
dragleave
\n
\nThe dragged element has been moved out of a drop listener,\nwith the drop listener element as the event target.\n
\n
drop
\n
\nThe dragged element has been successfully dropped on a drop\nlistener, with the drop listener element as the event\ntarget.\n
\n
dragend
\n
\nA drag has been ended, successfully or not, with the\ndragged element as the event target.\n
\n
\n

\nLike the mouse events of yore, listeners can be attached to\nelements using addEventListener() \ndirectly or by way of your favorite JS library. \n

\nConsider the following example using jQuery, \nalso available as a live demo:\n

\n
\n
Drag me!
\n\n\n
Drop here!
\n\n\n
\n\n\n\n\n\n
\nThanks to the new events and jQuery, this example is both short\nand simple—but it packs in a lot of functionality, as the rest\nof this article will explain.  \n
\nBefore moving on, there are at least three things about the above\ncode that are worth mentioning:\n
\n
\n\n\n\n
\n

Using dataTransfer

\n

\nAs mentioned in the last section, the new drag and drop events\nlet you send data along with a dragged element. But, it's even\nbetter than that: Your drop targets can receive data\ntransferred by content objects dragged into the window from \nother browser windows, and even other applications.\n

\nSince the example is a bit longer, \ncheck out the live demo\nand \nassociated code\nto get an idea of what's possible with dataTransfer.\n

\nIn a nutshell, the stars of this show are the\nsetData() and getData() methods of\nthe dataTransfer property exposed by the Event object.\n

\n

\nThe setData() method is typically called in the \ndragstart listener, loading dataTransfer\nup with one or more strings of content with associated\nrecommended content types.\n

\n

\nFor illustration, here's a quick snippet from the example code:\n

\n
var dt = ev.originalEvent.dataTransfer;    \ndt.setData('text/plain', $('#logo').parent().text());\ndt.setData('text/html', $('#logo').parent().html());\ndt.setData('text/uri-list', $('#logo')[0].src);\n
\n

\nOn the other end, getData() allows you to query\nfor content by type (eg. text/html followed by\ntext/plain). This, in turn, allows you to decide\non acceptable content types at the time of the\ndrop event or even during dragover\nto offer feedback for unacceptable types during the drag.\n

\nHere's another example from the receiving end of the example code:\n

\n
var dt = ev.originalEvent.dataTransfer;    \n$('.content_url .content').text(dt.getData('text/uri-list'));\n$('.content_text .content').text(dt.getData('text/plain'));\n$('.content_html .content').html(dt.getData('text/html'));\n
\n\n

\nWhere dataTransfer really shines, though, is that\nit allows your drop targets to receive content from \nsources outside your defined draggable elements and even from\noutside the browser altogether. Firefox accepts such drags, \nand attempts to populate dataTransfer with\nappropriate content types extracted from the external object.\n

\nThus, you could select some text in a word processor window and\ndrop it into one of your elements, and at least expect to find\nit available as text/plain content. \n

\nYou can also select content in \nanother browser window, and expect to see text/html\nappear in your events. Check out the \noutline editing demo\nand see what happens when you try dragging various elements \n(eg. images, tables, and lists) and highlighted content from\nother windows onto the items there.\n

\n\n
\n\n\n\n
\n

Using Drag Feedback Images

\n

\nAn important aspect of the drag and drop interaction is a\nrepresentation of the thing being dragged. By default in\nFirefox, this is a \"ghost\" image of the dragged element itself. But,\nthe dataTransfer property of the original Event\nobject exposes the method setDragImage() for use\nin customizing this representation.\n

\nThere's\na live demo of this feature, as well as\nassociated JS code \navailable. The gist, however, is sketched out in these code snippets:\n

\n
var dt = ev.originalEvent.dataTransfer;    \n\n
dt.setDragImage( $('#feedback_image h2')[0], 0, 0);
\n
dt.setDragImage( $('#logo')[0], 32, 32); 
\n
var canvas = document.createElement(\"canvas\");\ncanvas.width = canvas.height = 50;
\n
var ctx = canvas.getContext(\"2d\");\nctx.lineWidth = 8;\nctx.moveTo(25,0);\nctx.lineTo(50, 50);\nctx.lineTo(0, 50);\nctx.lineTo(25, 0);\nctx.stroke();
\n
dt.setDragImage(canvas, 25, 25);\n

\n

\nYou can supply a DOM node as the first parameter to \nsetDragImage(), which includes everything from\ntext to images to canvas elements. The\nsecond two parameters indicate at what left and top offset\nthe mouse should appear in the image while dragging.\n

\nFor example, since the #logo image is 64x64,\nthe parameters in the second setDragImage()\nmethod places the mouse right in the center of the image.\nOn the other hand, the first call positions the feedback\nimage such that the mouse rests in the upper left corner.\n

\n

\n
\n\n\n\n
\n

Using Drop Effects

\n

\nAs mentioned at the start of this article, the drag and drop\ninteraction has been used to support actions such as copying,\nmoving, and linking. Accordingly, the HTML 5 specification \naccomodates these operations in the form of the \neffectAllowed and dropEffect\nproperties exposed by the Event object.\n

\n

\nFor a quick fix, check out the\na live demo \nof this feature, as well as the\nassociated JS code.\n

\nThe basic idea is that the dragstart event\nlistener can set a value for effectAllowed like so:\n

\n
var dt = ev.originalEvent.dataTransfer;\nswitch (ev.target.id) {\ncase 'effectdrag0': dt.effectAllowed = 'copy'; break;\ncase 'effectdrag1': dt.effectAllowed = 'move'; break;\ncase 'effectdrag2': dt.effectAllowed = 'link'; break;\ncase 'effectdrag3': dt.effectAllowed = 'all'; break;\ncase 'effectdrag4': dt.effectAllowed = 'none'; break;\n}\n
\n

The choices available for this property include the following:

\n
\n
none
no operation is permitted
\n
copy
copy only
\n
move
move only
\n
link
link only
\n
copyMove
copy or move only
\n
copyLink
copy or link only
\n
linkMove
link or move only
\n
all
copy, move, or link
\n
\n

\nOn the other end, the dragover event listener \ncan set the value of the\ndropEffect property to indicate the expected effect\ninvoked on a successful drop. If the value does\nnot match up with effectAllowed, the drop will\nbe considered cancelled on completion.\n

\nIn the \na live demo,\nyou should be able to see that only elements with matching\neffects can be dropped into the appropriate drop zones. This\nis accomplished with code like the following:\n

\n
var dt = ev.originalEvent.dataTransfer;\nswitch (ev.target.id) {\ncase 'effectdrop0': dt.dropEffect = 'copy'; break;\ncase 'effectdrop1': dt.dropEffect = 'move'; break;\ncase 'effectdrop2': dt.dropEffect = 'link'; break;\ncase 'effectdrop3': dt.dropEffect = 'all'; break;\ncase 'effectdrop4': dt.dropEffect = 'none'; break;\n}\n
\n

\nAlthough the OS itself can provide some feedback, you \ncan also use these properties to update your own visible \nfeedback, both on the dragged element and on the drop zone\nitself.\n

\n
\n\n\n\n
\n

Conclusion

\n

\nThe new first-class drag and drop events in HTML5 and Firefox\nmake supporting this form of UI interaction simple, concise,\nand powerful in the browser. But beyond the new simplicity of\nthese events, the ability to transfer content between\napplications opens brand new avenues for web-based applications\nand collaboration with desktop software in general.\n

\n

\n

\n
\n\n\n\n\n

Archived Comments

\n\n\n\n
\n\n\n", "body": "

\r\nOh hey, look! It's another blog post—and this one\r\nis cross-posted on hacks.mozilla.com.\r\nI won't say this is the start of a renewed blogging habit, but let's see what happens.\r\n

\r\n\r\n\r\n
\r\n

\r\nDrag and drop is one of the most fundamental interactions\r\nafforded by graphical user interfaces. In one gesture, it\r\nallows users to pair the selection of an object with the\r\nexecution of an action, often including a second object in the\r\noperation. It's a simple yet powerful UI concept used to\r\nsupport copying, list reordering, deletion (ala the Trash / Recycle Bin),\r\nand even the creation of link relationships.\r\n

\r\nSince it's so fundamental, offering drag and drop in web\r\napplications has been a no-brainer ever since browsers first\r\noffered mouse events in DHTML. But, although\r\nmousedown, mousemove, and\r\nmouseup made it possible, the implementation has been\r\nlimited to the bounds of the browser window. Additionally,\r\nsince these events refer only to the object being dragged,\r\nthere's a challenge to find the subject of the drop when\r\nthe interaction is completed.\r\n

\r\nOf course, that doesn't prevent most modern JavaScript\r\nframeworks from abstracting away most of the problems and\r\nthrowing in some flourishes while they're at it. But, wouldn't\r\nit be nice if browsers offered first-class support for drag and\r\ndrop, and maybe even extended it beyond the window sandbox?\r\n

\r\nAs it turns out, this very wish is answered by the HTML 5 specification \r\nsection on new drag-and-drop events, and \r\nFirefox 3.5 includes an implementation of those events.\r\n

\r\nIf you want to jump straight to the code, I've put together \r\nsome simple demos \r\nof the new events. \r\n

\r\nI've even scratched an itch of my own and\r\nbuilt the beginnings of an outline editor,\r\nwhere every draggable element is also a drop target—of which\r\nthere could be dozens to hundreds in a complex document, something\r\nthat gave me some minor hair-tearing moments in the past\r\nwhile trying to make do with plain old mouse events.\r\n

\r\nAnd, all the above can be downloaded or cloned from \r\na GitHub repository\r\nI've created especially for this article—which continues after the jump.\r\n

\r\n
\r\n\r\n\r\n\r\n
\r\n

The New Drag and Drop Events

\r\n

\r\nSo, with no further ado, here are the new drag and drop events,\r\nin roughly the order you might expect to see them fired:\r\n

\r\n
\r\n
dragstart
\r\n
\r\nA drag has been initiated, with the dragged element as the\r\nevent target.\r\n
\r\n
drag
\r\n
\r\nThe mouse has moved, with the dragged element as the event target.\r\n
\r\n
dragenter
\r\n
\r\nThe dragged element has been moved into a drop listener,\r\nwith the drop listener element as the event target.\r\n
\r\n
dragover
\r\n
\r\nThe dragged element has been moved over a drop listener,\r\nwith the drop listener element as the event target. Since\r\nthe default behavior is to cancel drops, returning\r\nfalse or calling preventDefault() in\r\nthe event handler indicates that a drop is allowed here.\r\n
\r\n
dragleave
\r\n
\r\nThe dragged element has been moved out of a drop listener,\r\nwith the drop listener element as the event target.\r\n
\r\n
drop
\r\n
\r\nThe dragged element has been successfully dropped on a drop\r\nlistener, with the drop listener element as the event\r\ntarget.\r\n
\r\n
dragend
\r\n
\r\nA drag has been ended, successfully or not, with the\r\ndragged element as the event target.\r\n
\r\n
\r\n

\r\nLike the mouse events of yore, listeners can be attached to\r\nelements using addEventListener() \r\ndirectly or by way of your favorite JS library. \r\n

\r\nConsider the following example using jQuery, \r\nalso available as a live demo:\r\n

\r\n
\r\n
\r\n
Drag me!
\r\n
Drop here!
\r\n
\r\n\r\n\r\n\r\n
\r\nThanks to the new events and jQuery, this example is both short\r\nand simple—but it packs in a lot of functionality, as the rest\r\nof this article will explain.  \r\n
\r\nBefore moving on, there are at least three things about the above\r\ncode that are worth mentioning:\r\n
\r\n
\r\n\r\n
\r\n

Using dataTransfer

\r\n

\r\nAs mentioned in the last section, the new drag and drop events\r\nlet you send data along with a dragged element. But, it's even\r\nbetter than that: Your drop targets can receive data\r\ntransferred by content objects dragged into the window from \r\nother browser windows, and even other applications.\r\n

\r\nSince the example is a bit longer, \r\ncheck out the live demo\r\nand \r\nassociated code\r\nto get an idea of what's possible with dataTransfer.\r\n

\r\nIn a nutshell, the stars of this show are the\r\nsetData() and getData() methods of\r\nthe dataTransfer property exposed by the Event object.\r\n

\r\n

\r\nThe setData() method is typically called in the \r\ndragstart listener, loading dataTransfer\r\nup with one or more strings of content with associated\r\nrecommended content types.\r\n

\r\n

\r\nFor illustration, here's a quick snippet from the example code:\r\n

\r\n
\r\nvar dt = ev.originalEvent.dataTransfer;    \r\ndt.setData('text/plain', $('#logo').parent().text());\r\ndt.setData('text/html', $('#logo').parent().html());\r\ndt.setData('text/uri-list', $('#logo')[0].src);\r\n
\r\n

\r\nOn the other end, getData() allows you to query\r\nfor content by type (eg. text/html followed by\r\ntext/plain). This, in turn, allows you to decide\r\non acceptable content types at the time of the\r\ndrop event or even during dragover\r\nto offer feedback for unacceptable types during the drag.\r\n

\r\nHere's another example from the receiving end of the example code:\r\n

\r\n
\r\nvar dt = ev.originalEvent.dataTransfer;    \r\n$('.content_url .content').text(dt.getData('text/uri-list'));\r\n$('.content_text .content').text(dt.getData('text/plain'));\r\n$('.content_html .content').html(dt.getData('text/html'));\r\n
\r\n\r\n

\r\nWhere dataTransfer really shines, though, is that\r\nit allows your drop targets to receive content from \r\nsources outside your defined draggable elements and even from\r\noutside the browser altogether. Firefox accepts such drags, \r\nand attempts to populate dataTransfer with\r\nappropriate content types extracted from the external object.\r\n

\r\nThus, you could select some text in a word processor window and\r\ndrop it into one of your elements, and at least expect to find\r\nit available as text/plain content. \r\n

\r\nYou can also select content in \r\nanother browser window, and expect to see text/html\r\nappear in your events. Check out the \r\noutline editing demo\r\nand see what happens when you try dragging various elements \r\n(eg. images, tables, and lists) and highlighted content from\r\nother windows onto the items there.\r\n

\r\n\r\n
\r\n\r\n
\r\n

Using Drag Feedback Images

\r\n

\r\nAn important aspect of the drag and drop interaction is a\r\nrepresentation of the thing being dragged. By default in\r\nFirefox, this is a \"ghost\" image of the dragged element itself. But,\r\nthe dataTransfer property of the original Event\r\nobject exposes the method setDragImage() for use\r\nin customizing this representation.\r\n

\r\nThere's\r\na live demo of this feature, as well as\r\nassociated JS code \r\navailable. The gist, however, is sketched out in these code snippets:\r\n

\r\n
\r\nvar dt = ev.originalEvent.dataTransfer;    \r\n\r\ndt.setDragImage( $('#feedback_image h2')[0], 0, 0);\r\n\r\ndt.setDragImage( $('#logo')[0], 32, 32); \r\n\r\nvar canvas = document.createElement(\"canvas\");\r\ncanvas.width = canvas.height = 50;\r\n\r\nvar ctx = canvas.getContext(\"2d\");\r\nctx.lineWidth = 8;\r\nctx.moveTo(25,0);\r\nctx.lineTo(50, 50);\r\nctx.lineTo(0, 50);\r\nctx.lineTo(25, 0);\r\nctx.stroke();\r\n\r\ndt.setDragImage(canvas, 25, 25);\r\n
\r\n

\r\nYou can supply a DOM node as the first parameter to \r\nsetDragImage(), which includes everything from\r\ntext to images to canvas elements. The\r\nsecond two parameters indicate at what left and top offset\r\nthe mouse should appear in the image while dragging.\r\n

\r\nFor example, since the #logo image is 64x64,\r\nthe parameters in the second setDragImage()\r\nmethod places the mouse right in the center of the image.\r\nOn the other hand, the first call positions the feedback\r\nimage such that the mouse rests in the upper left corner.\r\n

\r\n

\r\n
\r\n\r\n
\r\n

Using Drop Effects

\r\n

\r\nAs mentioned at the start of this article, the drag and drop\r\ninteraction has been used to support actions such as copying,\r\nmoving, and linking. Accordingly, the HTML 5 specification \r\naccomodates these operations in the form of the \r\neffectAllowed and dropEffect\r\nproperties exposed by the Event object.\r\n

\r\n

\r\nFor a quick fix, check out the\r\na live demo \r\nof this feature, as well as the\r\nassociated JS code.\r\n

\r\nThe basic idea is that the dragstart event\r\nlistener can set a value for effectAllowed like so:\r\n

\r\n
\r\nvar dt = ev.originalEvent.dataTransfer;\r\nswitch (ev.target.id) {\r\ncase 'effectdrag0': dt.effectAllowed = 'copy'; break;\r\ncase 'effectdrag1': dt.effectAllowed = 'move'; break;\r\ncase 'effectdrag2': dt.effectAllowed = 'link'; break;\r\ncase 'effectdrag3': dt.effectAllowed = 'all'; break;\r\ncase 'effectdrag4': dt.effectAllowed = 'none'; break;\r\n}\r\n
\r\n

The choices available for this property include the following:

\r\n
\r\n
none
no operation is permitted
\r\n
copy
copy only
\r\n
move
move only
\r\n
link
link only
\r\n
copyMove
copy or move only
\r\n
copyLink
copy or link only
\r\n
linkMove
link or move only
\r\n
all
copy, move, or link
\r\n
\r\n

\r\nOn the other end, the dragover event listener \r\ncan set the value of the\r\ndropEffect property to indicate the expected effect\r\ninvoked on a successful drop. If the value does\r\nnot match up with effectAllowed, the drop will\r\nbe considered cancelled on completion.\r\n

\r\nIn the \r\na live demo,\r\nyou should be able to see that only elements with matching\r\neffects can be dropped into the appropriate drop zones. This\r\nis accomplished with code like the following:\r\n

\r\n
\r\nvar dt = ev.originalEvent.dataTransfer;\r\nswitch (ev.target.id) {\r\ncase 'effectdrop0': dt.dropEffect = 'copy'; break;\r\ncase 'effectdrop1': dt.dropEffect = 'move'; break;\r\ncase 'effectdrop2': dt.dropEffect = 'link'; break;\r\ncase 'effectdrop3': dt.dropEffect = 'all'; break;\r\ncase 'effectdrop4': dt.dropEffect = 'none'; break;\r\n}\r\n
\r\n

\r\nAlthough the OS itself can provide some feedback, you \r\ncan also use these properties to update your own visible \r\nfeedback, both on the dragged element and on the drop zone\r\nitself.\r\n

\r\n
\r\n\r\n
\r\n

Conclusion

\r\n

\r\nThe new first-class drag and drop events in HTML5 and Firefox\r\nmake supporting this form of UI interaction simple, concise,\r\nand powerful in the browser. But beyond the new simplicity of\r\nthese events, the ability to transfer content between\r\napplications opens brand new avenues for web-based applications\r\nand collaboration with desktop software in general.\r\n

\r\n

\r\n

\r\n
\r\n\r\n\r\n
\r\n

Archived Comments

\r\n \r\n \r\n
\r\n ", "parentPath": "./content/posts/archives/2009", "path": "2009/07/15/html5-drag-and-drop", "summary": "Oh hey, look! It's another blog post—and this one\nis cross-posted on hacks.mozilla.com.\nI won't say this is the start of a renewed blogging habit, but let's see what happens.\n\n\n\n\n\nDrag and drop is one of the most fundamental interactions\nafforded by graphical user interfaces. In one gesture, it\nallows users to pair the selection of an object with the\nexecution of an action, often including a second object in the\noperation. It's a simple yet powerful UI concept used to\nsupport copying, list reordering, deletion (ala the Trash / Recycle Bin),\nand even the creation of link relationships.\n\nSince it's so fundamental, offering drag and drop in web\napplications has been a no-brainer ever since browsers first\noffered mouse events in DHTML. But, although\nmousedown, mousemove, and\nmouseup made it possible, the implementation has been\nlimited to the bounds of the browser window. Additionally,\nsince these events refer only to the object being dragged,\nthere's a challenge to find the subject of the drop when\nthe interaction is completed.\n\nOf course, that doesn't prevent most modern JavaScript\nframeworks from abstracting away most of the problems and\nthrowing in some flourishes while they're at it. But, wouldn't\nit be nice if browsers offered first-class support for drag and\ndrop, and maybe even extended it beyond the window sandbox?\n\nAs it turns out, this very wish is answered by the HTML 5 specification \nsection on new drag-and-drop events, and \nFirefox 3.5 includes an implementation of those events.\n\nIf you want to jump straight to the code, I've put together \nsome simple demos \nof the new events. \n\nI've even scratched an itch of my own and\nbuilt the beginnings of an outline editor,\nwhere every draggable element is also a drop target—of which\nthere could be dozens to hundreds in a complex document, something\nthat gave me some minor hair-tearing moments in the past\nwhile trying to make do with plain old mouse events.\n\nAnd, all the above can be downloaded or cloned from \na GitHub repository\nI've created especially for this article—which continues after the jump.", "needsBuild": true, "prevPostPath": "2009/05/30/controlled-monetization", "prevPostTitle": "Controlled Monetization", "nextPostPath": "2009/08/20/professional-javascript-frameworks-is-a-real-book", "nextPostTitle": "Professional JavaScript Frameworks is a real book!" }