src/third_party/webdriver/test_data/droppableItems.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3 <head>
   4   <meta charset="UTF-8" />
   5   <title>jQuery UI Droppable - Default Demo</title>
   6     <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.10.custom.css" rel="stylesheet" />
   7     <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
   8     <script type="text/javascript" src="js/jquery-ui-1.8.10.custom.min.js"></script>
   9   <style type="text/css">
  10   #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
  11   #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
  12   </style>
  13   <script type="text/javascript">
  14   $(function() {
  15     $("#draggable").draggable();
  16     $("#droppable").droppable({
  17       drop: function(event, ui) {
  18         $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
  19       }
  20   });
  21
  22         var report_event = function(report_text) {
  23           var reportElement = $("#drop_reports");
  24           var origText = reportElement.text();
  25           reportElement.text(origText + " " + report_text);
  26         }
  27
  28         $('body').mousedown(function() {
  29             report_event('down');
  30         });
  31
  32         $('body').mousemove(function() {
  33             report_event('move');
  34         });
  35
  36         $('body').mouseup(function() {
  37             report_event('up');
  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>Drop here</p>
  51 </div>
  52
  53 <div class="test-data">
  54   <p id="drop_reports">start</p>
  55 </div>
  56
  57 </div><!-- End demo -->
  58
  59 <div class="demo-description">
  60
  61 <p>Taken from the JQuery demo.</p>
  62
  63 </div><!-- End demo-description -->
  64 </body>
  65 </html>