I am having problems with drop event catching with the html5 drag and drop.I am trying to listen for when an image is dropped into each seperate dropzone. I have an id for each dropzone & their value must go into the corresponding table in database. I have values going into the right table column in the database, but can't get each specific dropzones to listen for the drop event.

Does it have to be done with straight-up Javascript, or are you willing to use jQuery. If you use jQuery the same thing could be achieved in less than 5-10 lines of code, be crossbrowser, and work without fuss. If not, then I could try to step through the code and see what the issue is.

By the way, what's the exact problem so I understand? You can't drag the images into the drop zone, or the drop zone doesn't recognize the drops? Do you want the images to actually stay inside the drop zone once their dropped...like this example:

I am open to using jQuery but unsure how to catch the drop event and send it to the database.

The drag and drop works, but I can't get the drop zone to recognize the drops. I want the image to stay inside the dropzone(I have that working) - but I am having trouble getting the "a id = "img1"" from the dropzone(when the image is dropped into it).