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

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

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