【发布时间】：2009-12-07 17:00:01
【问题描述】：
在我的页面上，我有两种列，其中包含多个内容。 现在我希望能够在这两列中对这些容器进行排序。 这不是一个真正的问题。 我可以在两列中对我的容器进行分类并打开或关闭它。 但现在我的问题： 我想在重新加载时对我的容器进行分类。 我想像重新加载之前一样对它们进行排序和切换。 所以我需要一块饼干。但我不知道该怎么做。
请看我的代码：
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.draggable.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.sortable.js"></script>
<style>
body{
font-size:12px;
font-family:helvetica,verdana,arial,sans-serif;
}
h3{
margin:0;
padding-top:5px;
padding-bottom:5px;
padding-left:5px;
font-size:12px;
font-weight:bold;
}
#box-left{
width:300px;
float:left;
}
#box-right{
width:300px;
float:left;
}
.box-border{
border:1px solid #333;
margin-left:5px;
margin-right:5px;
margin-top:10px;
}
.container-header{
background:#efefef;
cursor:move;
}
.container-header span{
cursor:pointer;
float:right;
margin-top:-20px;
margin-right:5px;
text-decoration:underline;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".sortable-column").sortable({
connectWith: '.sortable-column'
});
});
function toggleContent(container_id){
$('#' + container_id + ' .container-content').toggle();
}
</script>
<div id="box-left" class="sortable-column">
<div id="container1" class="box-border">
<div class="container-header">
<h3>Box Nummer 1</h3>
<span onclick="toggleContent('container1')">toggle</span>
</div>
<div class="container-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat adipiscing neque et convallis. Praesent semper dictum imperdiet. Fusce ultrices, felis ut lobortis facilisis, sapien sem hendrerit leo, nec convallis odio enim vitae risus.</p>
</div>
</div>
<div id="container2" class="box-border">
<div class="container-header">
<h3>Box Nummer 2</h3>
<span onclick="toggleContent('container2')">toggle</span>
</div>
<div class="container-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat adipiscing neque et convallis. Praesent semper dictum imperdiet. Fusce ultrices, felis ut lobortis facilisis, sapien sem hendrerit leo, nec convallis odio enim vitae risus.</p>
</div>
</div>
<div id="container3" class="box-border">
<div class="container-header">
<h3>Box Nummer 3</h3>
<span onclick="toggleContent('container3')">toggle</span>
</div>
<div class="container-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat adipiscing neque et convallis. Praesent semper dictum imperdiet. Fusce ultrices, felis ut lobortis facilisis, sapien sem hendrerit leo, nec convallis odio enim vitae risus.</p>
</div>
</div>
<div id="container4" class="box-border">
<div class="container-header">
<h3>Box Nummer 4</h3>
<span onclick="toggleContent('container4')">toggle</span>
</div>
<div class="container-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat adipiscing neque et convallis. Praesent semper dictum imperdiet. Fusce ultrices, felis ut lobortis facilisis, sapien sem hendrerit leo, nec convallis odio enim vitae risus.</p>
</div>
</div>
</div>
<div id="box-right" class="sortable-column">
<div id="container5" class="box-border">
<div class="container-header">
<h3>Box Nummer 5</h3>
<span onclick="toggleContent('container5')">toggle</span>
</div>
<div class="container-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat adipiscing neque et convallis. Praesent semper dictum imperdiet. Fusce ultrices, felis ut lobortis facilisis, sapien sem hendrerit leo, nec convallis odio enim vitae risus.</p>
</div>
</div>
<div id="container6" class="box-border">
<div class="container-header">
<h3>Box Nummer 6</h3>
<span onclick="toggleContent('container6')">toggle</span>
</div>
<div class="container-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat adipiscing neque et convallis. Praesent semper dictum imperdiet. Fusce ultrices, felis ut lobortis facilisis, sapien sem hendrerit leo, nec convallis odio enim vitae risus.</p>
</div>
</div>
<div id="container7" class="box-border">
<div class="container-header">
<h3>Box Nummer 7</h3>
<span onclick="toggleContent('container7')">toggle</span>
</div>
<div class="container-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat adipiscing neque et convallis. Praesent semper dictum imperdiet. Fusce ultrices, felis ut lobortis facilisis, sapien sem hendrerit leo, nec convallis odio enim vitae risus.</p>
</div>
</div>
<div id="container8" class="box-border">
<div class="container-header">
<h3>Box Nummer 8</h3>
<span onclick="toggleContent('container8')">toggle</span>
</div>
<div class="container-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat adipiscing neque et convallis. Praesent semper dictum imperdiet. Fusce ultrices, felis ut lobortis facilisis, sapien sem hendrerit leo, nec convallis odio enim vitae risus.</p>
</div>
</div>
<div id="container9" class="box-border">
<div class="container-header">
<h3>Box Nummer 9</h3>
<span onclick="toggleContent('container9')">toggle</span>
</div>
<div class="container-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat adipiscing neque et convallis. Praesent semper dictum imperdiet. Fusce ultrices, felis ut lobortis facilisis, sapien sem hendrerit leo, nec convallis odio enim vitae risus.</p>
</div>
</div>
</div>
如何设置 cookie？我对javascript不太了解，抱歉。
【问题讨论】：
标签： javascript jquery cookies jquery-ui-sortable