third-party/jquery-ui-1.10.2/demos/draggable/events.html

   1 <!doctype html>
   2 <html lang="en">
   3 <head>
   4         <meta charset="utf-8">
   5         <title>jQuery UI Draggable - Events</title>
   6         <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
   7         <script src="../../jquery-1.9.1.js"></script>
   8         <script src="../../ui/jquery.ui.core.js"></script>
   9         <script src="../../ui/jquery.ui.widget.js"></script>
  10         <script src="../../ui/jquery.ui.mouse.js"></script>
  11         <script src="../../ui/jquery.ui.draggable.js"></script>
  12         <link rel="stylesheet" href="../demos.css">
  13         <style>
  14         #draggable { width: 16em; padding: 0 1em; }
  15         #draggable ul li { margin: 1em 0; padding: 0.5em 0; } * html #draggable ul li { height: 1%; }
  16         #draggable ul li span.ui-icon { float: left; }
  17         #draggable ul li span.count { font-weight: bold; }
  18         </style>
  19         <script>
  20         $(function() {
  21                 var $start_counter = $( "#event-start" ),
  22                         $drag_counter = $( "#event-drag" ),
  23                         $stop_counter = $( "#event-stop" ),
  24                         counts = [ 0, 0, 0 ];
  25
  26                 $( "#draggable" ).draggable({
  27                         start: function() {
  28                                 counts[ 0 ]++;
  29                                 updateCounterStatus( $start_counter, counts[ 0 ] );
  30                         },
  31                         drag: function() {
  32                                 counts[ 1 ]++;
  33                                 updateCounterStatus( $drag_counter, counts[ 1 ] );
  34                         },
  35                         stop: function() {
  36                                 counts[ 2 ]++;
  37                                 updateCounterStatus( $stop_counter, counts[ 2 ] );
  38                         }
  39                 });
  40
  41                 function updateCounterStatus( $event_counter, new_count ) {
  42                         // first update the status visually...
  43                         if ( !$event_counter.hasClass( "ui-state-hover" ) ) {
  44                                 $event_counter.addClass( "ui-state-hover" )
  45                                         .siblings().removeClass( "ui-state-hover" );
  46                         }
  47                         // ...then update the numbers
  48                         $( "span.count", $event_counter ).text( new_count );
  49                 }
  50         });
  51         </script>
  52 </head>
  53 <body>
  54
  55 <div id="draggable" class="ui-widget ui-widget-content">
  56
  57         <p>Drag me to trigger the chain of events.</p>
  58
  59         <ul class="ui-helper-reset">
  60                 <li id="event-start" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-play"></span>"start" invoked <span class="count">0</span>x</li>
  61                 <li id="event-drag" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-arrow-4"></span>"drag" invoked <span class="count">0</span>x</li>
  62                 <li id="event-stop" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-stop"></span>"stop" invoked <span class="count">0</span>x</li>
  63         </ul>
  64 </div>
  65
  66 <div class="demo-description">
  67 <p>Layer functionality onto the draggable using the <code>start</code>, <code>drag</code>, and <code>stop</code> events.  Start is fired at the start of the drag; drag during the drag; and stop when dragging stops.</p>
  68 </div>
  69 </body>
  70 </html>