mochikit_v14/examples/simple_dnd/dnd_scroll.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   2         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   4 <head>
   5   <title>script.aculo.us Drag and drop functional test file</title>
   6   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   7     <script type="text/javascript" src="../../MochiKit/MochiKit.js"></script>
   8     <script type="text/javascript" src="../../MochiKit/Position.js"></script>
   9     <script type="text/javascript" src="../../MochiKit/Visual.js"></script>
  10     <script type="text/javascript" src="../../MochiKit/DragAndDrop.js"></script>
  11     <script type="text/javascript" src="../../MochiKit/Sortable.js"></script>
  12   <style type="text/css" media="screen">
  13     #thelist li { background: green; margin:5px; padding: 30px; }
  14     #thelist2 li { background: #ffb; margin:2px; padding: 2px; }
  15   </style>
  16 </head>
  17 <body>
  18 <h1>script.aculo.us Drag and drop functional test file</h1>
  19
  20 <h2>Draggables/Droppables</h2>
  21
  22 <div style="width:400px;height:400px;overflow:scroll;position:relative;" id="scroll-container">
  23
  24 <ul id="thelist2" style="padding: 2px; background:red;">
  25 <li>Relatively here!</li>
  26 <li><input onclick="this.checked = !this.checked" name="x" id="x" type="checkbox"/>one</li>
  27 <li>one</li>
  28 <li>one</li>
  29 <li>one</li>
  30 <li>one</li>
  31 <li>one</li>
  32 <li>one</li>
  33 <li>one</li>
  34 <li>one</li>
  35 <li>one</li>
  36 <li>one</li>
  37 <li>one</li>
  38 <li>one</li>
  39 <li>one</li>
  40 <li>one</li>
  41 <li>one</li>
  42 <li>one</li>
  43 <li>one</li>
  44 <li>one</li>
  45 <li>one</li>
  46 <li>one</li>
  47 <li>one</li>
  48 <li>one</li>
  49 <li>one</li>
  50 <li>one</li>
  51 <li>one</li>
  52 <li>one</li>
  53 <li>one</li>
  54 <li>one</li>
  55 <li>one</li>
  56 <li>one</li>
  57 <li>one</li>
  58 <li>one</li>
  59 <li>one</li>
  60 <li>one</li>
  61 <li>one</li>
  62 <li>one</li>
  63 <li>one</li>
  64 <li>one</li>
  65 <li>one</li>
  66 <li>one</li>
  67 <li>one</li>
  68 <li>one</li>
  69 <li>one</li>
  70 <li>one</li>
  71 <li>one</li>
  72 <li>one</li>
  73 <li>one</li>
  74 <li>one</li>
  75 <li>one</li>
  76 </ul>
  77
  78 </div>
  79
  80 <pre id="debug"></pre>
  81
  82 <script type="text/javascript" language="javascript" charset="utf-8">
  83 // <![CDATA[
  84 //  Sortable.create('thelist', {overlap: 'horizontal', constraint: false});
  85 MochiKit.Position.includeScrollOffsets = true;
  86 MochiKit.Sortable.Sortable.create('thelist2', {scroll: 'scroll-container'});
  87
  88 // ]]>
  89 </script>
  90 </body>
  91 </html>