I have managed to find a script that will save the position of
portlets, but to one column only - plus it wont allow me to connect to
another column. I need to be able to drag over to other columns and
save their order. Can anyone help? Here is my code...
<script type="text/javascript">
/////////////////////////////////////////////////////////////////
///// Set cookie for sidebar portlets //////////////////////
/////////////////////////////////////////////////////////////////
// set the list selector
var setSelector = ".column";
// set the cookie name
var setCookieName = "portletOrder";
// set the cookie expiry time (days):
var setCookieExpiry = 30;
////////////////////////////////////////////////////////////////
// function that writes the list order to a cookie
function getOrder() {
// save custom order to cookie
$.cookie(setCookieName, $(setSelector).sortable("toArray"),
{ expires: setCookieExpiry, path: "/" });
}
// function that restores the list order from a cookie
function restoreOrder() {
var div = $(setSelector);
if (div == null) return
// fetch the cookie value (saved order)
var cookie = $.cookie(setCookieName);
if (!cookie) return;
// make array from saved order
var IDs = cookie.split(",");
// fetch current order
var items = div.sortable("toArray");
// make array from current order
var rebuild = new Array();
for ( var v=0, len=items.length; v<len; v++ ){
rebuild[items[v]] = items[v];
}
for (var i = 0, n = IDs.length; i < n; i++) {
// item id from saved order
var itemID = IDs[i];
if (itemID in rebuild) {
// select item id from current order
var item = rebuild[itemID];
// select the item according to current order
var child = $("div.ui-sortable").children("#"
+ item);
// select the item according to the saved
order
var savedOrd = $("div.ui-sortable").children
("#" + itemID);
// remove all the items
child.remove();
// add the items in turn according to saved
order we need to filter here since the "ui-sortable"
// class is applied to all ul elements and we
only want the very first!
$("div.ui-sortable").filter(":first").append
(savedOrd);
}
}
}
// code executed when the document loads
$(function () {
$(setSelector).sortable({
update: function() {getOrder(); }
});
restoreOrder();
// here, we reload the saved order
$(".portlet").addClass("ui-widget ui-widget-content ui-
helper-clearfix ui-corner-all")
.find(".portlet-header")
.addClass("ui-widget-header ui-corner-
all")
.prepend('')
.end()
.find(".portlet-content");
$(".portlet-header .ui-icon").click(function()
{
$(this).toggleClass("ui-icon-minus");
$(this).toggleClass("ui-icon-plus");
$(this).parents(".portlet:first").find
(".portlet-content").toggle();
});
$(".portlet-header .ui-icon").hover(
function() {$(this).addClass("ui-icon-
hover"); },
function() {$(this).removeClass('ui-icon-
hover'); }
);
});
</script>
</head>
<div id="wideSidebar" class="column">
<div class="sidebarBox portlet" id="item-1">
<h2 class="portlet-header">Header 1</h2>
fdssdsd
</div>
<div class="sidebarBox portlet" id="item-2">
<h2 class="portlet-header">Header 2</h2>
fsdsdfsfsd
</div>
<div class="sidebarBox portlet" id="item-3">
<h2 class="portlet-header">Header 3</h2>
<div class="portlet-content">
fdsfsdfsdfsd </div>
</div>
</div> <div id="wideSidebar2" class="column">
<div class="sidebarBox portlet" id="item-4">
<h2 class="portlet-header">Header 4</h2>
<ul class="guideListing portlet-content">
<li>Content 1 list</li>
</ul>
</div>
<div class="sidebarBox portlet" id="item-5">
<h2 class="portlet-header">Header 5</h2>
<ul class="portlet-content">
<li>Content 2 list</li>
</ul>
</div>
<div class="sidebarBox portlet" id="item-6">
<h2 class="portlet-header">Header 6</h2>
<div class="portlet-content">
Content 3
</div>
</div>
</div>
On Oct 2, 12:08 am, craigeves <craige...@googlemail.com> wrote:
> Please can someone help?
>
> I am using the jQuery UI (sortable) Portlets code - but I want to use
> the jQuery cookies plugin to remember the order of the portlets. I
> don't know where to start - and searching the net for an answer only
> brings up sortable ul and li.
>
> Please help.
>
> Code:
> <script type="text/javascript">
> $(function() {
> $(".column").sortable({
> connectWith: '.column'
> });
>
> $(".column").disableSelection();
> });
> </script>
>
> HTML:
> <div class="column">
> <div class="portlet">
> <div class="portlet-header ui-state-disabled">Feeds</div>
> <div class="portlet-content">Lorem ipsum dolor sit amet,
> consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer
> adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing
> elit.</div>
> </div>
> <div class="portlet">
> <div class="portlet-header">News</div>
> <div class="portlet-content">Lorem ipsum dolor sit amet,
> consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer
> adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing
> elit.</div>
> </div>
> </div>
> <div class="column">
> <div class="portlet">
> <div class="portlet-header">Shopping</div>
> <div class="portlet-content">Lorem ipsum dolor sit amet,
> consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer
> adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing
> elit.</div>
> </div>
> </div>
> <div class="column">
> <div class="portlet">
> <div class="portlet-header">Links</div>
> <div class="portlet-content">Lorem ipsum dolor sit amet,
> consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer
> adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing
> elit.</div>
> </div>
> <div class="portlet">
> <div class="portlet-header">Images</div>
> <div class="portlet-content">Lorem ipsum dolor sit amet,
> consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer
> adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing
> elit.</div>
> </div>
> </div>
