...

View Full Version : Html5 drag and drop images, send values to database



funkysoulbrotha
05-16-2012, 03:38 PM
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

$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

funkysoulbrotha
05-17-2012, 07:58 PM
Anyone have any idea how to store the value that I give for the image & then send it to the database? Please help!:confused:

xelawho
05-17-2012, 08:06 PM
can an image have a value? I thought values were only for form fields, buttons, etc. I would test this before going much further:

<img src="images/1.jpg" value = "flower" onclick="alert(this.value)">

and probably use an ID instead

on that topic, the IDs for your "a" tags are illegal - IDs shouldn't start with a number, amongst other things.

dunno if that helps, but it will probably come in useful at some point...

funkysoulbrotha
05-17-2012, 08:31 PM
thanks, that's one part of the puzzle solved.

Now I need to be able to get javascript to listen for when it is dropped & try to send the id via php to the database.

funkysoulbrotha
05-18-2012, 02:51 AM
I have added a httprequest to post the values to the database, but am unsure how to listen for each seperate dropzone??



var http = new XMLHttpRequest();
var url = "post.php";

var params = 'drop_zone1='+iObj;//sends data to the specific column in database table


http.open("POST", url, true);


http.onreadystatechange = function() {
if(http.readyState == 4 && http.status == 200) {
alert(http.responseText);
}
}
http.send(params);




Please help if you can, thanks

funkysoulbrotha
05-18-2012, 06:30 PM
Anyone have a solution for catching the drop event in javascript?...please:(



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum