我應該使用什么格式（MIME類型）進行HTML5拖放操作？

Question

我開始嘗試使用HTML5 Drag and Drop。 然后，在dragstart事件處理程序中，我們應該運行setData() ，它接收兩個參數： format和data 。

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

我想在我的Web應用程序中將某種“對象”從一個容器拖到另一個容器中。 通過“對象”，我指的是具有多個屬性（顏色，文本，作者，日期......）的東西。

我應該使用什么樣的格式 （或MIME類型）？

• text/plain ？
• text/x-myapp-myobjtype ？
• application/x-myapp-myobjtype ？
• application/x-myapp.myobjtype+json ？
• 別的什么？
• 超過一個？

我應該如何編碼我的對象（ setData()的數據參數）？

• 逗號分隔（或任何其他分隔符）鍵=值對？
• 使用JSON序列化對象？
• 只是一個id，在dropzone我必須只使用id檢索完整的對象？
• 只發送一個對象的引用，甚至沒有序列化任何東西？ （不可能， data參數必須是一個字符串）

（我意識到“如何為拖放操作一個對象”可能是另一個問題，但它與MIME類型的選擇密切相關）

---

一些參考：

• http://dev.w3.org/html5/spec/dnd.html
• http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#dnd
• https://developer.mozilla.org/En/DragDrop/Drag_Operations
• https://developer.mozilla.org/En/DragDrop/DataTransfer
• http://www.html5rocks.com/en/tutorials/dnd/basics/

Answer 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子iptv ，即nokia子vnd ，即vnd子vnd ）。
• 連字符分隔復合詞（如google-earth和openxmlformats-officedocument ）。
• 加號用於進一步指定序列化格式（在這些示例中為+json和+xml ）。
• x-前綴應該用於未在IANA注冊的MIME類型（因此，未在該列表中顯示）。

根據這些規則，我可以建議使用以下MIME類型：

application / x-mysite.myobject + json （或application / x-mysite.parentobject.childobject + json ）

這似乎是為以JSON編碼的Web應用程序對象指定自定義MIME類型的最精確和最正確的方法。

Answer 2

更新：自版本19以來，此Chrome錯誤已得到修復。

如果我的目標是支持谷歌Chrome （現在版本12是最新版本），那么我必須堅持使用text/plain 。

那是因為Chrome不正確地實現了dataTransfer對象 ，並且有一個關於dataTransfer無法處理非文本或url的漏洞。

我在jsFiddle寫了一個簡單的desmontration 。 它在Mozilla Firefox 3.6中甚至在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);

Answer 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
   ]
}