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 相关文章推荐
JQuery this 和 $(this) 的区别
Aug 23 Javascript
js写一个弹出层并锁屏效果实现代码
Dec 07 Javascript
jQuery实现图片放大预览实现原理及代码
Sep 12 Javascript
wap手机端解决返回上一页的js实例
Dec 08 Javascript
深入理解Webpack 中路径的配置
Jun 17 Javascript
vue.js数据绑定的方法(单向、双向和一次性绑定)
Jul 13 Javascript
基于JavaScript实现图片连播和联级菜单实例代码
Jul 28 Javascript
ionic使用angularjs表单验证(模板验证)
Dec 12 Javascript
微信小程序webview实现长按点击识别二维码功能示例
Jan 24 Javascript
JavaScript实现预览本地上传图片功能完整示例
Mar 08 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
Jun 20 Javascript
使用webpack搭建vue环境的教程详解
Dec 31 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
PHP中Fatal error session_start()错误解决步骤
2014/08/05 PHP
游戏人文件夹程序 ver 4.03
2006/07/14 Javascript
JavaScript 浏览器验证代码(来自discuz)
2010/07/17 Javascript
jQuery的实现原理的模拟代码 -3 事件处理
2010/08/03 Javascript
基于JQuery 的消息提示框效果代码
2011/07/31 Javascript
50个比较实用jQuery代码段
2011/09/18 Javascript
Js日期选择器并自动加入到输入框中示例代码
2013/08/02 Javascript
把jquery 的dialog和ztree结合实现步骤
2013/08/02 Javascript
探寻Javascript执行效率问题
2014/11/12 Javascript
NodeJS制作爬虫全过程
2014/12/22 NodeJs
jQuery插件EasyUI校验规则 validatebox验证框
2015/11/29 Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
2016/05/12 Javascript
JavaScript实现简单的双色球(实例讲解)
2017/07/31 Javascript
详解Angular2表单-模板驱动的表单(Template-Driven Forms)
2017/08/04 Javascript
小程序红包雨的实现示例
2019/02/19 Javascript
vue封装swiper代码实例解析
2019/10/08 Javascript
[04:11]2014DOTA2国际邀请赛 CIS遗憾出局梦想不灭
2014/07/09 DOTA
Python性能优化技巧
2015/03/09 Python
详解Python异常处理中的Finally else的功能
2017/12/29 Python
TensorFlow神经网络优化策略学习
2018/03/09 Python
matplotlib 纵坐标轴显示数据值的实例
2018/05/25 Python
Pandas读取并修改excel的示例代码
2019/02/17 Python
从0开始的Python学习014面向对象编程(推荐)
2019/04/02 Python
浅析Windows 嵌入python解释器的过程
2019/07/26 Python
如何使用python传入不确定个数参数
2020/02/18 Python
pycharm新建Vue项目的方法步骤(图文)
2020/03/04 Python
python基于exchange函数发送邮件过程详解
2020/11/06 Python
详解H5本地储存Web Storage
2017/07/03 HTML / CSS
详解如何通过H5(浏览器/WebView/其他)唤起本地app
2017/12/11 HTML / CSS
活动邀请函范文
2014/01/19 职场文书
运动会广播稿400字
2014/01/25 职场文书
学生会竞选演讲稿学习部
2014/08/25 职场文书
2014年“向国旗敬礼”网上签名寄语活动方案
2014/09/27 职场文书
跑出一片天观后感
2015/06/08 职场文书
Java spring定时任务详解
2021/10/05 Java/Android
Ajax实现异步加载数据
2021/11/17 Javascript