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

[Summary view] [Print] [Text view]

   1  <!doctype html>
   2  <html lang="en">
   3  <head>
   4      <title>jQuery UI Draggable - Handles</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 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }

  12      #draggable p { cursor: move; }

  13      </style>
  14      <script type="text/javascript">
  15      $(function() {
  16          $("#draggable").draggable({ handle: 'p' });
  17          $("#draggable2").draggable({ cancel: "p.ui-widget-header" });
  18          $("div, p").disableSelection();
  19      });
  20      </script>
  21  </head>
  22  <body>
  23  <div class="demo">
  24      
  25  <div id="draggable" class="ui-widget-content">
  26      <p class="ui-widget-header">I can be dragged only by this handle</p>
  27  </div>
  28  
  29  <div id="draggable2" class="ui-widget-content">
  30      <p>You can drag me around&hellip;</p>
  31      <p class="ui-widget-header">&hellip;but you can't drag me by this handle.</p>
  32  </div>
  33  
  34  <!-- ADD CANCEL DEMO -->
  35  
  36  </div><!-- End demo -->
  37  
  38  <div class="demo-description">
  39  
  40  <p>Allow dragging only when the cursor is over a specific part of the draggable.  Use the <code>handle</code> option to specify the jQuery selector of an element (or group of elements) used to drag the object.</p>
  41  <p>Or prevent dragging when the cursor is over a specific element (or group of elements) within the draggable.  Use the <code>cancel</code> option to specify a jQuery selector over which to "cancel" draggable functionality.</p>
  42  
  43  </div><!-- End demo-description -->
  44  </body>
  45  </html>

PHP Cross Reference of Drupal 6 (gatewave)

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