Alex Rivera | Logout

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

Asked 2011-07-20T19:05:25.560
24

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:

Edit
Report

1 Answer

0

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
   ]
}
answered 2011-07-20T22:12:56.430

Your Answer