But how do you save the order, think of cookies, but how to save the order with cookies, directly save the HTML code next read cover can, but the total feeling content more words to save more things, and then use the UI plugin to get ID save ID in the reading to achieve the order of save, nonsense not to say more. Look directly at the code ...
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<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>
<body>
<div>
<ul id= "MyList" >
<li id= "Mylist_mood" ><a href= "#" > Mood </a> </li>
<li id= "Mylist_photo" ><a href= "#" > Album </a> <a href= "#" class= "QLink" > Upload </a> </li>
<li id= "Mylist_blog" ><a href= "#" > Log </a> <a href= "#" class= "QLink" > Release </a> </li>
<li id= "Mylist_vote" ><a href= "#" > Polling </a> </li>
<li id= "mylist_shate" ><a href= "#" > Share </a> </li>
<li id= "Mylist_group" ><a href= "#" > Group </a> </li>
</ul>
</div>
</body>
Oh.. This saw the effect of the lack of hope master enlighten ....
