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.

Code:

<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:

Code:

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...

Thread: Problem with dynamic div position

Thread Tools

Search Thread

Problem with dynamic div position

Bookmarks

Bookmarks

Posting Permissions