$( "#sortable" ).sortable({ stop: function(event, ui) { $("#sortable li").each( function(index){ $.ajax({ type:'POST', url:'filename.php', data:'method=updateposition&id='+$(this).attr('id'))+'&positions='+index, success: function(xml){ // Success } }); } ); } });
要保存可排序列表中项的位置，需要利用一个事件来确定排序项的时间。您可以利用多种可排序事件，但这个示例需要 stop 事件，因为只有该事件能够在所有可排序元素完成排序后触发。这一点非常重要，因为您需要在尝试保存位置之前，确保所有元素都处于新位置。触发 stop 事件之后，您要遍历各列表项，以获取其在列表中的索引，随后检索各项的 ID，再利用 Ajax 将这些值发送到一个 PHP 文件，这会将结果保存到数据库，以便在稍后您返回该页面时排序元素。
所用的 Sortable 插件还提供了许多可实现其他定制的选项，例如：
----定义一个占位符类，设定拖动一项时占位符元素的样式
----连接列表，使元素可以拖放到相同 Web 页面中的另一个可排序列表
----在网格中显示和限制可排序元素
----创建多栏界面，支持在各栏间拖动和排序元素
清单 4 中的示例展示了如何创建包含拖放式元素的三栏界面。这三个栏使用 CSS 中三个彼此相邻的 <div> 元素表示。为使 Sortable插件处理分栏结构，只需使用 connectWith 选项，并将其值设置为各分栏元素上使用的 column 类。选项 connectWith 允许使用多栏界面，在各栏间拖动和排序元素。
清单 4. 三栏拖放式界面
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> Creating Customizable Web Interfaces with the jQuery UI and Ajax </title> <link type="text/css" href="https://www.jb51.net/css/ui-lightness/jquery-ui-1.8.6.custom.css" /> <link type="text/css" href="https://www.jb51.net/css/custom.css" /> <script type="text/javascript" src="https://www.jb51.net/js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/js/jquery-ui-1.8.6.custom.min.js"> </script> <script type="text/javascript"> $(function(){ $( ".column" ).sortable({ connectWith:".column" }); $( "#sortable" ).sortable(); }); </script> </head> <body> <h1> Creating Customizable Web Interfaces with the jQuery UI and Ajax </h1> <ul> <li> <div> <div>ToDo List</div> <div> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> <li>Item 7</li> </ul> </div> </div> <div> <div>Header</div> <div>content</div> </div> </li> <li> <div> <div>Header</div> <div>content</div> </div> </li> <li> <div> <div>Header</div> <div>content</div> </div> <div> <div>Header</div> <div>content</div> </div> </li> </ul> </body> </html>
为保持这些元素的样式与您选择的 jQuery UI 主题一致，您要使用某些 CSS 类将各元素定义为包含标头和内容的 portlet。 这些 CSS 类构成了 jQuery UI CSS 框架，允许您轻松设定 UI 元素的主题。
jQuery UI CSS 框架
至此为止，您已经用到了 jQuery UI CSS 框架中的一些类。在这一节中，我们将进一步探索，学习如何利用这些类让用户能动态更改其个性化仪表板页面的外观。该框架包含许多类，涵盖了常见的 UI 元素。应用这些类时，它们会根据您选择的主题自动为您的小部件设定主题。可用类的类别包括布局帮助元素、小部件容器、交互状态、交互线索、图标（包括状态、图像和图标类型）以及其他可视化元素，例如圆角帮助元素、覆盖和阴影。
使用该框架中的类时，可以轻松在可用主题间切换。清单 5 展示了利用 ThemeRoller 提供的主题切换器工具能多么轻松地完成此过程。
清单 5. 用于为示例 Web 页面上的定制 portlet 添加主题切换器的 JavaScript 和 HTML