编程 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 相关文章推荐

JavaScript使用prototype定义对象类型(转)[

Dec 22 Javascript

javascript 使td内容不换行不撑开

Nov 29 Javascript

JQuery调webservice实现邮箱验证(检测是否可用)

May 21 Javascript

Js nodeType 属性全面解析

Nov 14 Javascript

Bootstrap滚动监听（Scrollspy）插件详解

Apr 26 Javascript

原生JS查找元素的方法(推荐)

Nov 22 Javascript

Bootstrap实现各种进度条样式详解

Apr 13 Javascript

JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)

Jul 07 Javascript

jQuery实现的两种简单弹窗效果示例

Apr 18 jQuery

vue 根据数组中某一项的值进行排序的方法

Aug 30 Javascript

vue element中axios下载文件（后端Python）

May 10 Javascript

element-ui 实现响应式导航栏的示例代码

May 08 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