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 相关文章推荐
js常见表单应用技巧
Jan 09 Javascript
jQuery把表单元素变为json对象
Nov 06 Javascript
jquery实现类似淘宝星星评分功能有截图
Sep 15 Javascript
Vue keep-alive实践总结(推荐)
Aug 31 Javascript
JS分页的实现(同步与异步)
Sep 16 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
Oct 25 Javascript
Vue中使用Sortable的示例代码
Apr 07 Javascript
element-ui中select组件绑定值改变,触发change事件方法
Aug 24 Javascript
Vue.js数字输入框组件使用方法详解
Oct 19 Javascript
JS实现音乐钢琴特效
Jan 06 Javascript
Vue + Scss 动态切换主题颜色实现换肤的示例代码
Apr 27 Javascript
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 Vue.js
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
在普通HTTP上安全地传输密码
2007/07/21 PHP
php 数组的创建、调用和更新实现代码
2009/03/09 PHP
php计算当前程序执行时间示例
2014/04/24 PHP
php生成txt文件实例代码介绍
2016/04/28 PHP
PHP用户管理中常用接口调用实例及解析(含源码)
2017/03/09 PHP
Laravel框架集成UEditor编辑器的方法图文与实例详解
2019/04/17 PHP
laravel 去掉index.php伪静态的操作方法
2019/10/12 PHP
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
2011/04/01 Javascript
jquery复选框多选赋值给文本框的方法
2015/01/27 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
2015/03/03 Javascript
JavaScript获得url所有参数键值表的方法
2015/03/21 Javascript
理解javascript对象继承
2016/04/17 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
2016/05/09 Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
2016/11/26 Javascript
jQuery插件fullPage.js实现全屏滚动效果
2016/12/02 Javascript
ES6(ECMAScript 6)新特性之模板字符串用法分析
2017/04/01 Javascript
angular2路由切换改变页面title的示例代码
2017/08/23 Javascript
详解Vue快速零配置的打包工具——parcel
2018/01/16 Javascript
微信小程序实现刷脸登录
2018/05/25 Javascript
nodejs中实现修改用户路由功能
2019/05/24 NodeJs
vue同个按钮控制展开和折叠同个事件操作
2020/07/29 Javascript
[03:01]完美盛典趣味短片 DOTA2年度最佳&拉胯英雄
2019/12/07 DOTA
Python双精度浮点数运算并分行显示操作示例
2017/07/21 Python
Python批量删除只保留最近几天table的代码实例
2019/04/01 Python
Python3获取电脑IP、主机名、Mac地址的方法示例
2019/04/11 Python
python各类经纬度转换的实例代码
2019/08/08 Python
使用pyshp包进行shapefile文件修改的例子
2019/12/06 Python
Python实现点云投影到平面显示
2020/01/18 Python
HTML5新表单元素_动力节点Java学院整理
2017/07/12 HTML / CSS
德国苹果商店:MacTrade
2020/05/18 全球购物
构造方法和其他方法的区别
2016/04/26 面试题
高一学年自我鉴定范文(3篇)
2014/09/26 职场文书
2015年119消防宣传日活动总结
2015/03/24 职场文书
新学期开学标语2015
2015/07/16 职场文书
高效课堂教学反思
2016/02/24 职场文书
ubuntu端向日葵键盘输入卡顿问题及解决
2022/12/24 Servers