Neil's Place

Support for the HTML5 drag and drop API is now available in Mozilla nightly builds. This is the API that IE and Safari have supported for a while. Now Firefox will support it as well so you create content in your web pages that can be dragged and dropped elsewhere. The same API is also used for Firefox extensions and XUL applications, however some additional features are available to support dragging non-textual data (such as image data and files) as well as dragging mutliple items.

Here is an example of how to make something draggable:

<description ondragstart="event.dataTransfer.setData(
                          'text/plain', this.textContent)">
  This text may be dragged.
<description>

Documentation is available on how to use this new API, which include a number of examples. Specifically, there is also a guide to dragging specific types of data.

This code is new and there are a few bugs reported that will be fixed soon. However, the new API is much easier to use than the old privileged only API. For Firefox extension and XUL application authors, the new drag APIs are what you want to use.

Direct use of the nsIDragService or nsIDragSession interfaces is now deprecated. In addition, the nsDragAndDrop.js script is also deprecated.

The next step is to implement this API for clipboard operations as well, so that cutting and pasting are just as easy. Then, the old API, and more importantly the very messy code which implements it, could be removed.

This entry was posted on Tuesday, September 2nd, 2008 at 11:34 am and is filed under Mozilla, Documentation. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.