Hi,
Having trouble getting with these sortable DIVs, they are stored in a cookie and loaded correctly. But after that they can not be moved any more.
Any ideas?
<div id="example-1-4">
<div id="containment">
<div class="column left first">
<ul class="sortable-list">
<li class="sortable-item" id="A">Sortable item A</li>
<li class="sortable-item" id="B">Sortable item B</li>
</ul>
</div>
<div class="column left">
<ul class="sortable-list">
<li class="sortable-item" id="C">Sortable item C</li>
<li class="sortable-item" id="D">Sortable item D</li>
</ul>
</div>
<div class="column left">
<ul class="sortable-list">
<li class="sortable-item" id="E">Sortable item E</li>
</ul>
</div>
<div class="clearer"> </div>
</div>
</div>
<!-- END: XHTML for example 1.4 -->
</div>
</div>
</div>
<!-- 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
{
}
}
// Render items
function renderItems(items)
{
var html = '';
var columns = items.split('|');
for ( var c in columns )
{
html += '<div class="column left';
if ( c == 0 )
{
html += ' first';
}
html += '"><ul class="sortable-list">';
if ( columns[c] != '' )
{
var items = columns[c].split(',');
for ( var i in items )
{
html += '<li class="sortable-item" id="' + items[i] + '">Sortable item ' + items[i] + '</li>';
}
}
html += '</ul></div>';
}
$('#example-1-4').html(html);
}
// load positions form cookies
$('#example-1-4 .sortable-list').each( function( index ){
loadItemsFromCookie('cookie-b');
});
// Example 1.4: Sortable and connectable lists (within containment)
$('#example-1-4 .sortable-list').sortable({
connectWith: '#example-1-4 .sortable-list',
containment: '#containment'
});
// save positions into cookies
$('#example-1-4 .sortable-list').sortable({
connectWith: '#example-1-4 .sortable-list',
update: function(){
$.cookie('cookie-b', getItems('#example-1-4'));
}
});
});
</script>