jQuery sortable and CSS problem

I'm having trouble with jQuery's sortable function. I'd like to have a block with one or more lines. And on each line is one or more links.

My HTML

<div id="links">
    <div class="line"><div class="link">Link #1</div></div>
    <div class="line">
        <div class="link">Link #2</div>
        <div class="link">Link #3</div>
    </div>
    <div class="line"><div class="link">Link #4</div></div>
    <div class="line"><div class="link">Link #5</div></div>
    <div class="line"><div class="link">Link #6</div></div>
    <div class="line">
        <div class="link">Link #7</div>
        <div class="link">Link #8</div>
    </div>
</div>

I know how to sort the lines vertically. And I know how to sort the links on the same line. But when I try to sort links regardless of the line it gets complicated.

Moving a link to another line is relatively easy. Just check if it leaves an empty line, if so remove it from the DOM. But adding a 开发者_如何学Clink between two lines (and so adding a new line) is where I get stuck.

All help is appreciated.

Erik

My JavaScript:

$('#links .line').sortable({
    connectWith: '.line', 
    forcePlaceholderSize: true, 
    placeholder: 'droppable', 
    tolerance: 'intersect', 
    revert: true, 
    update: function(event, ui) {
        $('.line').each(function(){
            if ($(this).html().trim() == '')
            {
                $(this).remove();
            }
        });

        $('.link').each(function(){
            if ($(this).parent().attr('class').indexOf('line') == -1)
            {
                $(this).wrap('<div class="line" />');
            }
        });
    }
});

And my CSS:

#links
{
    margin:0 0 45px 0;
}

#links .line
{
    overflow:hidden;
    height:auto;
    clear:left;
    width:490px;
    margin:0 0 10px 0;
}

#links .line .link
{
    overflow:hidden;
    height:auto;
    float:left;
    background-color:#e5e5e5;
    cursor:move;
    padding:2px;
    margin:0 10px 0 0;
}

#links .droppable
{
    float:left;
    height:16px;
    padding:2px;
    border:1px dashed #999;
    margin:0 10px 0 0;
}