HTML5 API拖放图像

I am having a problem sending info to a database. I have set up drag and drop with HTML5 and it is working, but I need to be able to get the values of the images uploaded to the database when each one is dropped into a dropzone. I don't need to upload the images to the database - just need the value sent to it.

Here is the HTML:

<ul id="images">
  <li><a id="1" draggable="true"><img src="images/1.jpg" value = "flower"></a></li>
  <li><a id="2" draggable="true"><img src="images/2.jpg" value = "boy"></a></li>
  <li><a id="3" draggable="true"><img src="images/3.jpg" value = "girl"></a></li>
</ul>


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

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

  <div class="drop_zone" id="drop_zone3" droppable="true" type = "text" type = "file" name = "drop_zone3">
  </div>
</div>

And the PHP:

<?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"]; 

?>

This is the javascript:

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>';







    updateDataTransfer();


  var http = new XMLHttpRequest();
  var url = "form.php";

  var params = +iObj;


  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;
});

Please help me out if you can.