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.

Please help if you can, thank you.



the html:
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>
</ul>




//dropzones


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

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

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


the javascript:
Code:
var addEvent = (function () {
if (document.addEventListener) {
return function (el, type, fn) {
  if (el && el.nodeName || el === window) {
    el.addEventListener(type, fn, false);
  } else if (el && el.length) {
    for (var i = 0; i < el.length; i++) {
      addEvent(el[i], type, fn);
    }
  }
 };
} else {
return function (el, type, fn) {
  if (el && el.nodeName || el === window) {
    el.attachEvent('on' + type, function () { return fn.call(el, window.event); });
  } else if (el && el.length) {
    for (var i = 0; i < el.length; i++) {
      addEvent(el[i], type, fn);
     }
   }
 };
 }
})();


var dragItems;
updateDataTransfer();
var dropAreas = document.querySelectorAll('[droppable=true]');


function cancel(e) {
if (e.preventDefault) {
e.preventDefault();
}
return false;
}


function updateDataTransfer() {
dragItems = document.querySelectorAll('[draggable=true]');
for (var i = 0; i < dragItems.length; i++) {
    addEvent(dragItems[i], 'dragstart', function (event) {
        event.dataTransfer.setData('obj_id', this.id);
        return false;
    });
}
}


 addEvent(dropAreas, 'dragover', function (event) {
if (event.preventDefault) event.preventDefault();


this.style.borderColor = "#000";
return false;
});


addEvent(dropAreas, 'dragleave', function (event) {
if (event.preventDefault) event.preventDefault();


this.style.borderColor = "#ccc";
return false;
});


 addEvent(dropAreas, 'dragenter', cancel);

// drop event handler
addEvent(dropAreas, 'drop', function (event) {
if (event.preventDefault) event.preventDefault();

// get dropped object
var iObj = event.dataTransfer.getData('obj_id');
var oldObj = document.getElementById(iObj);

// get its image src
var oldSrc = oldObj.childNodes[0].src;
oldObj.className += 'hidden';

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
    updateDataTransfer();



     var http = new XMLHttpRequest(); 
     var url = "post.php"; 
     var params = 'drop_zone1='+iObj;//sends data to the specific column in database table 
     http.open("POST", url, true); 
     http.onreadystatechange = function() { 
           if(http.readyState == 4 && http.status == 200) { 
               alert(http.responseText); } 

} 
http.send(params);



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

return false;
});


the php:
PHP Code:
<?php  

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

if (!
mysql_query($sql,$db)) 

    die(
'Error: ' mysql_error()); 


echo 
$_POST["drop_zone1"];  
echo 
$_POST["drop_zone2"];  
echo 
$_POST["drop_zone3"];  

?>