На моей странице есть два вида столбцов с несколькими конейерами.
Теперь я хочу сортировать эти контейнеры в этих двух столбцах.
Это не было проблемой.
Я могу сортировать свои контейнеры в двух столбцах и включать или выключать их.
Но теперь моя проблема:
Я хочу отсортировать свои контейнеры при перезагрузке.
Я хочу отсортировать и переключать их в том же порядке, что и до перезагрузки.
Так что мне нужно печенье. Но я понятия не имею, как это сделать.
Пожалуйста, посмотрите на мой код:
<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, сри.