When we create GUI to our web-based application, we would like to have the menu where items can be sorted and arranged freely according to our priorities. For example we would like to freely move "Users" above "Products".
If you don't like babbling:: demo and sources.
But how? What do we need?
We need Prototype (download it here) and sciptaculous (click).
Create an html file and past code presented below:
<html>
<head>
<title>Droppable</title>
<script src="prototype.js" type="text/javascript"></script>
<script src="effects.js" type="text/javascript"></script>
<script src="dragdrop.js" type="text/javascript"></script>
</head>
<body>
<ul id="sort_list" class="sortable">
<li id="sort_list_0">One</li>
<li id="sort_list_1">Two</li>
<li id="sort_list_2">Three</li>
<li id="sort_list_3">Four</li>
<li id="sort_list_4">Five</li>
<li id="sort_list_5">Six</li>
</ul>
<ul id="modules_menu" class="sortable">
<li id="modules_menu_0">One</li>
<li id="modules_menu_1">Two</li>
<li id="modules_menu_2">Three</li>
<li id="modules_menu_3">Four</li>
<li id="modules_menu_4">Five</li>
<li id="modules_menu_5">Six</li>
</ul>
</body>
</html>
As you can see in source code - we have added "dragdrop" library (it is a part of Prototype).
Some CSS styles:
<style type="text/css">
ul li {
width: 120px; height: 120px; background: green;
}
ul {
width: 120px; display: block; float: left; position: relative;
}
</style>
Finally some JS code to make it all running:
<script type="text/javascript">
($$('.sortable')).each(function(element){
Sortable.create(element.id, {
overlap:'vertical',
constraint:false,
dropOnEmpty:true,
containment:[element.id],
onUpdate: function() {}
});
});
</script>
