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 field in database. I can't get each specific dropzones to listen for the drop event.

Please help if you can, thank you.

HTML Code:
<ul id="images">
  <li><a id="img1" draggable="true"><img src="images/1.jpg"></a></li>
  <li><a id="img2" draggable="true"><img src="images/2.jpg"></a></li>
  <li><a id="img3" draggable="true"><img src="images/3.jpg"></a></li>


<div class="drop_zones">
  <div class="drop_zone" id="drop_zone1" droppable="true">

  <div class="drop_zone" id="drop_zone2"  droppable="true">

  <div class="drop_zone" id="drop_zone3" droppable="true">

var oldThis = this;

setTimeout(function() {
    oldObj.parentNode.removeChild(oldObj); // remove object from DOM

    // add similar object in another place
    oldThis.innerHTML += '<a id="'+iObj+'" draggable="true"><img src="'+oldSrc+'" />    </a>';

    // and update event handlers

     var http = new XMLHttpRequest(); 
     var url = "post.php"; 
     var params = iObj;

     http.open("POST", url, true); 
     http.onreadystatechange = function() { 
           if(http.readyState == 4 && http.status == 200) { 
               alert(http.responseText); } 


    oldThis.style.borderColor = "#ccc";
}, 500);

return false;

PHP Code:

="INSERT INTO table_answers (drop_zone1, drop_zone2, drop_zone3) VALUES      ('$_POST[drop_zone1]','$_POST[drop_zone2]','$_POST[drop_zone3]')";  

if (!
'Error: ' mysql_error());