我应该使用什么格式(MIME类型)进行HTML5拖放操作？

Question

我开始尝试使用HTML5 Drag and Drop.然后,在dragstart事件处理程序中我们应该运行setData(),它接收两个参数:格式和数据.

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孩子nokia,即孩子的孩子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
   ]
}