I can save to a cookie, but can’t work out how to load the values and render the sortables in the right order.
Any ideas?
<!-- Example JavaScript files -->
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<!-- Example jQuery code (JavaScript) -->
<script type="text/javascript">
$(document).ready(function(){
// Get items
function getItems(exampleNr)
{
var columns = [];
$(exampleNr + ' ul.sortable-list').each(function(){
columns.push($(this).sortable('toArray').join(','));
});
return columns.join('|');
}
// Load items from cookie
function loadItemsFromCookie(name)
{
if ( $.cookie(name) != null )
{
renderItems($.cookie(name));
}
else
{
}
}
// load positions form cookies
$('#example-1-4 .sortable-list').each( function( index ){
loadItemsFromCookie('welling');
});
// Example 1.4: Sortable and connectable lists (within containment)
$('#example-1-4 .sortable-list').sortable({
handle : '.handle',
connectWith: '#example-1-4 .sortable-list',
containment: '#containment' ,
update: function(){
$.cookie('welling', getItems('#example-1-4'), {expires: 999});
}
});
});
</script>
<div id="example-1-4">
<div id="containment">
<div class="column left first">
<ul class="sortable-list">
<li class="sortable-item" id="A"> <img src="move.png" class="handle" alt="move" /> Sortable item A</li>
<li class="sortable-item" id="B"> <img src="move.png" class="handle" alt="move" /> Sortable item B</li>
</ul>
</div>
<div class="column left">
<ul class="sortable-list">
<li class="sortable-item" id="C"> <img src="move.png" class="handle" alt="move" /> Sortable item C</li>
<li class="sortable-item" id="D"> <img src="move.png" class="handle" alt="move" /> Sortable item D</li>
</ul>
</div>
<div class="column left">
<ul class="sortable-list">
<li class="sortable-item" id="E"> <img src="move.png" class="handle" alt="move" /> Sortable item E</li>
</ul>
</div>
<div class="clearer"> </div>
</div>
</div>