案例:jQuery UI案例     状态:可编辑再运行    进入横版
AخA
      <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
 
1
<!doctype html>
2
<html lang="en">
3
<head>
4
  <meta charset="utf-8">
5
  <title>jQuery UI 折叠面板(Accordion) - 排序(Sortable)</title>
6
  <link rel="stylesheet" href="/css/jqu1.10.4/jquery-ui.min.css">
7
  <script src="/js/jqu/jquery.min1.10.2.js"></script>
8
  <script src="/js/jqu/jquery-ui.min1.10.4.js"></script>
9
  <link rel="stylesheet" href="jqueryui/style.css">
10
  <style>
11
  /* 当排序时,IE 存在布局问题(查看 #5413) */
12
  .group { zoom: 1 }
13
  </style>
14
  <script>
15
  $(function() {
16
    $( "#accordion" )
17
      .accordion({
18
        header: "> div > h3"
19
      })
20
      .sortable({
21
        axis: "y",
22
        handle: "h3",
23
        stop: function( event, ui ) {
24
          // 当排序时,IE 不能注册 blur,所以触发 focusout 处理程序来移除 .ui-state-focus

 运行结果 
 北美留学生论坛