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>
Related examples in the same category