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

[Summary view] [Print] [Text view]

   1  <!doctype html>
   2  <html lang="en">
   3  <head>
   4      <title>jQuery UI Droppable - Accept Demo</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      #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }

  13      #draggable, #draggable-nonvalid { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }

  14      </style>
  15      <script type="text/javascript">
  16      $(function() {
  17  
  18          $("#draggable, #draggable-nonvalid").draggable();
  19  
  20          $("#droppable").droppable({
  21              accept: '#draggable',
  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              }
  27          });
  28  
  29      });
  30      </script>
  31  </head>
  32  <body>
  33  <div class="demo">
  34      
  35  <div id="draggable-nonvalid" class="ui-widget-content">
  36      <p>I'm draggable but can't be dropped</p>
  37  </div>
  38  
  39  <div id="draggable" class="ui-widget-content">
  40      <p>Drag me to my target</p>
  41  </div>
  42  
  43  <div id="droppable" class="ui-widget-header">
  44      <p>accept: '#draggable'</p>
  45  </div>
  46  
  47  </div><!-- End demo -->
  48  
  49  <div class="demo-description">
  50  
  51  <p>Specify using the <code>accept</code> option which element (or group of elements) is accepted by the target droppable.</p>
  52  
  53  </div><!-- End demo-description -->
  54  </body>
  55  </html>

PHP Cross Reference of Drupal 6 (yi-drupal)

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