Drop event catching
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>
</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>
Code:
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 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" ];
?>