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 相关文章推荐
解决自定义$(id)的方法与jquery选择器$冲突的问题
Jun 14 Javascript
jQuery修改CSS伪元素属性的方法
Jul 30 Javascript
transport.js和jquery冲突问题的解决方法
Feb 10 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
Jan 29 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
May 12 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
Jun 06 Javascript
jQuery Easyui datagrid/treegrid 清空数据
Jul 09 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
Sep 21 Javascript
纯js实现手风琴效果代码
Apr 17 Javascript
原生js实现轮播图的示例代码
Feb 20 Javascript
简单了解JavaScript作用域
Jul 31 Javascript
React-vscode使用jsx语法的问题及解决方法
Jun 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
收音机玩机评测 406 篇视频合集
2020/03/11 无线电
apache配置虚拟主机的方法详解
2013/06/17 PHP
ECSHOP在PHP5.5及高版本上报错的解决方法
2015/08/31 PHP
优化WordPress的Google字体以加速国内服务器上的运行
2015/11/24 PHP
PHP微信刮刮卡 附微信接口
2016/07/22 PHP
PHP+Ajax实现的博客文章添加类别功能示例
2018/03/29 PHP
js操作textarea 常用方法总结
2012/12/03 Javascript
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
2013/06/09 Javascript
IE中的File域无法清空使用jQuery重设File域
2014/04/24 Javascript
javascript事件模型实例分析
2015/01/30 Javascript
JavaScript分秒倒计时器实现方法
2015/02/02 Javascript
简单实现轮播图效果的实例
2016/07/15 Javascript
原生JS实现的放大镜效果实例代码
2016/10/15 Javascript
基于js中this和event 的区别(详解)
2017/10/24 Javascript
动态加载权限管理模块中的Vue组件
2018/01/16 Javascript
Vue实现用户自定义字段显示数据的方法
2018/08/28 Javascript
Vue项目引进ElementUI组件的方法
2018/11/11 Javascript
简单了解Javscript中兄弟ifream的方法调用
2019/06/17 Javascript
[01:06] DOTA2英雄背景故事第三期之秩序法则光之守卫
2020/07/07 DOTA
Python 不同对象比较大小示例探讨
2014/08/21 Python
Python中for循环和while循环的基本使用方法
2015/08/21 Python
Python 实现数据结构-堆栈和队列的操作方法
2019/07/17 Python
Python参数传递机制传值和传引用原理详解
2020/05/22 Python
QML用PathView实现轮播图
2020/06/03 Python
阿迪达斯西班牙官方网站:adidas西班牙
2016/07/21 全球购物
草莓网化妆品加拿大网站:Strawberrynet Canada
2016/09/20 全球购物
说出数据连接池的工作机制是什么?
2013/04/19 面试题
编写类String 的构造函数、析构函数和赋值函数
2012/09/09 面试题
业务员薪酬管理制度
2014/01/15 职场文书
小学社会实践活动总结
2014/07/03 职场文书
环境日宣传活动总结
2014/07/09 职场文书
个人作风建设自查报告
2014/10/22 职场文书
建国大业电影观后感
2015/06/01 职场文书
2016年第二十届“母亲节暨幸福工程救助贫困母亲活动日”活动总结
2016/04/06 职场文书
Java 超详细讲解IO操作字节流与字符流
2022/03/25 Java/Android
SpringBoot 集成短信和邮件 以阿里云短信服务为例
2022/04/22 Java/Android