Here it is - thanks for your help again....
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Sortable - Portlets</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="ui.core.js"></script>
<script type="text/javascript" src="ui.sortable.js"></script>
<style type="text/css">
.column {
width: 300px;
float: left;
background-color: #eeeeee;
margin-right: 25px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
height: 700px;
}
.portlet {
background-color: #FFF;
margin-top: 0;
margin-right: 0;
margin-bottom: 10;
margin-left: 0;
}
.portlet-header {
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
background-color: #333;
padding: 10px;
color: #FFF;
}
.portlet-header .ui-icon { float: right; }
.portlet-content {
padding: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
color: #333;
margin-bottom: 10px;
}
.ui-sortable-placeholder { border: 1px dotted black; visibility:
visible}
.ui-sortable-placeholder * { visibility: hidden; }
</style>
<script type="text/javascript">
$(function() {
$(".column").sortable({
handle: '.portlet-header',
connectWith: '.column'
});
$(".column").disableSelection();
});
</script>
</head>
<body>
<div class="demo">
<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>
<p>sddfds</p>
</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>
</div>
</body>
</html>
On Oct 2, 3:09 pm, Nalum <mallon.l...@gmail.com> wrote:
> Is the code in the original post all the code you have?
>
> On Oct 2, 3:03 pm, craigeves <craige...@googlemail.com> wrote:
>
> > Thanks for this - but I don't understand where it would fit into my
> > script? I'm only just starting in jQuery...
>
> > Also, will this save the position of the portlet no matter which
> > column it's in? It's just that it looks like it's related to a closed
> > and expanded portlet state.
>
> > Thanks for your time.
>
> > Craig
>
> > On Oct 2, 2:58 pm, Nalum <mallon.l...@gmail.com> wrote:
>
> > > Hello Craig,
> > > I've done this before by building up a string e.g. box-
> > > id1,collapsed;box-id5,not-collapsed;box-id3,collapsed|box-
> > > id4,collapsed;box-id2,not-collapsed;box-id6,collapsed;
>
> > > In the javascript do something like thishttp://pastebin.com/m90a2af6
>
> > > Hope this helps,
> > > Nalum
>
> > > On Oct 2, 2:35 pm, craigeves <craige...@googlemail.com> wrote:
>
> > > > anyone?
>
> > > > 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>
