cookie除了能用來存儲用戶名,密碼等數據外還可以用來記錄div之前的位置。

　　先上個布局

<div id="div1" style></div>

#div1{
	width: 100px;
	height: 100px;
	background: red;
	position: absolute;
}

　　這裏先說下拖拽的大體原理,將物體拖到新的位置可以通過改變left和top實現。

　　在將div從位置1移動到div2的過程中,不變的是鼠標在div中的位置。因此我們讓鼠標在div中的水平位置為disX,豎直為disY。

        var oDiv = document.getElementById(‘div1‘);
	var disX = 0;
	var disY = 0;

	oDiv.onmousedown = function(ev){
		var oEvent = ev||event;

		disX = oEvent.clientX-oDiv.offsetLeft;
		disY = oEvent.clientY-oDiv.offsetTop;

		document.onmousemove = function(ev){
			var oEvent = ev||event;

			oDiv.style.left = oEvent.clientX-disX+‘px‘;
			oDiv.style.top = oEvent.clientY-disY+‘px‘;
		}

		document.onmouseup = function(){
			document.onmousemove = null;
			document.onmouseup = null;
		}

		return false;
	}    

　　使用上面的代碼我們就能對元素進行舒服的拖拽,但如何記錄位置呢,這裏就要借用cookie。為了避免位置的不準確與頻繁改變我們把mouseup事件的位置記錄在cookie中

setCookie(‘x‘,oDiv.offsetLeft,5);
setCookie(‘y‘,oDiv.offsetTop,5);

　　為了保證下一次讀取頁面時位置能正確我們把獲取cookie放在所有事件之前。

oDiv.style.left = getCookie(‘x‘)+‘px‘;
oDiv.style.top = getCookie(‘y‘)+‘px‘;

　　但一開始是沒有cookie的，為了嚴謹一點我們費點力將上面的代碼改為

var x=getCookie(‘x‘);
var y=getCookie(‘y‘);
	
if(x)
{
    oDiv.style.left=x+‘px‘;
    oDiv.style.top=y+‘px‘;
}

　　下面是js部分的完整代碼

var oDiv=document.getElementById(‘div1‘);
	var disX=0;
	var disY=0;
	
	var x=getCookie(‘x‘);
	var y=getCookie(‘y‘);
	
	if(x)
	{
		oDiv.style.left=x+‘px‘;
		oDiv.style.top=y+‘px‘;
	}
	
	oDiv.onmousedown=function (ev)
	{
		var oEvent=ev||event;
		
		disX=oEvent.clientX-oDiv.offsetLeft;
		disY=oEvent.clientY-oDiv.offsetTop;
		
		document.onmousemove=function (ev)
		{
			var oEvent=ev||event;
			
			oDiv.style.left=oEvent.clientX-disX+‘px‘;
			oDiv.style.top=oEvent.clientY-disY+‘px‘;
		};
		
		document.onmouseup=function ()
		{
			document.onmousemove=null;
			document.onmouseup=null;
			
			setCookie(‘x‘, oDiv.offsetLeft, 5);
			setCookie(‘y‘, oDiv.offsetTop, 5);
		};
		
		return false;
	};

利用cookie記錄div之前位置