我应该为HTML5拖放操作使用什么格式(MIME类型)？
我开始尝试HTML5拖放。然后，在dragstart事件处理程序中，我们应该运行setData()，它接收两个参数:格式和数据。
function dragstart_handler(ev) {
ev.dataTransfer.setData('text/plain', 'foobar');
}我想把某种“对象”从一个容器拖到另一个容器中，放在我的web应用程序中。所谓“对象”，是指具有多个属性(颜色、文本、作者、日期、…)的对象。。
我应该使用哪种格式(或MIME类型)？
text/plaintext/x-myapp-myobjtypeapplication/x-myapp-myobjtypeapplication/x-myapp.myobjtype+json- something else?
- more？
我应该如何编码我的对象(setData()的数据参数)？
- Comma-separated (或任何其他分隔符) pairs?
- Serialize key=value对象使用JSON？
- 只需要一个id，并且在dropzone中我必须只使用id检索完整的对象？
- 只发送对对象的引用，甚至没有序列化任何东西？(不可能，数据参数必须是字符串)
(我意识到“如何编码对象以进行拖放”在这里可能是另一个问题，但它与MIME类型的选择密切相关)
一些参考资料：
回答 3
Stack Overflow用户
发布于 2011-07-30 02:25:15
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我注意到了一种命名模式：
IANAA点按层次结构分隔多个“元素”(例如，vnd).
- A是
google-earth的子项，也就是config的子项，即iptv的子项，nokia的子项由连字符分隔(如在google-earth和+json中，加号用于进一步指定序列化格式)(这些x-前缀中的+json和+xml应用于未注册到nokia的MIME类型(因此不在该列表中显示)。<代码>H223<代码>F224
基于这些规则，我可以建议使用以下MIME类型：
application/x-mysite.myobject+json (或application/x-mysite.parentobject.childobject+json)
这似乎是为JSON编码的web应用程序对象指定自定义MIME类型的最精确和正确的方法。
Stack Overflow用户
发布于 2011-07-23 02:12:15
更新：此Chrome错误已从版本19修复。
如果我的目标是支持Google Chrome (现在是最新的版本12 )，那么我必须坚持使用text/plain。
这是因为Chrome has improperly implemented the dataTransfer object，关于dataTransfer not working with non text or url有一个公开的bug。
我已经写了一个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);Stack Overflow用户
发布于 2011-07-21 06:12:56
使用'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
]
}https://stackoverflow.com/questions/6767128
复制相似问题