What format (MIME Type) should I use for HTML5 drag and drop operations?

Question

I\'m starting to experiment with HTML5 Drag and Drop. Then, in the dragstart event handler we should run setData(), which receives two parameters: format

Answer 1

Use 'application/json' as a wrapper for any other metadata that you may like, including mime-type of linked files, or the html you want to use in the browser.

{ 'assets': [
      {
       'color': 'foo',
       'text': 'bar',
       'uri': 'http://', // location of asset
       'type': 'application/zip', // mime-type of asset
       'html': '<div>html representation</div>'
       // .. more properties
      }
   // ...more assets
   ]
}

Answer 2

The HTML5 specification has some drag and drop examples (see the current working draft or the latest version). In such examples, a custom MIME Type is used, and the use of site-specific MIME types is also suggested. See this snippet:

<p>Drop your favorite fruits below:</p>
<ol dropzone="move s:text/x-example" ondrop="dropHandler(event)">
 <-- don't forget to change the "text/x-example" type to something
 specific to your site -->
</ol>
<script>
  var internalDNDType = 'text/x-example'; // set this to something specific to your site
[...]

So, that's great, this means we should use a custom MIME type! (unless we are actually dragging plain text, or just a URL, or something that already has a well-known type)

But how do we create such custom MIME type?

I found no documentation about this, so I looked at other MIME types. The list of text media types had nothing special, but the list of application media types was quite interesting. Let me grab a sample from that list:

application/atom+xml
application/xhtml+xml
application/xmpp+xml

application/vnd.google-earth.kml+xml
application/vnd.google-earth.kmz
application/vnd.iptc.g2.newsitem+xml
application/vnd.iptc.g2.packageitem+xml
application/vnd.nokia.iptv.config+xml
application/vnd.openxmlformats-officedocument.wordprocessingml.footnotes+xml
application/vnd.yamaha.openscoreformat.osfpvg+xml

application/vnd.hal+json
application/vnd.hal+xml

I can notice a pattern for making names:

• A dot hierarchically separates multiple "elements" (for instance, config is child of iptv, that is child of nokia, that is child of vnd).
• A hyphen separates composite words (as in google-earth and openxmlformats-officedocument).
• A plus sign serves to further specify the serializing format (+json and +xml in these examples).
• The x- prefix should be used for MIME types not registered with IANA (and, thus, not shown on that list).

Based on these rules, I can suggest using the following MIME type:

application/x-mysite.myobject+json (or application/x-mysite.parentobject.childobject+json)

This seems to be the most precise and correct way to specify a custom MIME type for a web application object encoded in JSON.

Answer 3

Update: this Chrome bug has been fixed since version 19.

If I aim to support Google Chrome (version 12 is the latest one now), then I must stick to text/plain.

That's because Chrome has improperly implemented the dataTransfer object, and there is an open bug about dataTransfer not working with non text or url.

I've written a simple desmontration at jsFiddle. It works correctly in Mozilla Firefox 3.6 and even in Arora browser (version 0.10.2, WebKit version 533.3). Just for completeness, my Chrome version is 12.0.742.112 (WebKit version 534.30). The demonstration code is also available below:

<div id="drag" draggable="true">Drag me!</div>
<div id="drop">Drop here!</div>


#drag, #drop {
    padding: 1em 2em;
    margin: 1em 0;
}
#drag {
    background: #CFC;
}
#drop {
    background: #FCC;
}


function dragstart_handler(ev) {
    console.log('dragstart');
    ev.dataTransfer.setData('text/x-example', 'Foobar');
}

function dragover_handler(ev) {
    // Accepting whatever is dragged over here
    ev.preventDefault();
}

function drop_handler(ev) {
    console.log('drop');
    console.log(ev.dataTransfer.types);

    if (ev.dataTransfer.types) {
        var i;
        for (i = 0; i < ev.dataTransfer.types.length; i++) {
            var type = ev.dataTransfer.types[i];
            console.log(type, ev.dataTransfer.getData(type));
        }
    }

    console.log(ev.dataTransfer.getData('text/x-example'));
}

var drag = document.getElementById('drag');
drag.addEventListener('dragstart', dragstart_handler, false);

var drop = document.getElementById('drop');
drop.addEventListener('dragover', dragover_handler, false);
drop.addEventListener('drop', drop_handler, false);