Mega Code Archive

 
Categories / JavaScript DHTML / Scriptaculous
 

Horizontally Sortable

<html> <head> <title>Untitled Document</title> <script src="scriptaculous-js-1.8.2/lib/prototype.js" type="text/javascript"></script> <script src="scriptaculous-js-1.8.2/src/scriptaculous.js" type="text/javascript"></script> <script src="scriptaculous-js-1.8.2/src/unittest.js" type="text/javascript"></script> <script type="text/javascript"> Event.observe(window, 'load', function() {   Sortable.create('myList', { constraint: 'horizontal', overlap: 'horizontal' }); }); </script> <style> #myList {   list-style-type: none;   padding: 0; } #myList li {   float: left; cursor: move;   margin-left: 1em; padding: 0.2em; width: 10em;   border: 0.05em solid gray; background: #ddd;   text-align: center; } </style> </head> <body>     <ol id="myList">         <li>A</li>         <li>B</li>         <li>C</li>         <li>D</li>         <li>E</li>     </ol>      </body> </html>