jQuery 可排序和 CSS 问题

Question

我在使用 jQuery 的可排序功能时遇到问题。我想要一个包含一行或多行的块。每行都有一个或多个链接。

我的 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>

我知道如何垂直排序行。我知道如何对同一行上的链接进行排序。但是，当我尝试对链接进行排序时，无论其行如何，它都会变得复杂。

将链接移动到另一行相对容易。只需检查它是否留下空行，如果是，则将其从 DOM 中删除。但是在两行之间添加链接（因此添加新行）是我遇到困难的地方。

感谢所有帮助。

Erik

我的 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" />');
            }
        });
    }
});

和我的 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;
}