如何从Chrome中的dragstart事件中获取所选项目？ dataTransfer.getData是否损坏？ [英] How do you get the selected items from a dragstart event in Chrome? Is dataTransfer.getData broken?

问题描述

我是一个在Java应用程序上工作的团队的一部分，其中包括帮助人们组织和注释来自网络的信息。我们目前使用一个Firefox插件，它附加一个包含文档源的容器属性，允许拖动的文本被自动引用。这并不总是导致获取源文档，因为只有当选择不交叉HTML标签时才传送文本。例如

 < p container =http://www.somesite.com/blah.html>这是来自一个站点< / p>< p container =http://www.somesite.com/blah.html>这是来自站点的更多文本< / p> 
  

所以如果只选择 是 ，html标签永远不会越过，浏览器认为环绕标签信息及其容器属性将是不需要的;所以它忽略它。

所以我决定制作一个Chrome扩展，可以利用HTML5的一些漂亮的功能，从拖放到浏览器页面的任何拖动Java应用程序包括源文档。 FYI，Chrome扩展程序是基于Javascript的。

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

根据当前的标准， http://dev.w3.org/html5/spec/Overview.html#the-datatransfer-interface ，这可以通过使用 dataTransfer 界面来实现。

所以，我注册应该是 dragstart 事件给我dataTransfer事件信息。您可以将此代码复制并粘贴到Chrome的JavaScript控制台中，以便自己查看：

  window.addEventListener（dragstart，function （event）{
 console.log（event.dataTransfer.types）; 
 console.log（event.dataTransfer.getData（Text））;}）; 
  

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

  DOMStringList {0 =text / _moz_htmlcontext，1 =text / _moz_htmlinfo，2 =text / html，更多...} 
无论选择任何文本
  

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

 窗口。 addEventListener（dragstart，function（event）{
 event.dataTransfer.setData（Text，我在这里为你而设计）; 
}）; 
  

它看起来像是坏了（有没有人有解决方法或一些洞察力这个问题？我真的希望这可以在Chrome中工作，因为我喜欢它的扩展架构。

谢谢！

解决方案

WebKit，因此，Chrome在限制您何时可以调用 getData 。您不能在 dragstart 或 dragover 。我认为这是规范错误。

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>

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.

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.

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.

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.

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"));     });

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

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!");
});

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.

Thanks!

解决方案

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是否损坏？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！