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

Ответ 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
   ]
}