Jquery controls the movement and sorting of items in listbox. Code _ jquery

Jquery implementation code for moving and sorting items in listbox. For more information about jquery and listbox, see. The first step is html code. There are two listbox controls and two buttons on the page for moving projects.

The Code is as follows:

All fruits:		I selected:

Below are some data bound to the. cs File

The Code is as follows:

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;
}
}

In actual use, you can sort data by fields in the database.
The following is the jquery code:

The Code is as follows:

// 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 (""+ Text +"");
$ (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 (""+ Text +"");
One = $ (own). next ();
}
});
}
}