jQuery实现元素拖拽并cookie保存顺序的方法


Posted in Javascript onFebruary 20, 2016

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
javascript getElementsByName()的用法说明
Jul 31 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
Aug 07 Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
Feb 12 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
Feb 05 Javascript
javascript实现添加附件功能的方法
Nov 18 Javascript
jQuery中的通配符选择器使用总结
May 30 Javascript
用JavaScript获取页面文档内容的实现代码
Jun 10 Javascript
JS正则表达式修饰符中multiline(/m)用法分析
Dec 27 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
Apr 21 Javascript
webpack热模块替换(HMR)/热更新的方法
Apr 05 Javascript
js实现GIF图片的分解和合成
Oct 24 Javascript
Javascript webpack动态import
Apr 19 Javascript
jQuery获得字体颜色16位码的方法
Feb 20 #Javascript
jQuery实现的文字hover颜色渐变效果实例
Feb 20 #Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
Feb 19 #Javascript
js面向对象的写法
Feb 19 #Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
Feb 19 #Javascript
js下将金额数字每三位一逗号分隔
Feb 19 #Javascript
javascript下使用Promise封装FileReader
Feb 19 #Javascript
You might like
PHP5在Apache下的两种模式的安装
2006/09/05 PHP
php5.4以上版本GBK编码下htmlspecialchars输出为空问题解决方法汇总
2015/04/03 PHP
微信开发之网页授权获取用户信息(二)
2016/01/08 PHP
微信公众号实现会员卡领取功能
2017/06/08 PHP
不懂JavaScript应该怎样学
2008/04/16 Javascript
IE6弹出“已终止操作”的解决办法
2010/11/27 Javascript
HTML,CSS,JavaScript速查表推荐
2014/12/02 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
2015/01/22 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
2015/06/01 Javascript
javascript实现树形菜单的方法
2015/07/17 Javascript
AngularJS 实现JavaScript 动画效果详解
2016/09/08 Javascript
JS框架之vue.js(深入三:组件1)
2016/09/29 Javascript
weui框架实现上传、预览和删除图片功能代码
2017/08/24 Javascript
Vue如何从1.0迁移到2.0
2017/10/19 Javascript
jQuery简单判断值是否存在于数组中的方法示例
2018/04/17 jQuery
vue实现记事本功能
2019/06/26 Javascript
vue实现数字滚动效果
2020/06/29 Javascript
基于javascript实现放大镜特效
2020/12/03 Javascript
Python tempfile模块学习笔记(临时文件)
2014/05/25 Python
Python标准库之itertools库的使用方法
2017/09/07 Python
遗传算法之Python实现代码
2017/10/10 Python
Python使用matplotlib实现的图像读取、切割裁剪功能示例
2018/04/28 Python
Flask和Django框架中自定义模型类的表名、父类相关问题分析
2018/07/19 Python
Python利用matplotlib做图中图及次坐标轴的实例
2019/07/08 Python
Python操作Mongodb数据库的方法小结
2019/09/10 Python
Python 脚本实现淘宝准点秒杀功能
2019/11/13 Python
使用Dajngo 通过代码添加xadmin用户和权限(组)
2020/07/03 Python
Python2与Python3关于字符串编码处理的差别总结
2020/09/07 Python
对Pytorch 中的contiguous理解说明
2021/03/03 Python
英国家庭和商业健身器材购物网站:Fitness Options
2018/07/05 全球购物
英国绿色商店:Natural Collection
2019/05/03 全球购物
linux系统都有哪些运行级别
2012/04/15 面试题
采购主管工作职责
2013/12/12 职场文书
党章学习思想汇报
2014/01/14 职场文书
2014法院干警廉洁警示教育思想汇报
2014/09/13 职场文书
先进工作者主要事迹材料
2015/11/03 职场文书