下面是详细讲解“jQuery实现拖拽页面元素并将其保存到cookie的方法”的完整攻略。
简介
拖拽是网页开发中常用的功能之一，通过它，用户可以自由地调整页面元素的位置，提高页面的可操作性和用户体验。同时，保存到cookie中，可以在页面刷新后，仍保留用户调整过的位置。
实现步骤
- 在页面中引入jQuery库，本示例中使用jQuery版本为3.6.0：
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
- 创建拖拽功能的代码：
$(function() {
// 选中需要拖拽的元素
var draggableItems = $(".draggable-item");
// 给元素绑定拖拽事件
draggableItems.draggable({
start: function(event, ui){
// 记录当前元素的初始位置
$(this).data("startPosition", ui.position);
},
stop: function(event, ui){
// 当停止拖拽时，存储当前元素的位置到cookie中
$.cookie("itemPosition"+$(this).attr("id"), ui.position);
}
});
// 遍历所有需要拖拽的元素，判断是否存在已经保存的位置信息并进行恢复
draggableItems.each(function(){
var position = $.cookie("itemPosition"+$(this).attr("id"));
if(position){
$(this).css({top: position.top+'px',left: position.left+'px'})
}
})
})
- 在需要拖拽的元素的标签中添加类名
draggable-item和一个ID号（不同元素的ID号要不一样）：
<div class="draggable-item" id="item1"></div>
- 设置cookie。需要引用jquery.cookie.js插件，本示例中使用的是1.4.1版本：
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script>
//设置cookie，保存14天
$.cookie('name', 'value', { expires: 14 });
</script>
示例说明
示例一
在这个示例中，我们创建了两个可拖拽的元素（红色方块和蓝色方块），并设置了它们的位置可以保存到cookie中。当刷新页面后，如果存在cookie记录，元素则恢复之前的位置。
<!DOCTYPE html>
<html>
<head>
<title>jQuery实现拖拽页面元素并将其保存到cookie的方法</title>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<style type="text/css">
.draggable-item{
background-color: red;
width: 100px;
height: 100px;
position: absolute;
}
#item1{
background-color: blue;
}
</style>
</head>
<body>
<div class="draggable-item" id="item1"></div>
<div class="draggable-item" id="item2"></div>
<script type="text/javascript">
$(function() {
var draggableItems = $(".draggable-item");
draggableItems.draggable({
start: function(event, ui){
$(this).data("startPosition", ui.position);
},
stop: function(event, ui){
$.cookie("itemPosition"+$(this).attr("id"), ui.position);
}
});
draggableItems.each(function(){
var position = $.cookie("itemPosition"+$(this).attr("id"));
if(position){
$(this).css({top: position.top+'px',left: position.left+'px'})
}
})
})
</script>
</body>
</html>
示例二
在这个示例中，我们创建了一个可拖拽的列表元素（ol），拖拽改变元素的顺序，并保存到cookie中。当刷新页面后，如果存在cookie记录，列表元素顺序则恢复之前的顺序。
<!DOCTYPE html>
<html>
<head>
<title>jQuery实现拖拽页面元素并将其保存到cookie的方法</title>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<style type="text/css">
.sortable-list{
font-size: 20px;
padding-left: 40px;
}
</style>
</head>
<body>
<ol class="sortable-list">
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li>六</li>
<li>七</li>
<li>八</li>
<li>九</li>
<li>十</li>
</ol>
<script type="text/javascript">
$(function() {
$("ol.sortable-list").sortable({
stop: function(event, ui){
$.cookie("sortableListOrder", $(this).sortable("toArray"));
}
});
var sortedList = $.cookie("sortableListOrder");
if (sortedList) {
for (var i=0; i<sortedList.length; i++) {
$("#" + sortedList[i]).appendTo("ol.sortable-list");
}
}
})
</script>
</body>
</html>
注意事项
- 在使用jQuery的拖拽和排序功能时，必须引入jQuery UI库。
- 在使用jQuery的cookie插件时，必须在代码中引入对应的jquery.cookie.js文件。
- cookie的过期时间可以通过expires属性进行设置。如果不设置，则表示cookie在关闭窗口时失效。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery实现拖拽页面元素并将其保存到cookie的方法 - Python技术站
微信扫一扫 
支付宝扫一扫 