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

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

19 голосов
/ 20 июля 2011

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

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?
  • что-то еще?
  • больше одного?

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

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

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

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

Ответы [ 3 ]

7 голосов
/ 29 июля 2011

В спецификации 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

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

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

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

application / x-mysite.myobject +json (или application / x-mysite.parentobject.childobject + json )

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

5 голосов
/ 22 июля 2011

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

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

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

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

<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);
0 голосов
/ 21 июля 2011

Используйте '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
   ]
}
...