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


Reply With Quote

Bookmarks