Menu
I have made this example code to illustrate my problem:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
<script language="javascript">
function InitSortable() {
$('.sortable').sortable();
}
</script>
<style>
.sortable { width: 200px; padding: 10px; border: solid 1px black; }
.sortable div { float: left; width: 80px; border: solid 1px black; margin-left: 4px; margin-bottom: 4px; background-color: White; padding: 2px; }
</style>
</head>
<body onload="InitSortable()">
<div class="sortable">
<div>Process A</div>
<div>Process B</div>
<div>Process C</div>
<div>File A</div>
<div>File B</div>
<div>File C</div>
</div>
</body>
</html>
I want to be able to sort Process A, ProcessB and Process C without messing up the sort on File A, File B and File C. And I want it to work in opposite way if I try to sort any of the File elements.
I have tried to put those 2 lists in their own div, but that breakes the design, all elements should float to left.
I have also played around with the items option in jquery, but I only manage to get one of the lists work.
256
You say you've tried putting the 2 lists in their own divs but that "breaks the design". I'd be inclined to dispute that - you can create almost any visual appearance you like, whether split into 2 divs or just one. Try adding a wrapper div to encapsulate your float: left styling, then use a different child div for each sortable list. That should sort your problem.
184
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
