mochikit_v14/examples/dnd_sortable/index.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   2 <html>
   3     <head>
   4         <title>Drag and Drop Sortable Tables with MochiKit</title>
   5         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   6         <link href="dnd_sortable.css" rel="stylesheet" type="text/css" />
   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     </head>
  13     <body>
  14         <h1>
  15             Drag and Drop Sortable Tables with MochiKit
  16         </h1>
  17         <p>
  18             View Source: [
  19                 <a href="index.html" class="view-source">index.html</a>
  20             ]
  21         </p>
  22         <ul id="dnd_sortable">
  23             <li>mochibot.com</li>
  24             <li>pythonmac.org</li>
  25             <li>undefined.org</li>
  26             <li>python.org</li>
  27         </ul>
  28         <p>
  29             <a onclick="validate()">Validate order choice</a>
  30         </p>
  31 <script type="text/javascript">
  32 MochiKit.Sortable.Sortable.create('dnd_sortable');
  33
  34 validate = function () {
  35     var children = MochiKit.DOM.getElement("dnd_sortable").childNodes;
  36     var res = '';
  37     for (var i = 0; i < children.length; i++) {
  38         res += children[i].firstChild.nodeValue + ' ';
  39     }
  40     alert(res);
  41 }
  42 </script>
  43 <p>
  44     <ul>
  45         <li><a href="sortable_test.html">Test 1</a></li>
  46         <li><a href="sortable2_test.html">Test 2</a></li>
  47         <li><a href="sortable3_test.html">Test 3</a></li>
  48         <li><a href="sortable4_test.html">Test 4</a></li>
  49         <li><a href="sortable5_test.html">Test 5</a></li>
  50         <li><a href="sortable_tree_test.html">Test tree</a></li>
  51     </ul>
  52 </p>
  53     </body>
  54 </html>