0
在我的頁面上，我有兩種有幾個conainer的列。 現在我想能夠在這兩列中對這些容器進行排序。 這不是一個真正的問題。 我可以在兩個柱子中對我的容器進行分類並打開或關閉它。 但現在我的問題： 我想重新排序我的容器。 我想排序和切換他們像重新加載之前相同的順序。 所以我需要一個cookie。但我不知道如何做到這一點。jQuery - 兩列 - 可排序和cookie？
請看看我的代碼：
<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不太瞭解，謝謝。