Как я могу перетащить вложенные UL в пользовательском интерфейсе jQuery? - PullRequest
Новая
       24

Как я могу перетащить вложенные UL в пользовательском интерфейсе jQuery?

0 голосов
/ 26 октября 2010

У меня есть следующие настройки: 

<ul class='_lscolumn'>
    <li>column1
        <ul class='_lswindow'>
            <li>window1
                <ul class='_lslink'>
                    <li>link1</li>
                    <li>link2</li>
                </ul>
            </li>
            <li>window2</li>
            <li>window3
                <ul class='_lslink'>
                    <li>link3</li>
                    <li>link4</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>column2
        <ul class='_lswindow'>
            <li>window4</li>
        </ul>
    </li>
    <li>column3
        <ul class='_lswindow'>
            <li>window5</li>
            <li>window6</li>
        </ul>
    </li>
</ul>

Что я хочу с этим - это возможность перетаскивать ссылки на классы окон, а окна - на столбцы. В конце концов я добавлю вкладку, окна также должны быть в состоянии перетащить на вкладки. Я пытаюсь это с помощью пользовательского интерфейса. У меня есть образец, настроенный на www.linkshelf.com / jQuery / index.html . Перетаскивание окна работает так, как я хочу, но когда я начинаю перетаскивать ссылки, макет становится все неправильно. Кто-нибудь знает, что я здесь делаю неправильно, и что мне нужно сделать, чтобы иметь возможность перетаскивать вложенные UL?

Если я сделаю столбцы сортируемыми, добавив $ ('_ column'). Sortable (); столбцы сортируют так, как они должны, но окна и ссылки идут без кода ...

1 Ответ

4 голосов
/ 26 октября 2010

Я работал над JSFiddle для этого, и я обнаружил, что он может работать до тех пор, пока существует цель для перетаскивания в ...

http://jsfiddle.net/gfosco/fJVMk/

Посмотрите, как этоработает, вы можете перемещать ссылки, и они не будут выходить из строя с окнами ...

Я добавил UL и обновил класс так, чтобы он имел минимальную высоту, иначе некуда будет бросатьссылки.

JS: 

$('._lswindow').each( function() {
    $(this).sortable( {
        connectWith: '._lswindow',
        cancel: '._lslink'
    }).disableSelection();
});

$('._lslink').each( function() {
    $(this).sortable( {
        connectWith: '._lslink' }).disableSelection();
});

Добавление CSS: 

._lslink {
 min-height:20px;   
}

HTML-фрагмент одного окна с пустым контейнером ссылок: 

    <ul class='_lswindow'> 
        <li>window4
            <ul class='_lslink'></ul>
        </li> 
    </ul>
...