0

Here's an example of drag&drop images (provided from course "HTML5 power workshop" by Andy Olsen) : http://aorbaroquethrash.com/dragdrop/

You have to drag an image from your desktop to the yellow square.

It is working in chrome, but not firefox, why ?

There's a similar post : drag and drop not working in firefox It says to use "dataTransfer.setData", but I don't think it applies to my example.

In my example I use var allTheFiles = event.dataTransfer.files; ...

PatricK

Community
  • 1
  • 1
trogne
  • 3,402
  • 3
  • 33
  • 50

1 Answers1

1

That site has a bug. The code reads:

// Handles drop events.
function onDrop(mouseEvent) {
...
    // Get the first file dragged by the user.
    var allTheFiles = event.dataTransfer.files;
    var firstFile = allTheFiles[0];
…
}

event.dataTransfer.files should be mouseEvent.dataTransfer.files.

The reason it works in Chrome is apparently that Chrome implement non-standard, IE-style window.event, while Firefox does not.

Here is a corrected fiddle that works (tested) in Firefox, Chrome, Safari and even IE10.

nmaier
  • 32,336
  • 5
  • 63
  • 78