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

[Summary view] [Print] [Text view]
   1  <!doctype html>
   2  <html lang="en">
   3  <head>
   4      <title>Draggable Scroll Tests</title>
   5      <link rel="stylesheet" href="../all.css" type="text/css">
   6      <link rel="stylesheet" href="../../../themes/base/ui.all.css" type="text/css">
   7      <script type="text/javascript" src="../../../jquery-1.3.2.js"></script>
   8      <script type="text/javascript" src="../../../ui/ui.core.js"></script>
   9      <script type="text/javascript" src="../../../ui/ui.draggable.js"></script>
  10      <script type="text/javascript" src="../../../ui/ui.sortable.js"></script>
  11      <style type="text/css">
  12          .draggable {
  13              width:100px;
  14              height:100px;
  15              background-color:green;
  16              color: #fff;
  17              padding: 5px;
  18              margin: 5px;
  19              border: 5px solid red;
  20          }
  21          .container {
  22              width: 500px;
  23              height: 200px;
  24              border: 5px solid black;
  25              padding: 5px;
  26              margin: 5px;
  27              float: left;
  28              background: #fff;
  29          }
  30          .enlarge {
  31              width: 1000px;
  32              height: 1000px;
  33          }
  34      </style>
  35      <script type="text/javascript">
  36      $(function(){
  37          $(".draggable").draggable({
  38              //helper: 'clone',

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

  41              },
  42              scroll:true
  43              //containment:"parent"

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

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