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,
Code:
<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>
Code:
<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>
Code:
<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>
|
