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 and data.

function dragstart_handler(ev) {     ev.dataTransfer.setData('text/plain', 'foobar'); } 

I want to drag some kind of "object" from one container into another container, inside my web application. By "object", I mean something that has multiple attributes (color, text, author, date, …).

What kind of format (or MIME Type) should I use?

• text/plain?
• text/x-myapp-myobjtype?
• application/x-myapp-myobjtype?
• application/x-myapp.myobjtype+json?
• something else?
• more than one?

How should I encode my object (the data parameter of setData())?

• Comma-separated (or any other delimiter) key=value pairs?
• Serialize the object using JSON?
• Just an id, and at the dropzone I must retrieve the full object using just the id?
• Send just a reference to the object, without even serializing anything? (not possible, the data argument must be a string)

(I realize that "How to enconde an object for Drag and Drop" could be another question here, but it is closely related to the choice of MIME Type)

---

Some references:

• http://dev.w3.org/html5/spec/dnd.html
• http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#dnd
• https://developer.mozilla.org/En/DragDrop/Drag_Operations
• https://developer.mozilla.org/En/DragDrop/DataTransfer
• http://www.html5rocks.com/en/tutorials/dnd/basics/

Answer 1

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.