Implementation Code for moving and sorting jquery

Public partial class _ default: system. web. ui. page
{
Protected void page_load (object sender, eventargs e)
{
If (! Ispostback)
{
Binddata ();
}
}
Private void binddata ()
{
Arraylist list = dataarray ();
For (int I = 0; I <list. count; I ++)
{
Listall. items. add (list [I]. tostring ());
Listall. items [I]. attributes ["tag"] = I. tostring (); // records the sorting fields with tags.
}
}
Private arraylist dataarray ()
{
// Some data used, which is sorted by the first pinyin character by default
Arraylist list = new arraylist ();
List. add ("strawberry ");
List. add ("Li ");
List. add ("orange ");
List. add ("Mango ");
List. add ("apple ");
List. add ("banana ");
Return list;
}
}

Code

<Table border = "0">
<Tr>
<Td width = "156"> all fruits: </td>
<Td width = "142"> </td>
<Td width = "482"> selected by me: </td>
</Tr>
<Tr>
<Td rowspan = "2"> <asp Tutorial: listbox selectionmode = "multiple" id = "listall" rows = "12" width = "156" runat = "server"> </asp: listbox> </td>
<Td height = "41" align = "center">
<Input type = "button" id = "btnleftmove" value = ">" onclick = "move ('listall', 'listmy '); "/> <br/>
<Input type = "button" id = "btnrighttmove" value = "<" onclick = "move ('listmy', 'listall');"/>
</Td>
<Td rowspan = "2"> <asp: listbox selectionmode = "multiple" id = "listmy" rows = "12" width = "156" runat = "server"> </asp: listbox> </td>
</Tr>
</Table>

Jquery

// Move the user-selected role
// Setname: name of the list to be removed from the data getname: name of the list to be moved into the data
Function move (setname, getname)
{
Var size = $ ("#" + setname + "option"). size ();
Var selsize = $ ("#" + setname + "option: selected"). size ();
If (size> 0 & selsize> 0)
{
$. Each ($ ("#" + setname + "option: selected"), function (id, own ){
Var text = $ (own). text ();
Var tag = $ (own). attr ("tag ");
$ ("#" + Getname). prepend ("<option tag =" "+ tag +" ">" + text + "</option> ");
$ (Own). remove ();
$ ("#" + Setname + ""). children ("option: first"). attr ("selected", true );
});
}
// Re-sort
$. Each ($ ("#" + getname + "option"), function (id, own ){
Orderrole (getname );
});
}
// Sort the role list by the first letter
Function orderrole (listname)
{
Var size = $ ("#" + listname + "option"). size ();
Var one = $ ("#" + listname + "option: first-child ");
If (size> 0)
{
Var text = $ (one). text ();
Var tag = parseint ($ (one). attr ("tag "));
// All elements under the first value in the loop list
$. Each ($ (one). nextall (), function (id, own ){
Var nextag = parseint ($ (own). attr ("tag "));
If (tag> nextag)
{
$ (One). remove ();
$ (Own). after ("<option tag =" "+ tag +" ">" + text + "</option> ");
One = $ (own). next ();
}
});
}
}