案例：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
25
          ui.item.children( "h3" ).triggerHandler( "focusout" );
26
        }
27
      });
28
  });
29
  </script>
30
</head>
31
<body>
32
33
<div id="accordion">
34
  <div class="group">
35
    <h3>部分 1</h3>
36
    <div>
37
      <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
38
    </div>
39
  </div>
40
  <div class="group">
41
    <h3>部分 2</h3>
42
    <div>
43
      <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
44
    </div>
45
  </div>
46
  <div class="group">
47
    <h3>部分 3</h3>
48
    <div>