利用cookie記錄div以前位置

　　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;
	};