Two sortable groups
<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() {
var options = {
constraint: false, containment: ['myList', 'myList2'],
dropOnEmpty: true, onUpdate: function(list) {
var methodStart = list.down('li') ? 'remove' : 'add';
list[methodStart + 'ClassName']('empty');
}
};
Sortable.create('myList', options);
Sortable.create('myList2', options);
});
</script>
</head>
<body>
<ul id="myList">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
<ul id="myList2">
<li>D</li>
<li>E</li>
<li>F</li>
</ul>
</body>
</html>
Related examples in the same category