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

最新推荐文章于 2023-11-27 10:38:02 发布

软件-攻城狮

最新推荐文章于 2023-11-27 10:38:02 发布

阅读量737

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/smshuxue/article/details/16996063

版权

JavaScript 专栏收录该内容

67 篇文章 0 订阅

订阅专栏

今闲着无聊顺便看了下jquery ui的拖拽插件，实现拖拽的方法很简单，看到效果后兴奋小下...

但是如何保存顺序呢，想到了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>