Question

I have a question about jQuery-sort.

I have two columns, in the main column there is first one div in full width(class=firstitem), then four horizontal(class=middleitems), then four vertical in full width(class=bottomitems). So total of nine elements.
Like this in the maincolumn:

[ f i r s t ]
[2][3][4][5]
[  s  i  x  ]
[ s e v e n ]
[ e i g h t ]
[ n i n e   ]

And then a right columns with 10 items ju vertical.

If I lay item nr 2-5 vertical instead of horizontal everything works.
But I would like for the layout to stay like this when u dragg a new item into it. So if I for example dragg something in the middleitems, I want the last item in that to “move” down to the bottomitems. And if I dragg something into the topitem, I want the current topitem to move down to become the first middleitems and so on if you understand.
I’ve managed to change the cssclass of the dropped item to the correct one in “receive:”, but I dont know how to take it from there.
I need to somehow find the nextitem and “copy” and “paste” it to the next div, and so on.

And thats where I am atm.

Any ideas on how to make this work?
Its not the end of the world if it doesnt work but it would be nice if it did 🙂

Answer 1

In your “drop” event handler … Depends on what the “this” and “event.target” point to …

You should have a look to ‘manipulating’ & ‘traversal’ sections in jQuery documentation.

look at

• “before” here
• “after” here
• “appendTo” here
• “prependTo” here

Exemple :

<div id="parent"> 
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
</div>

–

$('#three').after($('#one')); // push first div (id="one") at the bottom
$('#one').appendTo($('#parent')); // push first div (id="one") at the bottom