I’m currently testing drag & drop. Drag & dropping an image from my desktop works fine, but I’m facing a problem : when I drag & drop an “online” image (from another website, or even from the same webpage using a , the variable e.dataTransfer.files is empty.
To sum up what I’m trying to do : You drag an image from your desktop to my page (inside a special zone), then it displays the image inside a <canvas>. I’d like to be able to drag an image from my page also, to say something like “Hey, you can first try with these images !”.
For the basics of drag & drop, I got inspiration from this tutorial : http://www.html5rocks.com/en/tutorials/dnd/basics/
Because drag&drop online is interpreted as link, not as file transfer. You must first save the picture on your desktop and it will then be intepreted as real drag&drop.
But, since you already have the pictures on your page, you could reach your goal by filling your canvas with your existing images (e.g. using javascript).
P.S.: Drag&Drop works the way you want only if you use 2 different browsers, for example drag a picture from IE into FF. For that you need load your page in 2 different browsers.