利用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.οnmοusedοwn=function (ev)
	{
		var oEvent=ev||event;
		
		disX=oEvent.clientX-oDiv.offsetLeft;
		disY=oEvent.clientY-oDiv.offsetTop;
		
		document.οnmοusemοve=function (ev)
		{
			var oEvent=ev||event;
			
			oDiv.style.left=oEvent.clientX-disX+'px';
			oDiv.style.top=oEvent.clientY-disY+'px';
		};
		
		document.οnmοuseup=function ()
		{
			document.οnmοusemοve=null;
			document.οnmοuseup=null;
			
			setCookie('x', oDiv.offsetLeft, 5);
			setCookie('y', oDiv.offsetTop, 5);
		};
		
		return false;
	};

 

转载于:https://www.cnblogs.com/yuehenying/p/6832622.html