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

[Summary view] [Print] [Text view]
   1  <!doctype html>
   2  <html lang="en">
   3  <head>
   4      <title>jQuery UI Droppable - Visual feedback</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, #draggable2 { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }

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

  14      </style>
  15      <script type="text/javascript">
  16      $(function() {
  17          $("#draggable").draggable();
  18          $("#droppable").droppable({
  19              hoverClass: 'ui-state-active',
  20              drop: function(event, ui) {
  21                  $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
  22              }
  23          });
  24          
  25          $("#draggable2").draggable();
  26          $("#droppable2").droppable({
  27              accept: "#draggable2",
  28              activeClass: 'ui-state-hover',
  29              drop: function(event, ui) {
  30                  $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
  31              }
  32          });
  33  
  34      });
  35      </script>
  36  </head>
  37  <body>
  38  <div class="demo">
  39  
  40  <h3 class="docs">Feedback on hover:</h3>
  41      
  42  <div id="draggable" class="ui-widget-content">
  43      <p>Drag me to my target</p>
  44  </div>
  45  
  46  <div id="droppable" class="ui-widget-header">
  47      <p>Drop here</p>
  48  </div>
  49  
  50  <h3 class="docs">Feedback on activating draggable:</h3>
  51  
  52  <div id="draggable2" class="ui-widget-content">
  53      <p>Drag me to my target</p>
  54  </div>
  55  
  56  <div id="droppable2" class="ui-widget-header">
  57      <p>Drop here</p>
  58  </div>
  59  
  60  <!-- add active class demo -->
  61  
  62  </div><!-- End demo -->
  63  
  64  <div class="demo-description">
  65  
  66  <p>Change the droppable's appearance on hover, or when the droppable is active (an acceptable draggable is dropped on it).  Use the <code>hoverClass</code> or <code>activeClass</code> options to specify respective classes.</p>
  67  
  68  </div><!-- End demo-description -->
  69  </body>
  70  </html>
PHP Cross Reference of Drupal 6 (yi-drupal)

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