<div class="column" id="col1">
<div class="portlet">
<div class="portlet-header"><div class="toggleup"></div>Feeds</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class="portlet">
<div class="portlet-header"><div class="toggleup"></div>News</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
<div class="column" id="col2">
<div class="portlet">
<div class="portlet-header"><div class="toggleup"></div>Shopping</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
but there will be 4 columns.
This JQuery gets the things "moving"
$(function() {
$(".column").sortable({
revert: true,
scroll: true,
appendTo: 'body',
connectWith: '.column',
cancel: '.disabled',
stop: function() {
is this where the serialize goes?
if not where?
What is the code to serialize the columns into 1 array?
},
revertDuration:50000,
scope:'scope',
opacity: 0.80,
});
$(".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-minusthick"></span>')
.end()
.find(".portlet-content");
$(".portlet-header .toggleup").click(function() {
$(this).toggleClass("ui-icon-minusthick").toggleClass("ui-icon-plusthick");
$(this).parents(".portlet:first").find(".portlet-content").toggle();
});
$(".column").disableSelection();
});
});
BUT where do I and how do I (in simple english) put the .sortable(serialize)?
Then where do I put any code (and again what is it) to read that serialization having saved it to say a cookie (cookie plugin installed) for the next time the page is opened?
I know this is an "old" chestnut, but for non js types like me all documentation is martian. It may be a really good idea to have an example as most of "us" can follow the example, but cannot read/understand "the snipt codes" often given in answers.