| 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> |