問題描述

我是一個(gè)開發(fā) Java 應(yīng)用程序的團(tuán)隊(duì)的一員，該應(yīng)用程序可以幫助人們組織和注釋來自網(wǎng)絡(luò)的信息.我們目前使用一個(gè) Firefox 插件，它附加了一個(gè)包含文檔源的容器屬性，它允許拖動(dòng)的文本被自動(dòng)引用.這并不總是導(dǎo)致獲取源文檔，因?yàn)樵谶x擇不跨越HTML標(biāo)記時(shí)才會(huì)傳輸文本.例如

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標(biāo)簽永遠(yuǎn)不會(huì)交叉，瀏覽器會(huì)認(rèn)為環(huán)繞標(biāo)簽信息及其容器屬性是不需要的；所以它會(huì)忽略它.

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.

因此，我決定制作一個(gè) Chrome 擴(kuò)展程序，該擴(kuò)展程序?qū)⒗?HTML5 的一些漂亮特性，使從瀏覽器頁面拖放到 Java 應(yīng)用程序中的任何拖動(dòng)都包含源文檔.僅供參考，Chrome 擴(kuò)展是基于 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.

看來，正確的做法是在文檔上注冊(cè)一個(gè) dragstart 事件，這將允許我訪問拖動(dòng)的內(nèi)容并讓我注入一個(gè)包含源文檔位置的元標(biāo)記.

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.

根據(jù)現(xiàn)行標(biāo)準(zhǔn)，http://dev.w3.org/html5/spec/Overview.html#the-datatransfer-interface ，這應(yīng)該可以通過使用 dataTransfer 接口來實(shí)現(xiàn).

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.

所以，我注冊(cè)了 dragstart 事件，它應(yīng)該給我 dataTransfer 事件信息.您可以將此代碼復(fù)制并粘貼到 Chrome 的 Javascript 控制臺(tái)中以親自查看:

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

然后選擇一些東西并拖動(dòng)它.在 Chrome 中，輸出是 "null" 然后是 "undefined".如果您將相同的代碼粘貼到 Firebug 的 Javascript 控制臺(tái)，然后拖動(dòng)一些您選擇的文本，輸出就是您所期望的:

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 來更改丟棄的內(nèi)容.這部分似乎按預(yù)期工作.將其粘貼到 Chrome Javascript 控制臺(tái)中，然后選擇一些內(nèi)容并將其拖到文本編輯器或您的搜索框中:

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

它看起來像壞了.:( 有沒有人有解決方法或?qū)Υ藛栴}有所了解?我真的希望它在 Chrome 中工作，因?yàn)槲蚁矚g它的擴(kuò)展架構(gòu).

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 對(duì)何時(shí)可以調(diào)用 getData 有很大的限制.你不能在 dragstart 或 dragstart代碼>dragover.我認(rèn)為這是典型的錯(cuò)誤.

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.

這篇關(guān)于如何從 Chrome 中的 dragstart 事件中獲取所選項(xiàng)目?dataTransfer.getData 壞了嗎?的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！