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

[Summary view] [Print] [Text view]
   1  <!doctype html>
   2  <html lang="en">
   3  <head>
   4      <title>jQuery UI Draggable - Snap to element or grid</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 { width: 90px; height: 80px; padding: 5px; float: left; margin: 0 10px 10px 0; font-size: .9em; }
  12      .ui-widget-header p, .ui-widget-content p { margin: 0; }
  13      #snaptarget { height: 140px; }

  14      </style>
  15      <script type="text/javascript">
  16      $(function() {
  17          $("#draggable").draggable({ snap: true });
  18          $("#draggable2").draggable({ snap: '.ui-widget-header' });
  19          $("#draggable3").draggable({ snap: '.ui-widget-header', snapMode: 'outer' });
  20          $("#draggable4").draggable({ grid: [20,20] });
  21          $("#draggable5").draggable({ grid: [80, 80] });
  22      });
  23      </script>
  24  </head>
  25  <body>
  26  <div class="demo">
  27      
  28  <div id="snaptarget" class="ui-widget-header">
  29      <p>I'm a snap target</p>
  30  </div>
  31  
  32  <br clear="both" />
  33  
  34  <div id="draggable" class="draggable ui-widget-content">
  35      <p>Default (snap: true), snaps to all other draggable elements</p>
  36  </div>
  37  
  38  <div id="draggable2" class="draggable ui-widget-content">
  39      <p>I only snap to the big box</p>
  40  </div>
  41  
  42  <div id="draggable3" class="draggable ui-widget-content">
  43      <p>I only snap to the outer edges of the big box</p>
  44  </div>
  45  
  46  <div id="draggable4" class="draggable ui-widget-content">
  47      <p>I snap to a 20 x 20 grid</p>
  48  </div>
  49  
  50  <div id="draggable5" class="draggable ui-widget-content">
  51      <p>I snap to a 80 x 80 grid</p>
  52  </div>
  53  
  54  </div><!-- End demo -->
  55  
  56  <div class="demo-description">
  57  
  58  <p>Snap the draggable to the inner or outer boundaries of a DOM element.  Use the <code>snap</code>, <code>snapMode</code> (inner, outer, both), and <code>snapTolerance</code> (distance in pixels the draggable must be from the element when snapping is invoked) options. </p>
  59  
  60  <p>Or snap the draggable to a grid.  Set the dimensions of grid cells (height and width in pixels) with the <code>grid</code> option.</p>
  61  
  62  </div><!-- End demo-description -->
  63  
  64  
  65  
  66  </body>
  67  </html>
PHP Cross Reference of Drupal 6 (gatewave)

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