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.
<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>
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 = 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;
});
<?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"];
?>
