HTML5 API drag and drop images

[funkysoulbrotha]

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 of each image 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>

<form name = "objects" id="form" action = "form.php" method = "post">

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

    // and update event handlers
    updateDataTransfer();

    // little customization
    oldThis.style.borderColor = "#ccc";
}, 500);

return false;
});

and the php

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

?>

There is no error, it is not registering that there is something in the dropzone - nothing is being sent through the php. I have tried doing it with just text(instead of the image) and that won't work either. I am unsure of how to target the value of each image through javascript/php.

Please help if you can,
Thanks

[Fou-Lu]

My JS is poor at best so I can't really help with that.
Add a simple print_r($_POST); into the php script. Does that show anything inside the array (I noticed you have the explicit prints as well, same deal there, but this way you can see if its under any property at all)?

[funkysoulbrotha]

No that doesn't work, but thank you anyway

[Fou-Lu]

Originally Posted by funkysoulbrotha

No that doesn't work, but thank you anyway

Then the problem will be with the JS code not passing the post to the PHP page. I don't see here how it does it at all; the form doesn't contain any fields and has no submit button, but that JS doesn't appear to pass anything either via AJAX or anything of the sorts. I don't know what event.dataTransfer is here, so I'm not sure if that's what's passing the data.
In any case, it looks to me that the JS will be the issue here.