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中删除。但是在两条线之间添加链接（以及添加一条新线）就是我被困住的地方。

感谢所有帮助。

埃里克

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

jQuery可排序和CSS问题

0 个答案: