PHPXRef 0.7 : Drupal 6 (gatewave) : /sites/all/modules/jquery_ui/jquery.ui.old/tests/visual/draggable.scroll.html source

[Summary view] [Print] [Text view]
   1  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   2  <html>
   3  <head>
   4  <script src="../../jquery-1.2.6.js" type="text/javascript" charset="utf-8"></script>
   5  <script src="../../ui/ui.core.js" type="text/javascript" charset="utf-8"></script>
   6  <script src="../../ui/ui.draggable.js" type="text/javascript" charset="utf-8"></script>
   7  <script src="../../ui/ui.sortable.js" type="text/javascript" charset="utf-8"></script>
   8  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   9  <title>jQuery UI Draggable Visual Test</title>
  10  </head>
  11  
  12  <body>
  13   
  14  <style>
  15      
  16      .draggable {
  17          width:100px;
  18          height:100px;
  19          background-color:green;
  20          color: #fff;
  21          padding: 5px;
  22          margin: 5px;
  23          border: 5px solid red;
  24      }
  25      
  26      .container {
  27          width: 500px;
  28          height: 200px;
  29          border: 5px solid black;
  30          padding: 5px;
  31          margin: 5px;
  32          float: left;
  33          background: #fff;
  34      }
  35      
  36      .enlarge {
  37          width: 1000px;
  38          height: 1000px;
  39      }
  40  
  41  
  42  </style>
  43  
  44  
  45  
  46  <script language="JavaScript">
  47  <!--
  48      $(function(){
  49          $(".draggable").draggable({
  50              //helper: 'clone',

  51              drag: function(e, ui) {
  52                  //console.log(ui.helper.offset());

  53              },
  54              scroll:true
  55              //containment:"parent"

  56          });
  57      });
  58  //-->

  59  </script>
  60  
  61  
  62  
  63  <div class='container' style="overflow:scroll;">
  64      <div class='draggable'>(Broken in IE)</div>
  65      <div class='enlarge'></div>
  66  </div>
  67  
  68  <div class='container' style="overflow:scroll; position: relative;">
  69      <div class='draggable'></div>
  70      <div class='enlarge'></div>
  71  </div>
  72  
  73  <div class='container' style="overflow:scroll;">
  74      <div class='draggable' style='position: absolute;top:0px;left:1000px;'>Absolute</div>
  75      <div class='enlarge'></div>
  76  </div>
  77  
  78  <div class='container' style="overflow:scroll; position: relative;">
  79      <div class='draggable' style='position: absolute;'>Absolute</div>
  80      <div class='enlarge'></div>
  81  </div>
  82  
  83  <div class='container' style="overflow:scroll;">
  84      <div class='draggable' style='position: fixed;'>Fixed</div>
  85      <div class='enlarge'></div>
  86  </div>
  87  
  88  <div class='container' style="overflow:scroll; position: relative;">
  89      <div class='draggable' style='position: fixed;'>Fixed</div>
  90      <div class='enlarge'></div>
  91  </div>
  92  
  93  <!-- Relative draggable with two containers -->
  94  
  95  <div class='container' style="overflow:scroll; position: relative;">
  96      <div class='container'>
  97          <div class='draggable'>Relative</div>
  98          <div class='enlarge'></div>
  99      </div>
 100  
 101  </div>
 102  
 103  <div class='container' style="overflow:scroll; position: relative;">
 104      <div class='container' style='position: relative;'>
 105          <div class='draggable'>Relative</div>
 106          <div class='enlarge'></div>
 107      </div>
 108  </div>
 109  
 110  <div class='container' style="position: relative;">
 111      <div class='container' style='overflow: scroll;'>
 112          <div class='draggable'>Relative (Broken in IE)</div>
 113          <div class='enlarge'></div>
 114      </div>
 115  
 116  </div>
 117  
 118  <div class='container' style="position: relative;">
 119      <div class='container' style='position: relative; overflow: scroll;'>
 120          <div class='draggable'>Relative</div>
 121          <div class='enlarge'></div>
 122      </div>
 123  </div>
 124  
 125  <!-- Absolute draggable with two containers -->
 126  
 127  <div class='container' style="overflow:scroll; position: relative;">
 128      <div class='container'>
 129          <div class='draggable' style='position: absolute;'>Absolute</div>
 130          <div class='enlarge'></div>
 131      </div>
 132  
 133  </div>
 134  
 135  <div class='container' style="overflow:scroll; position: relative;">
 136      <div class='container' style='position: relative;'>
 137          <div class='draggable' style='position: absolute;'>Absolute</div>
 138          <div class='enlarge'></div>
 139      </div>
 140  </div>
 141  
 142  <div class='container' style="position: relative;">
 143      <div class='container' style='overflow: scroll;'>
 144          <div class='draggable' style='position: absolute;top:0px;left:0px;'>Absolute</div>
 145          <div class='enlarge'></div>
 146      </div>
 147  
 148  </div>
 149  
 150  <div class='container' style="position: relative;">
 151      <div class='container' style='position: relative; overflow: scroll;'>
 152          <div class='draggable' style='position: absolute;'>Absolute</div>
 153          <div class='enlarge'></div>
 154      </div>
 155  </div>
 156      
 157  </body>
 158  </html>
PHP Cross Reference of Drupal 6 (gatewave)

/sites/all/modules/jquery_ui/jquery.ui.old/tests/visual/ -> draggable.scroll.html (source)
