如何从 Chrome 中的 dragstart 事件中获取所选项目

问题描述

我是一个开发 Java 应用程序的团队的一员，该应用程序可以帮助人们组织和注释来自网络的信息.我们目前使用一个 Firefox 插件，它附加了一个包含文档源的容器属性，它允许拖动的文本被自动引用.这并不总是导致获取源文档，因为在选择不跨越HTML标记时才会传输文本.例如

I am part of a team that works on a Java application that, among other things, helps people organize and annotate information from the web. We currently use a Firefox plug-in that attaches a container attribute that contains a document source, which allows dragged text to become cited automatically. This will not always result in getting the source document because only text is transferred when a selection does not cross html tags. e.g.

<p container="http://www.somesite.com/blah.html">this is text from a site</p><p container="http://www.somesite.com/blah.html">this is more text from a site</p>

所以如果只选择了is text，html标签永远不会交叉，浏览器会认为环绕标签信息及其容器属性是不需要的；所以它会忽略它.

So if only is text is selected, the html tags are never crossed and the browser thinks the surround tag information and its container attribute would be unwanted; so it ignores it.

因此，我决定制作一个 Chrome 扩展程序，该扩展程序将利用 HTML5 的一些漂亮特性，使从浏览器页面拖放到 Java 应用程序中的任何拖动都包含源文档.仅供参考，Chrome 扩展是基于 Javascript 的.

So I decided to make a Chrome extension that would exploit some of the nifty features of HTML5 to make any drag from a browser page that is dropped into out Java application include the source document. FYI, Chrome extensions are Javascript based.

看来，正确的做法是在文档上注册一个 dragstart 事件，这将允许我访问拖动的内容并让我注入一个包含源文档位置的元标记.

The correct for thing to do, it seems, is to register a dragstart event on the document that will allow me to access the content of the drag and also let me inject a meta tag that includes the source document location.

根据现行标准，http://dev.w3.org/html5/spec/Overview.html#the-datatransfer-interface ，这应该可以通过使用 dataTransfer 接口来实现.

According to the current standard, http://dev.w3.org/html5/spec/Overview.html#the-datatransfer-interface , this should be possible by using the dataTransfer interface.

所以，我注册了 dragstart 事件，它应该给我 dataTransfer 事件信息.您可以将此代码复制并粘贴到 Chrome 的 Javascript 控制台中以亲自查看:

So, I register the dragstart event that should give me the dataTransfer event information. You can copy and paste this code into Chrome's Javascript console to see it for yourself:

window.addEventListener("dragstart", function(event) {
console.log(event.dataTransfer.types);
console.log(event.dataTransfer.getData("Text"));     });

然后选择一些东西并拖动它.在 Chrome 中，输出是 "null" 然后是 "undefined".如果您将相同的代码粘贴到 Firebug 的 Javascript 控制台，然后拖动一些您选择的文本，输出就是您所期望的:

Then select something and drag it. In Chrome, the output is "null" then "undefined". If you paste the same code into Firebug's Javascript console then drag some text that you select, the out put is what you would expect:

DOMStringList { 0="text/_moz_htmlcontext", 1="text/_moz_htmlinfo", 2="text/html", more...}
whatever text was selected

奇怪的是，可以在 event.dataTransfer 上使用 setData 来更改丢弃的内容.这部分似乎按预期工作.将其粘贴到 Chrome Javascript 控制台中，然后选择一些内容并将其拖到文本编辑器或您的搜索框中:

Curiously, one can use setData on the event.dataTransfer to change what is dropped. That part seems to work as expected. Paste this instead into the Chrome Javascript console, then select something and drag it to a text editor or your search box:

window.addEventListener("dragstart", function(event) {
    event.dataTransfer.setData("Text","I made this here for you!");
});

它看起来像坏了.:( 有没有人有解决方法或对此问题有所了解?我真的希望它在 Chrome 中工作，因为我喜欢它的扩展架构.

It looks like it's broken. :( Does anyone have a workaround or some insight into this issue? I really want this to work in Chrome because I like its extension architecture.

谢谢！

推荐答案

WebKit 和 Chrome 对何时可以调用 getData 有很大的限制.你不能在 dragstart 或 dragstart代码>dragover.我认为这是典型的错误.

WebKit, and hence Chrome, is quite restrictive on when you can call getData. You're not allowed to do it inside dragstart or dragover. I think this is the canonical bug.

这篇关于如何从 Chrome 中的 dragstart 事件中获取所选项目?dataTransfer.getData 坏了吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！