Sortable toArray problem - latest SVN and, I guess, 1.5 imminent release
Back to the old portlets implementation problem. I need to record the
order in which portlets have been sorted and the columns thay're in.
I've done this by using connected columns - the most sensible way I
can think of.
The problem is when I run sortable('toArray') on the container
div...if I didn't specify 'items' all works as expected, but if I do
specify 'items', toArray just returns the entire list of portlets on
the page, top to bottom, as initially loaded.
After dragging stuff around, here's what I get when I I don't specify
'items':
Column 1: ["port2", "port3", "port1"]
Column 2: ["port4", "port6", "port5"]
But when I specify items: $(".portlet") I get this:
Column 1: ["port1", "port2", "port3", "port4", "port5", "port6"]
Column 2: ["port1", "port2", "port3", "port4", "port5", "port6"]
Any help would be much appreciated.
Cheers,
Steve
Here is an example (using svn from today, 17th March):
<style type="text/css">
.portlet {
width: 200px;
background: #f90;
padding: 20px;
margin-top: 10px;
}
.column {
float: left;
width: 300px;
background: #eee;
}
</style>
<button onclick="console.log($
('#column1').sortable('toArray'))">Column 1 to Array!</button>
<button onclick="console.log($
('#column2').sortable('toArray'))">Column 2 to Array!</button>
<div id="column1" class="column">
<div id="port1" class="portlet">
Portlet 1
</div>
<div id="port2" class="portlet">
Portlet 2
</div>
<div id="port3" class="portlet">
Portlet 3
</div>
</div>
<div id="column2" class="column">
<div id="port4" class="portlet">
Portlet 4
</div>
<div id="port5" class="portlet">
Portlet 5
</div>
<div id="port6" class="portlet">
Portlet 6
</div>
</div>
<script type="text/javascript">
$(document).ready(
function()
{
$('#column1').sortable(
{
// items: $(".portlet"),
connectWith: ['#column2'],
}
);
$('#column2').sortable(
{
// items: $(".portlet"),
connectWith: ['#column1'],
}
);
}
);
</script>