I'm using the Sortable/Portlets UI Code.
Is it possible to auto-resize the Containment Height's. Bascially I have a DIV that acts as a container with a black background, when I sort these elements I want the container DIV height to change to match.
OR is it possible to stop the bottom sortables from having sortables placed underneath them?
Thanks,
I'm afraid it doesn't seem to when using the jQuery sortable code.
Any ideas?
<style type="text/css">
.demo { width:950px; min-height: 750px; height:auto !important; height: 750px; /* IE6 */ background-color:#3e0000; }
.column { width: 305px; float: left; padding-bottom: 100px; }
.portlet { margin: 0 1em 1em 0; background-color:#7c0000; color:#FFFFFF; height: 230px; }
.portlet-header { float:left; padding-bottom: 4px; padding-left: 0.2em; background-color:#b21f24; height:35px; width: 286px; }
.portlet-header .ui-icon { float: right; }
.portlet-content { padding: 0.4em; }
.ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 230px !important; background-color: #FFFFFF; }
.ui-sortable-placeholder * { visibility: hidden; }
.handle {float:right; width:40px; height:32px; margin:0; padding: 0; }
</style>
<div class="demo">
<div class="column" id="col0">
<div class="portlet" id="p_0">
<div class="portlet-header">Feeds <img src="arrow.png" alt="move" width="40" height="32" class="handle" /></div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div></div>
<script type="text/javascript">
$(function()
{
// check for order cookies
for (var i = 0; i < 3; i++)
{
var ckie = $.cookie("col" + i);
if (ckie && ckie != '')
{
var list = ckie.split(',');
for (var x = 0; x < list.length; x++)
{
$('#'+list[x]).appendTo('#col' + i);
}
}
}
$(".column").sortable({
connectWith: '.column',
handle: '.handle',
containment: '.demo', scroll: false
});
$(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
.find(".portlet-header")
.addClass("ui-widget-header ui-corner-all")
.prepend('<span class="ui-icon ui-icon-plusthick"></span>')
.end()
.find(".portlet-content");
$(".portlet-header .ui-icon").click(function()
{
$(this).toggleClass("ui-icon-minusthick");
$(this).parents(".portlet:first").find(".portlet-content").toggle();
});
$(".column").bind('sortupdate', function()
{
var i = 0;
$('.column').each(function()
{
$.cookie("col" + (i++), $(this).sortable('toArray'), { expires: 365 });
});
});
});
</script>