02-元素调序的基本用法

12.1　元素调序的基本用法

假设我们现在想用HTML代码来显示一个图12-1所示的被移动的段落。此例中有5个段落，其中第一段被鼠标选中并移出了列表，然后插入到了一个新的位置。

在jQuery UI中，可调序的元素群需要统一放入一个父容器元素中（ <div> 或是其他元素）。此容器元素的所有后代元素都是彼此可调换顺序的。

要将HTML页面中的某些元素指定为可以用鼠标调换顺序的，只需在 <script> 标签中声明使用jQuery UI的 sortable() 方法管理其外层的 <div> 元素即可：

<script src = jquery.js></script> 
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script> 
<link rel=stylesheet type=text/css 
　　　 href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css /> 
<div id=div1> 
　<p> Paragraph 1 </p> 
　<p> Paragraph 2 </p> 
　<p> Paragraph 3 </p> 
　<p> Paragraph 4 </p> 
　<p> Paragraph 5 </p> 
</div> 
<script> 
$("#div1").sortable (); 
</script>