jQuery实现元素拖拽并cookie保存顺序的方法
更新时间：2016年02月20日 11:57:09 作者：尹昱
这篇文章主要介绍了jQuery实现元素拖拽并cookie保存顺序的方法,涉及jQuery响应鼠标事件实现页面元素属性变换的技巧与使用jQuery的cookie插件保存页面信息的功能,需要的朋友可以参考下
本文实例讲述了jQuery实现元素拖拽并cookie保存顺序的方法。分享给大家供大家参考，具体如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
div
{
border: 1px solid red;
}
#myList
{
padding-top: 20px;
width: 500px;
background: #EEE;
list-style-type: none;
}
#myList li
{
height: 30px;
cursor: pointer;
margin: 20px;
border: 1px solid blue;
}
#myList a
{
text-decoration: none;
color: #0077B0;
}
#myList a:hover
{
text-decoration: underline;
}
#myList .qlink
{
font-size: 12px;
color: #666;
margin-left: 10px;
}
</style>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<script src="jquery.cookie.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#myList").sortable({ delay: 1, containment: "div",connectWith: ".otherlist", stop: function() {
//alert($("#myList").sortable("serialize"));
//alert($("#myList").sortable("toArray"));
$.cookie("myCookie",$("#myList").sortable('toArray'),{ expires: 7 });
//alert($.cookie("myCookie"));
}});
if ($.cookie("myCookie")) {
var ids = $.cookie("myCookie").split(",");
for (var i = 0; i < ids.length; i++) {
$("#" + ids[i]).appendTo("#myList");
}}
});
</script>
</head>
<body>
<div>
<ul id="myList">
<li id="myList_mood"><a href="#">心情</a> </li>
<li id="myList_photo"><a href="#">相册</a> </li>
<li id="myList_blog"><a href="#">日志</a> </li>
<li id="myList_vote"><a href="#">投票</a> </li>
<li id="myList_shate"><a href="#">分享</a> </li>
<li id="myList_group"><a href="#">群组</a> </li>
</ul>
</div>
</body>
</html>
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery拖拽特效与技巧总结》、《jQuery常见经典特效汇总》、《jQuery扩展技巧总结》、《jquery选择器用法总结》及《jquery常用操作技巧汇总》
希望本文所述对大家jQuery程序设计有所帮助。
相关文章
网站中防止表单重复提交是一个比较普遍的需求，先看原理实现方法也有很多。2010-01-01
本文搜集整理了一些如邮箱、手机号码、电话号码、邮编、数字、判断是否为空、正则匹配等等常用验证;感兴趣的朋友可以了解下2013-01-01
在使用cookie.js时，只有在jquery.js文件后加载整体才有效，下面与大家分享下有效加载顺序，有此需求的朋友可以参考下2013-07-07
2008-01-01
一个用jQuery实现的下拉菜单，非常的简单，学习jquery 的朋友可以参考下。2010-07-07
通过实例比较一下使用 XMLHttpRequest和使用fetch之间的不同，这篇文章主要介绍了你不需要jQuery(三) 新AJAX方法fetch()2016-06-06
在鼠标放到图片上， 图片会有个上下抖动的特效。很喜欢这种感觉。在于是摸索了一下，下面是一些步骤。2010-09-09
这篇文章主要为大家详细介绍了jQuery实现淡入淡出的模态框，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
这篇文章主要介绍了jQuery打字效果实现方法,详细分析了jQuery实现打字效果所涉及的jticker_split.js插件机具体调用技巧,并附带完整的demo源码供读者下载参考,需要的朋友可以参考下2015-12-12
这篇文章主要介绍了基于JQuery实现页面定时弹出广告,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-05-05
最新评论