mochikit_v14/examples/simple_dnd/dnd_full.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     #revertbox2 { position:absolute;top:40px;left:50px;z-index:1000;width:150px;height:150px;background:#bbf; }
  16   </style>
  17 </head>
  18 <body>
  19 <h1>script.aculo.us Drag and drop functional test file</h1>
  20
  21 <h2>Draggables/Droppables</h2>
  22
  23 <div id="revertbox1" class="box1" style="z-index:1000;width:150px;height:150px;background:#bbf;">
  24   <span class="handle1">drag here</span><br/>
  25   <input type="checkbox" id="shouldrevert1"/> Revert?
  26 </div>
  27
  28 <div id="revertbox2" class="box">
  29   <span id="handle2">drag here</span><br/>
  30   <input type="checkbox" id="shouldrevert2"/> Revert?
  31 </div>
  32
  33 <div id="xxxx">testtest</div>
  34
  35 <script type="text/javascript" language="javascript" charset="utf-8">
  36 // <![CDATA[
  37   new MochiKit.DragAndDrop.Draggable('revertbox1',{zindex:-5,handle:'handle1',revert:function(element){return ($('shouldrevert1').checked)}});
  38   new MochiKit.DragAndDrop.Draggable('revertbox2',{handle:'handle2',revert:function(element){return ($('shouldrevert2').checked)}});
  39   new MochiKit.DragAndDrop.Droppable('xxxx',{accept:['box1','box2'],onDrop:function(){alert('drop!')}});
  40 // ]]>
  41 </script>
  42
  43
  44
  45
  46 <ul id="thelist" style="padding: 10px; position: absolute; top:20px; left:200px;z-index:1000;">
  47 <li id="thelist_4">Hey there! I'm absolutely positioned</li>
  48 <li id="thelist_1">one<br/><form id="form1"><input type="checkbox" onclick="this.checked = !this.checked" value="x" name="x" id="xyz"/><input type="text" id="xxx"></input></form></li>
  49 <li id="thelist_2">two<br/><form id="form2"><input type="text" id="xyx"></input></form></li>
  50 <li id="thelist_3">three<br/><form id="form3"><input type="text" id="xu3"></input></form></li>
  51 </ul>
  52
  53 <ul id="thelist2" style="padding: 2px; background:red;">
  54 <li>Relatively here!</li>
  55 <li><input onclick="this.checked = !this.checked" name="x" id="x" type="checkbox"/>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 <li>one</li>
  77 <li>one</li>
  78 <li>one</li>
  79 <li>one</li>
  80 <li>one</li>
  81 <li>one</li>
  82 <li>one</li>
  83 <li>one</li>
  84 <li>one</li>
  85 <li>one</li>
  86 <li>one</li>
  87 <li>one</li>
  88 <li>one</li>
  89 <li>one</li>
  90 <li>one</li>
  91 <li>one</li>
  92 <li>one</li>
  93 <li>one</li>
  94 <li>one</li>
  95 <li>one</li>
  96 <li>one</li>
  97 <li>one</li>
  98 <li>one</li>
  99 <li>one</li>
 100 <li>one</li>
 101 <li>one</li>
 102 <li>one</li>
 103 <li>one</li>
 104 <li>one</li>
 105 </ul>
 106
 107
 108
 109 <script type="text/javascript" language="javascript" charset="utf-8">
 110 // <![CDATA[
 111 //  Sortable.create('thelist', {overlap: 'horizontal', constraint: false});
 112 MochiKit.Sortable.Sortable.create('thelist');
 113 MochiKit.Sortable.Sortable.create('thelist2');
 114
 115 // ]]>
 116 </script>
 117
 118 </body>
 119 </html>