PHPXRef 0.7 : Drupal 6 (gatewave) : /sites/all/modules/jquery_ui/jquery.ui/demos/draggable/cursor-style.html source

[Summary view] [Print] [Text view]

   1  <!doctype html>
   2  <html lang="en">
   3  <head>
   4      <title>jQuery UI Draggable - Cursor style</title>
   5      <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
   6      <script type="text/javascript" src="../../jquery-1.3.2.js"></script>
   7      <script type="text/javascript" src="../../ui/ui.core.js"></script>
   8      <script type="text/javascript" src="../../ui/ui.draggable.js"></script>
   9      <link type="text/css" href="../demos.css" rel="stylesheet" />
  10      <style type="text/css">
  11      #draggable, #draggable2, #draggable3 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }

  12      </style>
  13      <script type="text/javascript">
  14      $(function() {
  15          $("#draggable").draggable({ cursorAt: { cursor: 'move', top: 56, left: 56 } });
  16          $("#draggable2").draggable({ cursorAt: { cursor: 'crosshair', top: -5, left: -5 } });
  17          $("#draggable3").draggable({ cursorAt: { bottom: 0 } });
  18      });
  19      </script>
  20  </head>
  21  <body>
  22  <div class="demo">
  23      
  24  <div id="draggable" class="ui-widget-content">
  25      <p>I will always stick to the center (relative to the mouse)</p>
  26  </div>
  27  
  28  <div id="draggable2" class="ui-widget-content">
  29      <p>My cursor is at left -5 and top -5</p>
  30  </div>
  31  
  32  <div id="draggable3" class="ui-widget-content">
  33      <p>My cursor position is only controlled for the 'bottom' value</p>
  34  </div>
  35  
  36  </div><!-- End demo -->
  37  
  38  <div class="demo-description">
  39  
  40  <p>
  41  Position the cursor while dragging the object. By default the cursor appears in the center of the dragged object; use the <code>cursorAt</code> option to specify another location relative to the draggable (specify a pixel value from the top, right, bottom, and/or left).  Customize the cursor's appearance by supplying the <code>cursor</code> option with a valid CSS cursor value: default, move, pointer, crosshair, etc.
  42  </p>
  43  
  44  </div><!-- End demo-description -->
  45  </body>
  46  </html>

PHP Cross Reference of Drupal 6 (gatewave)

/sites/all/modules/jquery_ui/jquery.ui/demos/draggable/ -> cursor-style.html (source)