Home > Developer > JavaScript
But how can we save the order? I think of cookies. But how can I use cookies to save the order? I can directly Save the html code to read and overwrite it next time. But I always feel that there are more things to save if there is too much content, then, you can use the ui plug-in to obtain the id and save the id in the read order .. directly look at the code...
Copy codeThe Code is as follows:
<! 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
{
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 = "#"> 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"> published </a> </li>
<Li id = "myList_vote"> <a href = "#"> vote </a> </li>
<Li id = "myList_shate"> <a href = "#"> share </a> </li>
<Li id = "myList_group"> <a href = "#"> group </a> </li>
</Ul>
</Div>
</Body>
</Html>
Haha. Now I see the effect. I hope you can give me some advice on the shortcomings ....
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
