Jquery拖拽并简单保存的实现代码


Posted in Javascript onNovember 28, 2010

但是如何保存顺序呢,想到了cookie,但是用如何用cookie保存顺序呢,直接保存html代码下次读取覆盖可以,但是总感觉内容多的话 保存的东西比较多,后用ui插件获取id保存id在读取实现了顺序的保存,废话不多说..直接看代码...

<!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.3.2.min.js" type="text/javascript"></script> 
<script src="ui.core.js" type="text/javascript"></script> 
<script src="ui.sortable.js" type="text/javascript"></script> 
<script src="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 }) 
} 
}); 
$(".qlink").click(function() { 
alert(this.className); 
}); 
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> <a href="#" class="qlink">上传</a> </li> 
<li id="myList_blog"><a href="#">日志</a> <a href="#" class="qlink">发表</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>

呵呵.. 这下看到了效果,不足方面望高手赐教....
Javascript 相关文章推荐
兼容FF和IE的动态table示例自写
Oct 21 Javascript
JavaScript判断表单提交时哪个radio按钮被选中的方法
Mar 21 Javascript
JavaScript中Null与Undefined的区别解析
Jun 30 Javascript
javascript中tostring()和valueof()的用法及两者的区别
Nov 16 Javascript
js实现文字垂直滚动和鼠标悬停效果
Dec 31 Javascript
js获取Html元素的实际宽度高度的方法
May 19 Javascript
完美实现八种js焦点轮播图(下篇)
Apr 20 Javascript
JS实现弹出下载对话框及常见文件类型的下载
Jul 13 Javascript
layui实现动态和静态分页
Apr 28 Javascript
layui表单验证select下拉框实现验证的方法
Sep 05 Javascript
JavaScript实现文件下载并重命名代码实例
Dec 12 Javascript
解决vue组件销毁之后计时器继续执行的问题
Jul 21 Javascript
jquery下将选择的checkbox的id组成字符串的方法
Nov 28 #Javascript
用jquery设置按钮的disabled属性的实现代码
Nov 28 #Javascript
IE6弹出“已终止操作”的解决办法
Nov 27 #Javascript
javascript 获取所有id中包含某关键字的控件的实现代码
Nov 25 #Javascript
javascript中substr,substring,slice.splice的区别说明
Nov 25 #Javascript
JavaScript中的类继承
Nov 25 #Javascript
js getBoundingClientRect() 来获取页面元素的位置
Nov 25 #Javascript
You might like
PHP 身份证号验证函数
2009/05/07 PHP
PHP大批量数据操作时临时调整内存与执行时间的方法
2011/04/20 PHP
微信支付PHP SDK ―― 公众号支付代码详解
2016/09/13 PHP
js prototype截取字符串函数
2010/04/01 Javascript
js时间戳格式化成日期格式的多种方法
2013/11/11 Javascript
jquery自动填充勾选框即把勾选框打上true
2014/03/24 Javascript
js图片实时加载提供网页打开速度
2014/09/11 Javascript
zTree插件下拉树使用入门教程
2016/04/11 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
2016/06/14 Javascript
很实用的js选项卡切换效果
2016/08/12 Javascript
JavaScript组合模式学习要点
2016/08/26 Javascript
详解js前端代码异常监控
2017/01/11 Javascript
基于Node的React图片上传组件实现实例代码
2017/05/10 Javascript
详解VueJs前后端分离跨域问题
2017/05/24 Javascript
vue进行图片的预加载watch用法实例讲解
2018/02/07 Javascript
jQuery实现遍历XML节点和属性的方法示例
2018/04/29 jQuery
Nodejs中获取当前函数被调用的行数及文件名详解
2018/12/12 NodeJs
详解在vue-cli3.0中自定css、js和图片的打包路径
2019/08/26 Javascript
python登录QQ邮箱发信的实现代码
2013/02/10 Python
在Mac OS系统上安装Python的Pillow库的教程
2015/11/20 Python
django删除表重建的实现方法
2019/08/28 Python
Python机器学习工具scikit-learn的使用笔记
2021/01/28 Python
CSS3弹性伸缩布局之box布局
2016/07/12 HTML / CSS
HTML5之SVG 2D入门4—笔画与填充
2013/01/30 HTML / CSS
HTML table 表格边框的实现思路
2019/10/12 HTML / CSS
Smashbox官网:美国知名彩妆品牌
2017/01/05 全球购物
Nuts.com:优质散装,批发坚果、干果和巧克力等
2017/03/21 全球购物
Jones New York官网:美国女装品牌,受白领女性欢迎
2019/11/26 全球购物
澳大利亚厨房和家用电器购物网站:Bing Lee
2021/01/11 全球购物
internal修饰符起什么作用
2013/12/16 面试题
在DELPHI中调用存储过程和使用内嵌SQL哪种方式更好
2016/11/22 面试题
财务会计人员岗位职责
2013/11/30 职场文书
雷峰塔导游词
2015/02/09 职场文书
2015年医药代表工作总结
2015/04/25 职场文书
技术入股合作协议书
2016/03/21 职场文书
详解CSS3浏览器兼容
2022/12/24 HTML / CSS