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

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:

Drag me!
Drop here!


#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);