Basically i am dragging certain elements to many droppable areas. Once i have dragged all my respective elements i wish to save these drag conditions and update a database using php. But for the purpose of understanding how to do it i have one droparea in my example here.
The drag and drop works. I just cant get it to do anything. for example
$A($('ee').getElementsByTagName('div')).each(function(item) {
new Draggable(
item,
{revert: true,});
});
Droppables.add(
'droparea',
{
hoverclass: 'hoverActive',
accept:'g',
onDrop: moveItem
}
);
function moveItem( drag,drop){
drag.parentNode.removeChild(drag);
drop.appendChild(drag);
}
I want to once i drop the elements into the droparea i can the press save and "do" something in the php script.
<DIV id ='ee'><?foreach($player1 as $player_id => $playername){?><tr><td><div id ="player_<?=$player_id?>" class = 'g'><?=$playername?></div></td></tr>
Take it that droparea is only a normal at the minute.
<div id = "droparea"></div>
Once i drag and drop $pname i want to send that to a php script but dont know how??? Please help.
You need to wrap your dropbox within a POST form and then have some hidden fields accompanying each item in your draggable items loop with the required value.
<input type="hidden" name="players[]" value="PLAYER_ID_HERE">
Then once they're within the dropbox and within the form area, hit submit and it should go through as a normal POST array.
$players = $_POST['players];