HTML5 Drag and drop bug in chrome

Question

I am trying to implement drag and drop feature in my website, but after few hours of trying i came to conclusion that there is a bug in chrome, for example try this example and see for your self.

It seems that dataTransfer property doesn't exist therefore i'm getting undefined error.

Here is my code:

$(document).on("dragover", "#dropFile", function(e){
    e.dataTransfer.setData('text/x-example', 'Foobar'); //error
    return false; 
});

$(document).on("drop", "#dropFile", function(e){
    e.preventDefault();

    console.log(e.dataTransfer); //error
});

PS this does work in firefox.

Answer 1

I've just been dabbling with drag-drop lately, and my primary browser is chrome and things work great so far. The method I use to wire up the events is a bit different from yours

  $(".droppable").bind("dragover", function (e)
  {
    // do stuff here
  });
  $(".droppable").bind("drop", function (e)
  {
    // do stuff here
  })