PHPXRef 0.7 : Drupal 6 (yi-drupal) : /sites/all/libraries/jquery.ui/demos/droppable/propagation.html source

[Summary view] [Print] [Text view]
   1  <!doctype html>
   2  <html lang="en">
   3  <head>
   4      <title>jQuery UI Droppable - Prevent propagation</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      <script type="text/javascript" src="../../ui/ui.droppable.js"></script>
  10      <link type="text/css" href="../demos.css" rel="stylesheet" />
  11      <style type="text/css">
  12      #draggable { width: 100px; height: 40px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }

  13      #droppable, #droppable2 { width: 230px; height: 120px; padding: 0.5em; float: left; margin: 10px; }

  14      #droppable-inner, #droppable2-inner { width: 170px; height: 60px; padding: 0.5em; float: left; margin: 10px; }

  15      </style>
  16      <script type="text/javascript">
  17      $(function() {
  18  
  19          $("#draggable").draggable();
  20  
  21          $("#droppable, #droppable-inner").droppable({
  22              activeClass: 'ui-state-hover',
  23              hoverClass: 'ui-state-active',
  24              drop: function(event, ui) {
  25                  $(this).addClass('ui-state-highlight').find('> p').html('Dropped!');
  26                  return false;
  27              }
  28          });
  29  
  30          $("#droppable2, #droppable2-inner").droppable({
  31              greedy: true,
  32              activeClass: 'ui-state-hover',
  33              hoverClass: 'ui-state-active',
  34              drop: function(event, ui) {
  35                  $(this).addClass('ui-state-highlight').find('> p').html('Dropped!');
  36              }
  37          });
  38  
  39      });
  40      </script>
  41  </head>
  42  <body>
  43  <div class="demo">
  44      
  45  <div id="draggable" class="ui-widget-content">
  46      <p>Drag me to my target</p>
  47  </div>
  48  
  49  <div id="droppable" class="ui-widget-header">
  50      <p>Outer droppable</p>
  51      <div id="droppable-inner" class="ui-widget-header">
  52          <p>Inner droppable (not greedy)</p>
  53      </div>
  54  </div>
  55  
  56  <div id="droppable2" class="ui-widget-header">
  57      <p>Outer droppable</p>
  58      <div id="droppable2-inner" class="ui-widget-header">
  59          <p>Inner droppable (greedy)</p>
  60      </div>
  61  </div>
  62  
  63  </div><!-- End demo -->
  64  
  65  <div class="demo-description">
  66  
  67  <p>When working with nested droppables &#8212; for example, you may have an editable directory structure displayed as a tree, with folder and document nodes &#8212; the <code>greedy</code> option set to true prevents event propagation when a draggable is dropped on a child node (droppable).</p>
  68  
  69  </div><!-- End demo-description -->
  70  </body>
  71  </html>
PHP Cross Reference of Drupal 6 (yi-drupal)

/sites/all/libraries/jquery.ui/demos/droppable/ -> propagation.html (source)
