下面是“拖动布局之保存布局页面cookies篇”的完整攻略。
“拖动布局之保存布局页面cookies篇”是一个增强用户体验的功能,它能够让用户在网站上拖动模块,自定义页面布局,并且在下一次访问网站时能够保留上一次的布局状态,无需重新调整页面。本篇攻略将介绍如何通过使用cookies的方式,在用户访问页面时保存布局状态。
实现“拖动布局之保存布局页面cookies篇”功能,需要完成以下步骤:
使用JavaScript来实现拖拽功能。这个过程需要监听鼠标事件,检测鼠标是否放到了可拖拽元素上,以及更新元素的位置。
在用户拖拽元素时,需要将元素的位置信息保存到cookie中。将拖拽后的元素的位置信息保存到cookie的方法是:使用JavaScript的document.cookie
将元素的位置信息字符串化后,设置cookie的值。
在页面加载时,从cookie中读取保存的信息,以恢复用户上次保存的布局状态。从cookie中读取字符串,利用JSON.parse
方法将其转换成JavaScript对象,再根据对象中的位置信息更新页面元素的位置。
下面是两个代码示例,分别为:一个简单的拖拽功能的实例;一个完整的“拖动布局之保存布局页面cookies篇”的示例。
<div id="dragDiv" style="cursor:move;position:absolute;width:100px;height:100px;background-color:red;"></div>
<script type="text/javascript">
var oDiv = document.getElementById('dragDiv');
oDiv.onmousedown = function(ev){
var oEvent = ev || event;
var disX = oEvent.clientX - oDiv.offsetLeft;
var 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;
}
</script>
<div id="wrapper" style="position:relative;">
<div class="drag" style="position:absolute;width:100px;height:100px;background-color:red;top:0;left:0;">Drag Area 1</div>
<div class="drag" style="position:absolute;width:100px;height:100px;background-color:blue;top:0;left:150px;">Drag Area 2</div>
</div>
<script type="text/javascript">
// 记录所有可拖动元素的位置信息
var positions = {};
// 获取所有可拖动元素
var dragElements = document.querySelectorAll('.drag');
for(var i=0,len=dragElements.length;i<len;i++){
drag(dragElements[i]);
}
// 拖动元素函数
function drag(ele){
ele.onmousedown = function(ev){
var oEvent = ev || event;
var disX = oEvent.clientX - ele.offsetLeft;
var disY = oEvent.clientY - ele.offsetTop;
document.onmousemove = function(ev){
var oEvent = ev || event;
ele.style.left = oEvent.clientX - disX + 'px';
ele.style.top = oEvent.clientY - disY + 'px';
// 保存位置信息
positions[ele.id] = {
'left':ele.style.left,
'top':ele.style.top
};
document.cookie = 'positions='+JSON.stringify(positions);
};
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
};
return false;
};
}
// 初始化布局
initLayout();
// 从cookie中读取位置信息,并更新布局
function initLayout(){
var cookieValue = getCookie('positions');
if(cookieValue){
positions = JSON.parse(cookieValue);
for(var key in positions){
var ele = document.getElementById(key);
ele.style.left = positions[key].left;
ele.style.top = positions[key].top;
}
}
}
// 获取指定cookie的值
function getCookie(name){
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg)){
return unescape(arr[2]);
}else{
return null;
}
}
</script>
以上就是“拖动布局之保存布局页面cookies篇”的攻略,通过JavaScript实现拖拽并使用cookies保存布局状态。希望本文能够帮助你实现类似的功能。
本文链接:http://task.lmcjl.com/news/10802.html