Question

我开始尝试使用HTML5拖放功能。然后，在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类型的选择密切相关）

一些参考文献：

Answer 1

HTML5规范有一些拖放示例（请参阅current working draft或latest version）。在此类示例中，使用自定义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类型。 list of text media types没什么特别的，但list of application media types非常有趣。让我从该列表中获取一个样本：

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

更新：此Chrome版本自版本19以来已修复。

如果我的目标是支持Google Chrome（现在版本12是最新版本），那么我必须坚持text/plain。

那是因为Chrome has improperly implemented the dataTransfer object，并且有一个关于dataTransfer not working with non text or url的漏洞。

我写了simple desmontration at jsFiddle。它在Mozilla Firefox 3.6甚至Arora browser（版本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
   ]
}

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

3 个答案: