2 different sortables in same list
I have made this examp开发者_Python百科le 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.
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.
You will need to initialize/destroy the sortable each time you want to do some sorting, and each time you will initialize it you will do for the type of elements you want..
So, add a different class to each type of elements you want grouped..
<div class="sortable">
<div class="process">Process A</div>
<div class="process">Process B</div>
<div class="process">Process C</div>
<div class="file">File A</div>
<div class="file">File B</div>
<div class="file">File C</div>
</div>
And in your script use
function InitSortable() {
$('.sortable > div').mousedown(function(){
$(this).closest('.sortable').sortable({
items:'.'+this.className,
stop:function(){
$(this).sortable('destroy');
}
});
});
}
$(InitSortable);
Demo at http://jsfiddle.net/gaby/h6aPj/
加载中,请稍侯......
精彩评论