案例：jQuery UI案例     状态：可编辑再运行    进入竖版
 运行结果　
AخA
    <li id="event-drag" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-arrow-4"></span>"drag" 被调用 <span class="count">0</span>x</li>
 
1
<!doctype html>
2
<html lang="en">
3
<head>
4
  <meta charset="utf-8">
5
  <title>jQuery UI 拖动（Draggable） - 事件</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
  #draggable { width: 16em; padding: 0 1em; }
12
  #draggable ul li { margin: 1em 0; padding: 0.5em 0; } * html #draggable ul li { height: 1%; }
13
  #draggable ul li span.ui-icon { float: left; }
14
  #draggable ul li span.count { font-weight: bold; }
15
  </style>
16
  <script>
17
  $(function() {
18
    var $start_counter = $( "#event-start" ),
19
      $drag_counter = $( "#event-drag" ),
20
      $stop_counter = $( "#event-stop" ),
21
      counts = [ 0, 0, 0 ];
22
23
    $( "#draggable" ).draggable({
24
      start: function() {
25
        counts[ 0 ]++;
26
        updateCounterStatus( $start_counter, counts[ 0 ] );
27
      },
28
      drag: function() {
29
        counts[ 1 ]++;
30
        updateCounterStatus( $drag_counter, counts[ 1 ] );
31
      },
32
      stop: function() {
33
        counts[ 2 ]++;
34
        updateCounterStatus( $stop_counter, counts[ 2 ] );
35
      }
36
    });
37
38
    function updateCounterStatus( $event_counter, new_count ) {
39
      // 首先更新视觉状态...
40
      if ( !$event_counter.hasClass( "ui-state-hover" ) ) {
41
        $event_counter.addClass( "ui-state-hover" )
42
          .siblings().removeClass( "ui-state-hover" );
43
      }
44
      // ...然后更新数字
45
      $( "span.count", $event_counter ).text( new_count );
46
    }
47
  });
48
  </script>