<!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> <title>Untitled Page</title> <mce:style type="text/css"><!-- #sortable{margin:0;padding:0;width:40%;} #sortable li{margin:0 3px 3px 3px;padding:0.43m;padding-left:1.5em;font-size:14px;height:14px;letter-spacing:0.75em;text-align:center;background-color:Gray;} --></mce:style><style type="text/css" mce_bogus="1"> #sortable{margin:0;padding:0;width:40%;} #sortable li{margin:0 3px 3px 3px;padding:0.43m;padding-left:1.5em;font-size:14px;height:14px;letter-spacing:0.75em;text-align:center;background-color:Gray;} </style> <mce:script src="js/jquery-1.4.4.js" mce_src="js/jquery-1.4.4.js" type="text/javascript"></mce:script> <mce:script src="js/jquery-ui-1.8.9.custom.js" mce_src="js/jquery-ui-1.8.9.custom.js" type="text/javascript"></mce:script> <mce:script type="text/javascript"><!-- $(document).ready(function(){ $("#sortable").sortable(); }); function serilize(){ var xx = $("#sortable").sortable("toArray") var str=null; for(var index=0;index<xx.length;index++){ str =str+ index +xx[index] +"-"; } alert(str); } // --></mce:script> </head> <body> <ul id="sortable"> <li id="classli1" class="ui-state-default">我可以拖拽1</li> <li id="classli2" class="ui-state-default">我可以拖拽2</li> <li id="classli3" class="ui-state-default">我可以拖拽3</li> <li id="classli4" class="ui-state-default">我可以拖拽4</li> <li id="classli5" class="ui-state-default">我可以拖拽5</li> <li id="classli6" class="ui-state-default">我可以拖拽6</li> <li id="classli7" class="ui-state-default">我可以拖拽7</li> <li id="classli8" class="ui-state-default">我可以拖拽8</li> <li id="classli9" class="ui-state-default">我可以拖拽9</li> </ul> <button οnclick="serilize();">点我或者当前排序</button> </body> </html> 20110222: 也可以用foreach()遍历整个数组,但是要提示的是,数组的长度会比<li>tab 个数多两个,我想是因为<ul>。