<ul class="sortable-ul">
<li data-id="1">Строка 1</li>
<li data-id="2">Строка 2</li>
<li data-id="3">Строка 3</li>
<li data-id="4">Строка 4</li>
<li data-id="5">Строка 5</li>
<li data-id="6">Строка 6</li>
</ul>
<p style="text-align: center;">
<a class="btn btn-default" href="#" onclick="location.reload(); return false;"><i class="glyphicon glyphicon-refresh"></i> Обновить пример</a>
</p>
<style>
.sortable-ul {
list-style-type: none;
margin: 10px auto;
padding: 0;
width: 500px;
}
.sortable-ul li {
margin: 4px 0;
padding: 5px 10px;
font-size: 16px;
background: #ffffff;
border: 1px solid #e0e0e0;
cursor: move;
}
/* Стиль для перетаскиваемого элемента. */
.sortable-ul .ui-sortable-helper {
box-shadow: rgba(0, 0, 0, 0.14) 10px 10px 10px -5px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="jquery.cookie.min.js"></script>
<script>
// Если есть запись в cookie, то востанавливаем порядок.
if ($.cookie('sort')) {
$.each(JSON.parse($.cookie('sort')), function(i, row){
$('.sortable-ul').append($('.sortable-ul li[data-id=' + row + ']'));
});
}
$('.sortable-ul').sortable({
revert: 100,
stop: function(){
// Собираем все data-id в массив.
var sort = [];
$('.sortable-ul li').each(function(){
sort.push($(this).data('id'));
});
// И сохраняем его в cookie в виде строки JSON.
$.cookie('sort', JSON.stringify(sort));
}
});
</script>
