Databases
StackOverflow2013
Postsdbo
POHow do you get the selected items from a dragstart event in Chrome? Is dataTransfer.getData broken?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow do you get the selected items from a dragstart event in Chrome? Is dataTransfer.getData broken?
    text
    copied!<p>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> <pre><code>&lt;p container="http://www.somesite.com/blah.html"&gt;this is text from a site&lt;/p&gt;&lt;p container="http://www.somesite.com/blah.html"&gt;this is more text from a site&lt;/p&gt; </code></pre> <p>So if only <strong><em>is text</em></strong> 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.</p> <p>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.</p> <p>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.</p> <p>According to the current standard, <a href="http://dev.w3.org/html5/spec/Overview.html#the-datatransfer-interface" rel="nofollow">http://dev.w3.org/html5/spec/Overview.html#the-datatransfer-interface</a> , this should be possible by using the <strong>dataTransfer</strong> interface.</p> <p>So, I register the <strong>dragstart</strong> 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:</p> <pre><code>window.addEventListener("dragstart", function(event) { console.log(event.dataTransfer.types); console.log(event.dataTransfer.getData("Text")); }); </code></pre> <p>Then select something and drag it. In Chrome, the output is <strong>"null"</strong> then <strong>"undefined"</strong>. 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:</p> <pre><code>DOMStringList { 0="text/_moz_htmlcontext", 1="text/_moz_htmlinfo", 2="text/html", more...} whatever text was selected </code></pre> <p>Curiously, one <em>can</em> 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:</p> <pre><code>window.addEventListener("dragstart", function(event) { event.dataTransfer.setData("Text","I made this here for you!"); }); </code></pre> <p>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.</p> <p>Thanks!</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload