Help... PHP sessions?

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
Tizzlenuts
Forum Newbie
Posts: 1
Joined: Sat Apr 02, 2011 11:30 am

Help... PHP sessions?

Post by Tizzlenuts »

created drag and drop objects for my website but not sure how to save the positions of these objects, im guessing the best way would be using php sessions but not 100% sure how to go about it... code is below... Thanks in advance

---------------------------------------------------------------------------------------------------------------

<html>
<head>

<link rel="stylesheet" href="css/demos.css" media="screen" type="text/css">
<style type="text/css">
/* CSS for the demo. CSS needed for the scripts are loaded dynamically by the scripts */
#mainContainer{
width:600px;
margin:0 auto;
margin-top:10px;
border:1px solid #000;
padding:2px;
}

#guests{
width:200px;
float:left;
border:1px solid #000;
background-color:#E2EBED;
padding:3px;
height:400px;
}
#tables{
width:300px;
float:right;
margin:2px;
height:400px;
}
.dragableBox,.dragableBoxRight{
width:80px;
height:20px;
border:1px solid #000;
background-color:#FFF;
margin-bottom:5px;
padding:10px;
font-weight:bold;
text-align:center;
}
div.dragableBoxRight{
height:65px;
width:110px;
float:left;
margin-right:5px;
padding:5px;
background-color:#E2EBED;
}
.dropBox{
width:190px;
border:1px solid #000;
background-color:#E2EBED;
height:400px;
margin-bottom:10px;
padding:3px;
overflow:auto;
}
a{
color:#F00;
}

.clear{
clear:both;
}
img{
border:0px;
}
</style>
<script type="text/javascript" src="js/drag-drop-custom.js"></script>
</head>
<body>
<div id="header"><a href="/index.html"><img src="/images/heading3.gif"></a></div>
<div id="mainContainer">
<div class="konaBody">
</div>
<div id="guests">
<p><b>Guests</b></p>
<div id="dropContent">
<div class="dragableBox" id="box1">Guest 1</div>
<div class="dragableBox" id="box2">Guest 2</div>
<div class="dragableBox" id="box3">Guest 3</div>
<div class="dragableBox" id="box4">Guest 4</div>
<div class="dragableBox" id="box5">Guest 5</div>
<div class="dragableBox" id="box6">Guest 6</div>
<div class="dragableBox" id="box7">Guest 7</div>
</div>
</div>
<div id="tables">
<div id="box106" class="dragableBoxRight">Table 1</div>
<div id="box107" class="dragableBoxRight">Table 2</div>
<div id="box101" class="dragableBoxRight">Table 3</div>
<div id="box104" class="dragableBoxRight">Table 4</div>
<div id="box105" class="dragableBoxRight">Table 5</div>
<div id="box102" class="dragableBoxRight">Table 6</div>
<div id="box103" class="dragableBoxRight">Table 7</div>


</div>
<div class="clear"></div>
<div class="konaBody"></div>
</div>

<div id="debug"></div>
<script type="text/javascript">

// Custom drop action for the table boxes
function dropItems(idOfDraggedItem,targetId,x,y)
{
var targetObj = document.getElementById(targetId); // Creating reference to target obj
var subDivs = targetObj.getElementsByTagName('DIV'); // Number of subdivs
if(subDivs.length>0 && targetId!='guests')return; // Sub divs exists on target, i.e. element already dragged on it. => return from function without doing anything
var sourceObj = document.getElementById(idOfDraggedItem); // Creating reference to source, i.e. dragged object
var numericIdTarget = targetId.replace(/[^0-9]/gi,'')/1; // Find numeric id of target
var numericIdSource = idOfDraggedItem.replace(/[^0-9]/gi,'')/1; // Find numeric id of source
if(numericIdTarget-numericIdSource==100){ // In the html above, there's a difference in 100 between the id of the country and it's capital(example:
// Oslo have id "box1" and Norway have id "box101", i.e. 1 + 100.
sourceObj.style.backgroundColor='#0F0'; // Set green background color for dragged object
}else{
sourceObj.style.backgroundColor=''; // Reset back to default white background color
}
if(targetId=='guests'){ // Target is the guests box - append the dragged item as child of first sub div, i.e. as child of <div id="dropContent">
targetObj = targetObj.getElementsByTagName('DIV')[0];
}
targetObj.appendChild(sourceObj); // Append
}



var dragDropObj = new DHTMLgoodies_dragDrop(); // Creating drag and drop object

// Assigning drag events to the guests
dragDropObj.addSource('box1',true); // Make <div id="box1"> dragable. slide item back into original position after drop
dragDropObj.addSource('box2',true); // Make <div id="box2"> dragable. slide item back into original position after drop
dragDropObj.addSource('box3',true); // Make <div id="box3"> dragable. slide item back into original position after drop
dragDropObj.addSource('box4',true); // Make <div id="box4"> dragable. slide item back into original position after drop
dragDropObj.addSource('box5',true); // Make <div id="box4"> dragable. slide item back into original position after drop
dragDropObj.addSource('box6',true); // Make <div id="box4"> dragable. slide item back into original position after drop
dragDropObj.addSource('box7',true); // Make <div id="box4"> dragable. slide item back into original position after drop


// Assigning drop events on the tables
dragDropObj.addTarget('box101','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box102','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box103','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box104','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box105','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box106','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box107','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('guests','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop

dragDropObj.init(); // Initizlizing drag and drop object
</script>
</body>
</html>
Post Reply