PDA

View Full Version : Problem with dynamic div position



oviya78
01-13-2008, 08:22 AM
hi,

I need to save the positions of the dom drag & drop objects using cookies.I thought almost finished, but there are some bugs.

what i need - After drag when I refresh the page, div positions do not change there current position.

Can someone help me with this? The whole code as below.



<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
margin:0px;
}
-->
</style><head>
<style type="text/css">
div{
width:130px;
}
</style>
<script language="javascript">

var x=0;
var y=0;
var stateDragged = false;
var moveDiv=null;
var cookieName;
var getYours;
//Cookie start
function occupyCookie(name,value){
var expires = 0;
document.cookie = name+"="+value;
}

function getCookie(cookieName){
if(document.cookie){
createdCookie = document.cookie.indexOf(cookieName);
if(createdCookie != -1){
cookieStart = (document.cookie.indexOf("=", createdCookie) + 1);
cookieEnd = document.cookie.indexOf(";", createdCookie);
if(cookieEnd == -1){
cookieEnd = document.cookie.length;
}
getYours = document.cookie.substring(cookieStart, cookieEnd);
return getYours;
}
}
}
function splitPosition(){
for(var i=1;i<5;i++){
var finalID = 'dragID'+i;
var needSplit = getCookie(finalID);
if(needSplit==null){
continue;
}
var splited = needSplit.split(',');
document.getElementById('dragID'+i).style.left=splited[0];
document.getElementById('dragID'+i).style.top=splited[1];
//document.getElementById('dragID'+i).style.position='absolute';
}
}
function eliminateCookie(name) {
occupyCookie(name,"",-1);
}
//Cookie end

//setOpacity start
function setOpacity(value){
moveDiv.style.opacity = value/10;
moveDiv.style.filter = 'alpha(opacity=' + value*10 + ')';
}
//setOpacity end

//drag & cloneNode start
function mouseclick(event, id){
srcDiv = window.event?window.event.srcelement : event.target;
moveDiv = srcDiv.cloneNode(true);
moveDiv.style.display="none";
moveDiv.style.position="absolute";
moveDiv.style.zindex="100";
stateDragged = true;
document.body.appendChild(moveDiv);
cookieName = id;
}
function fineposition(event){
if(event.offsetX || event.offsetY){
x = event.offsetX;
y = event.offsetY;
}
else{
x = event.pageX;
y = event.pageY;
}
if(stateDragged == true){
if(moveDiv.parentNode!=document.body){
document.body.appendChild(moveDiv);
}
moveDiv.style.left=x+8+"px";
moveDiv.style.top=y+8+"px";
moveDiv.style.display="";
//moveDiv.style.position="absolute";
setOpacity(3);
}
}
function getDivLocation(ele){
var eleLeft = 0;
var eleTop = 0;
if(ele.offsetParent){
eleLeft = ele.offsetLeft;
eleTop = ele.offsetTop;
while(ele = ele.offsetParent){
eleLeft = eleLeft+ele.offsetLeft;
eleTop = eleTop+ele.offsetTop;
}
}
return [eleLeft, eleTop];
}
function removeChild(ev){
if (moveDiv != null){
stateDragged = false;
targetDiv = window.event?window.event.srcelement : ev.target;
if (targetDiv.nextSibling != null){
targetDiv.parentNode.insertBefore(srcDiv, targetDiv.nextSibling);
}
else{
document.body.appendChild(srcDiv);
}
moveDiv.parentNode.removeChild(moveDiv);
moveDiv=null;
}
for(var i=1; i<5; i++){
var loca = getDivLocation(document.getElementById('dragID'+i));
occupyCookie('dragID'+i,loca[0]+","+loca[1]);
}
}
//drag & cloneNode end
</script>
</head>
</head>
<body onMouseMove="fineposition(event);" onMouseUp="removeChild(event);" >
<div style="height:10px;"></div>
<div id="dragID1" style="background:cyan" onMouseDown="mouseclick(event,'dragID1');">&nbsp;</div>
<div id="dragID2" style="background:blue" onMouseDown="mouseclick(event,'dragID2');"> &nbsp;</div>
<div id="dragID3" style="background:yellow" onMouseDown="mouseclick(event,'dragID3');"> &nbsp;</div>
<div id="dragID4" style="background:gray" onMouseDown="mouseclick(event,'dragID4');">&nbsp;</div>

<script>
splitPosition();
</script>
</body>
</html>

???
01-15-2008, 04:48 AM
In your occupyCookie function, you don't define the expiration date or path. Use:

function occupyCookie(name,value,expireDate,path){
document.cookie = name+"="+value+";expires="+expireDate+";path="+path+";";
}
expireDate needs to be a UTC string though (you can use (a date).toUTCString ();). That might not fix it but...