Сортировка jQuery и проблема CSS - PullRequest
Новая
       47

Сортировка jQuery и проблема CSS

1 голос
/ 12 июля 2011

У меня проблемы с сортируемой функцией 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;
}
...