Какой формат (MIME-тип) следует использовать для операций перетаскивания HTML5?

Я начинаю экспериментировать с HTML5 Drag and Drop. Затем в обработчике событий dragstart мы должны запустить setData(), который получает два параметра: формат и данные.

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

Я хочу перетащить какой-то "объект" из одного контейнера в другой контейнер внутри моего веб-приложения. Под "объектом" я подразумеваю то, что имеет несколько атрибутов (цвет, текст, автор, дата,...).

Какой формат (или MIME-тип) я должен использовать?

text/plain?
text/x-myapp-myobjtype?
application/x-myapp-myobjtype?
application/x-myapp.myobjtype+json?
что-то еще?
более одного?

Как мне закодировать мой объект (параметр данных setData())?

Разделимые (или любые другие разделители) ключи = значения пары
Сериализовать объект с помощью JSON?
Просто id, и в dropzone я должен получить полный объект, используя только идентификатор?
Отправьте только ссылку на объект, даже не сериализуя что-нибудь? (невозможно, аргумент данных должен быть строкой)

(Я понимаю, что "Как скопировать объект для Drag and Drop" может быть другим вопросом здесь, но он тесно связан с выбором типа MIME)

Некоторые ссылки:

Ответ 1

В спецификации HTML5 есть примеры перетаскивания (см. текущий рабочий проект или последняя версия). В таких примерах используется пользовательский тип MIME, а также предлагается использование типов MIME для сайта. См. Этот фрагмент:

<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
[...]

Итак, это здорово, это означает, что мы должны использовать пользовательский тип MIME! (если мы фактически не перетаскиваем простой текст или просто URL-адрес или что-то, что уже имеет известный тип)

Но как мы можем создать такой настраиваемый тип MIME?

Я не нашел документацию об этом, поэтому я посмотрел на другие типы MIME. Список текстовых носителей не имел ничего особенного, но список типов медиа-приложений был довольно интересным. Позвольте мне взять образец из этого списка:

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

Я могу заметить шаблон для создания имен:

Точка иерархически разделяет несколько "элементов" (например, config - это дочерний элемент iptv, то есть дочерний элемент nokia, то есть дочерний элемент vnd).
Дефис разделяет составные слова (как в google-earth и openxmlformats-officedocument).
Знак "плюс" служит для дальнейшего указания формата сериализации (+json и +xml в этих примерах).
Префикс x- должен использоваться для типов MIME, не зарегистрированных в IANA (и, таким образом, не отображаемых в этом списке).

На основе этих правил я могу предложить использовать следующий тип MIME:

application/x-mysite.myobject + json (или приложение /x -mysite.parentobject.childobject + json)

Это, по-видимому, самый точный и правильный способ указать настраиваемый тип MIME для объекта веб-приложения, закодированного в JSON.

Ответ 2

Обновление: эта ошибка Chrome была исправлена с версии 19.

Если я намерен поддерживать Google Chrome (последняя версия 12 сейчас), тогда я должен придерживаться text/plain.

Это потому, что Chrome неправильно применил объект dataTransfer, и есть открытая ошибка dataTransfer не работает с текстом или URL-адресом.

Я написал простое desmontration в jsFiddle. Он корректно работает в Mozilla Firefox и даже в браузер Arora (версия 0.10.2, версия WebKit 533.3). Для полноты моей версии Chrome 12.0.742.112 (версия WebKit 534.30). Демонстрационный код также доступен ниже:

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

Ответ 3

Используйте 'application/json' в качестве оболочки для любых других метаданных, которые могут вам понравиться, включая mime-тип связанных файлов или html, который вы хотите использовать в браузере.

{ '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
   ]
}