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 相关文章推荐
Discuz! 6.1_jQuery兼容问题
Sep 23 Javascript
jQuery 1.3 和 Validation 验证插件1.5.1
Jul 09 Javascript
jQuery之按钮组件的深入解析
Jun 19 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Sep 04 Javascript
js和jquery中循环的退出和继续学习记录
Sep 06 Javascript
jQuery中queue()方法用法实例
Dec 29 Javascript
详解微信小程序——自定义圆形进度条
Dec 29 Javascript
JavaScript手风琴页面制作
May 17 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
Jun 05 Javascript
详解在vue-cli项目中安装node-sass
Jun 21 Javascript
JavaScript文本特效实例小结【3个示例】
Dec 22 Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
Jul 13 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
Zend公司全球首推PHP认证
2006/10/09 PHP
PHP下使用CURL方式POST数据至API接口的代码
2013/02/14 PHP
PDO防注入原理分析以及使用PDO的注意事项总结
2014/10/23 PHP
利用PHP脚本在Linux下用md5函数加密字符串的方法
2015/06/29 PHP
详解WordPress中创建和添加过滤器的相关PHP函数
2015/12/29 PHP
PHP自定义序列化接口Serializable用法分析
2017/12/29 PHP
Laravel框架运行出错提示RuntimeException No application encryption key has been specified.解决方法
2019/04/02 PHP
网站上面有这种切换效果
2006/06/26 Javascript
获取下拉列表框的值是数组,split,$.inArray示例
2013/11/13 Javascript
Javascript闭包用法实例分析
2015/01/23 Javascript
浅谈Javascript中的Function与Object
2015/01/26 Javascript
jQuery stop()用法实例详解
2016/07/28 Javascript
学习Node.js模块机制
2016/10/17 Javascript
详解vue-router基本使用
2017/04/18 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
2017/07/13 Javascript
简单介绍Python中的filter和lambda函数的使用
2015/04/07 Python
Python封装原理与实现方法详解
2018/08/28 Python
详解python配置虚拟环境
2019/04/08 Python
python利用itertools生成密码字典并多线程撞库破解rar密码
2019/08/12 Python
python数据类型之间怎么转换技巧分享
2019/08/20 Python
DJANGO-URL反向解析REVERSE实例讲解
2019/10/25 Python
解决Pycharm 导入其他文件夹源码的2种方法
2020/02/12 Python
详解Python利用configparser对配置文件进行读写操作
2020/11/03 Python
为智能设备设计个性化保护套网站:caseable
2017/01/05 全球购物
波兰品牌内衣及泳装网上商店:Astratex.pl
2017/02/03 全球购物
阿里巴巴英国:Alibaba英国
2019/12/11 全球购物
神话般的珠宝:Ross-Simons
2020/07/13 全球购物
学生实习推荐信范文
2013/11/26 职场文书
欢度春节标语
2014/07/01 职场文书
大学本科生职业生涯规划书范文
2014/09/14 职场文书
2014年扶贫工作总结
2014/11/18 职场文书
创业计划书之川味火锅店
2019/09/02 职场文书
Python 流媒体播放器的实现(基于VLC)
2021/04/28 Python
django上传文件的三种方式
2021/04/29 Python
如何利用 CSS Overview 面板重构优化你的网站
2021/10/24 HTML / CSS
草系十大最强宝可梦,纸片人上榜,榜首大家最熟悉
2022/03/18 日漫