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

P.S this does work in firefox.

Doug · Accepted Answer · 2013-04-05 20:44:23Z

2

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

answered Apr 5, 2013 at 20:44

Doug

6421 gold badge4 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Linas Over a year ago

Please check this fiddle and tell what am i doing wrong here jsfiddle.net/7zpFz/1

Doug Over a year ago

hmmmm..... I think its working for me (windows, chrome). Drag over makes the text appear, drop makes the file appear. What are you expecting? What are you seeing?

Linas Over a year ago

Well neither text appears nor the file, when i drop the file i simply get redirected to that file page

Doug Over a year ago

when you drag over and don't drop, does the text change to "Drag Over"? If so, that means drag/drop is working for you. On the drop event, chrome's default behavior seems to be to redirect the browser to the path on your local drive... so that is happening before you see the affect of the drop event in the browser. I don't know how to stop that default behavior, but i do know that it is possible.

Collectives™ on Stack Overflow

HTML5 Drag and drop bug in chrome

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related