I am using the demo from the jquery ui site that shows how to sort
divs between columns. The sorting works well but when the user
changes the placement of a div I need to get the placement of each
div. I'm trying to use serialize on the update event but I get back
an empty string. I am fairly new to all of this so I'm not sure what
I'm doing wrong. Can anyone look at the code below and let me know?
Thanks.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-
ui-1.7.2.custom.min.js"></script>
<style type="text/css">
.column { width: 170px; float: left; padding-bottom: 100px; }
.portlet { margin: 0 1em 1em 0; }
.portlet-header { margin: 0.3em; padding-bottom: 4px; padding-left:
0.2em; }
.portlet-header .ui-icon { float: right; }
.portlet-content { padding: 0.4em; }
.ui-sortable-placeholder { border: 1px dotted black; visibility:
visible !important; height: 50px !important; }
.ui-sortable-placeholder * { visibility: hidden; }
</style>
<script type="text/javascript">
$(function() {
$(".column").sortable({
connectWith: '.column',
update: function(event, ui){alert($('.column').sortable
("serialize"));}
});
$(".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").disableSelection();
});
</script>
</head>
<body>
<div class="demo">
<div id="columns">
<div class="column" id="col1">
<div class="portlet" id="dv1"><a href="javascript:void(0);"
onclick="document.getElementById('dv1').style.display='none';">Hide</
a>
<div class="portlet-header">Feeds</div>
<div class="portlet-content">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit</div>
</div>
<div class="portlet" id="dv2"><a href="javascript:void(0);"
onclick="document.getElementById('dv2').style.display='none';">Hide</
a>
<div class="portlet-header">News</div>
<div class="portlet-content">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit</div>
</div>
<div class="portlet" id="dv3"><a href="javascript:void(0);"
onclick="document.getElementById('dv3').style.display='none';">Hide</
a>
<div class="portlet-header">Links</div>
<div class="portlet-content">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit</div>
</div>
</div>
<div class="column" id="col2">
<div class="portlet" id="dv4"><a href="javascript:void(0);"
onclick="document.getElementById('dv4').style.display='none';">Hide</
a>
<div class="portlet-header">Shopping</div>
<div class="portlet-content">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit</div>
</div>
<div class="portlet" id="dv5"><a href="javascript:void(0);"
onclick="document.getElementById('dv5').style.display='none';">Hide</
a>
<div class="portlet-header">Images</div>
<div class="portlet-content">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit</div>
</div>
</div>
</div>
</div><!-- End demo -->
<div class="demo-description">
Enable portlets (styled divs) as sortables and use the
<code>connectWith</code>
option to allow sorting between columns.
</div><!-- End demo-description -->
</body>
</html>