title: HTML5 DnD dataTransfer setData or getData not working in every browser except Firefox
body: <p>Consider this <a href="http://jsfiddle.net/MtypZ/124/" rel="noreferrer">JSFiddle</a>. It works fine in Firefox (14.0.1), but fails in Chrome (21.0.1180.75), Safari (?) and Opera(12.01?) on both Windows (7) and OS X (10.8). As far as I can tell the issue is with either the <code>setData()</code> or <code>getData()</code> methods on the <code>dataTransfer</code> object. Here's the relevant code from the JSFiddle.</p>
  
  <pre><code>var dragStartHandler = function (e) {
      e.originalEvent.dataTransfer.effectAllowed = "move";
      e.originalEvent.dataTransfer.setData("text/plain", this.id);
  };
  
  var dragEnterHandler = function (e) {
      //  dataTransferValue is a global variable declared higher up.
      //  No, I don't want to hear about why global variables are evil,
      //  that's not my issue.
      dataTransferValue = e.originalEvent.dataTransfer.getData("text/plain");
  
      console.log(dataTransferValue);
  };
  </code></pre>
  
  <p>As far as I can tell this should work perfectly fine and if you look at the console while dragging an item you will see the id written out, which means that it's finding the element just fine and grabbing it's id attribute. The question is, is it just not setting the data or not getting the data?</p>
  
  <p>I'd appreciate suggestions because after a week of working on this with three attempts and some 200+ versions, I'm starting to loose my mind. All I know is it used to work back in version 60 or so and that specific code hasn't changed at all...</p>
  
  <p><s>Actually, one of the major differences between 6X and 124 is that I changed the event binding from <code>live()</code> to <code>on()</code>. I don't think that's the issue, but I've come to see a couple failures from Chrome when it comes to DnD while working on this.</s> This has been debunked. The event binding method has no effect on the issue.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I've created a new <a href="http://jsfiddle.net/VzXqK/2/" rel="noreferrer">JSFiddle</a> that strips out absolutely everything and just leaves the event binding and handlers. I tested it with jQuery 1.7.2 and 1.8 with both <code>on()</code> and <code>live()</code>. The issue persisted so I dropped down a level and removed all frameworks and used pure JavaScript. The issue <em>still</em> persisted, so based on my testing it's not my code that's failing. Instead it appears that Chrome, Safari and Opera are all implementing either <code>setData()</code> or <code>getData()</code> off spec or just failing for some reason or another. Please correct me if I'm wrong.</p>
  
  <p>Anyway, if you take a look at the new JSFiddle you should be able to replicate the issue, just look at the console when you're dragging over an element designated to accept a drop. I've gone ahead and opened a ticket with <a href="http://code.google.com/p/chromium/issues/detail?id=142508" rel="noreferrer">Chromium</a>. In the end I may still be doing something wrong, but I simply don't know how else to do DnD at this point. The new JSFiddle is as stripped down as it can get...</p>