编程 Javascript

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>

呵呵.. 这下看到了效果，不足方面望高手赐教....

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

用js实现的一个Flash滚动轮换显示图片代码生成器

Mar 14 Javascript

Javascript 继承机制的实现

Aug 12 Javascript

asp.net+jquery滚动滚动条加载数据的下拉控件

Jun 25 Javascript

js如何获取object类型里的键值

Feb 18 Javascript

JavaScript DOM操作表格及样式

Apr 13 Javascript

跟我学习javascript的call(),apply(),bind()与回调

Nov 16 Javascript

浅谈angular懒加载的一些坑

Aug 20 Javascript

浅谈javascript中的Function和Arguments

Aug 30 Javascript

JavaScript对象封装的简单实现方法(3种方法)

Jan 03 Javascript

设置cookie指定时间失效(实例代码)

May 28 Javascript

Bootstrap modal只加载一次数据的解决办法(推荐)

Nov 24 Javascript

在vue中使用防抖和节流,防止重复点击或重复上拉加载实例

Nov 13 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