首先是html代码，页面上放2个listbox控件和2个按钮用于移动项目 复制代码 代码如下: <table border="0"> <tr> <td width="156">全部水果：</td> <td width="142"> </td> <td width="482">我挑选的：</td> </tr> <tr> <td rowspan="2"><asp: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 /><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> 下面是在.cs文件中绑定一些数据 复制代码 代码如下: 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(); //用tag记录排序字段 } } private ArrayList DataArray() { //用到的一些数据，这里已默认按第一个字的拼音排序 ArrayList list = new ArrayList(); list.Add("草莓"); list.Add("梨"); list.Add("桔子"); list.Add("芒果"); list.Add("苹果"); list.Add("香蕉"); return list; } } 在实际使用时可根据数据库中的字段排序 下面是jquery的代码： 复制代码 代码如下: //移动用户选择的角色 //setname:要移出数据的列表名称 getname:要移入数据的列表名称 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); }); } //重新排序 $.each($("#"+getname+" option"), function(id,own){ orderrole(getname); }); } //按首字母排序角色列表 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")); //循环列表中第一项值下所有元素 $.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(); } }); } }

　　推荐阅读

　　js最简单的拖拽效果实现代码

其实对于弹出层而言，拖拽最初的目的很单纯，就是为了通过拉开层，使被弹出层挡住的内容可见，（当然，后来关于拖拽的功能不断被优化，使得拖拽的应用有了别的意义，最典型的如igoogle的自定义首页，通过拖放的形式>>>详细阅读

本文标题：jquery控制listbox中项的移动并排序的实现代码

地址：http://www.17bianji.com/kaifa2/JS/25681.html

 1/2    1