Advanced Search

Results 1 to 2 of 2

Thread: Problem with dynamic div position

  1. #1
    Join Date
    Jan 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Problem with dynamic div position

    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>

  2. #2
    Join Date
    May 2006
    Location
    Alaska
    Posts
    163
    Thanks
    5
    Thanked 2 Times in 2 Posts

    Default

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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •