HTML 5 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 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:

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


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

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

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

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, window.event); });
  } else if (el && el.length) {
    for (var i = 0; i < el.length; i++) {
      addEvent(el[i], type, fn);

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

function cancel(e) {
if (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) {
        return false;

 addEvent(dropAreas, 'dragover', function (event) {
if (event.preventDefault) event.preventDefault(); = "#000";
return false;

addEvent(dropAreas, 'dragleave', function (event) {
if (event.preventDefault) event.preventDefault(); = "#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

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

http.send(params); = "#ccc";
}, 500);

return false;

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


Does it have to be done with straight-up Javascript, or are you willing to use jQuery. If you use jQuery the same thing could be achieved in less than 5-10 lines of code, be crossbrowser, and work without fuss. If not, then I could try to step through the code and see what the issue is.

By the way, what’s the exact problem so I understand? You can’t drag the images into the drop zone, or the drop zone doesn’t recognize the drops? Do you want the images to actually stay inside the drop zone once their dropped…like this example:


I am open to using jQuery but unsure how to catch the drop event and send it to the database.

The drag and drop works, but I can’t get the drop zone to recognize the drops. I want the image to stay inside the dropzone(I have that working) - but I am having trouble getting the "a id = “img1"” from the dropzone(when the image is dropped into it).

Thank you

I have updated it to send the values to the database, but they are all going into the first drop zone field. And I need each dropzone value to go into the correct field in the database.

I’ve tried putting in different listeners & if statements in the javascript but it won’t work for me.


var y = 'drop_zone1='+iObj; 

var x = 'drop_zone2='+iObj; 

var z = 'drop_zone3='+iObj; 

var u = $('drop_zone1'); 

var t = $('drop_zone2'); 

var r = $('drop_zone3'); 

$.post("post.php", y); 

$.post("post.php", x); 

$.post("post.php", z); 

and my php:


  $sql2="INSERT INTO table_answers (drop_zone1) VALUES ('$_POST[drop_zone1]')";


  $sql="INSERT INTO table_answers (drop_zone2) VALUES ('$_POST[drop_zone2]')";

Any idea please?

That code you gave me was confusing. Is this what you’re trying to do?

Check it out and see if it works for you. You might need to change the PHP slightly.

Sure, you can do it in jQuery, but where is the fun in that? :smiley:

wha wha whaaat!? Dontcha know how fun jQuery is!?

delray I forgot, if you use a method similar to this one then you’ll need to loop through each $_POST like this:

   $sql ....

Also, don’t forget to clean the $_POST with something like “mysql_real_escape_string”, or your database is at risk.

This bit isn’t making any sense. All it does is make jQuery objects for the tags drop_zone1, drop_zone2 and drop_zone3. None of these exist (I hope!) so none of the events fire.

What you want to do instead is check the variable oldThis, and which id it has, and then use that to determine what AJAX call you make.

for (var j=1; j<=3; j++) {
  j = String(j);
  if($(oldThis).is("#drop_zone" + j)) { 
    $.post("post.php", "drop_zone" + j + "=" + iObj); 

Thanks for all your replies and help. I managed to get it working the way Scallio specified. :slight_smile: