Пользовательский интерфейс JQuery: перемещение элементов списка между несколькими неупорядоченными списками - PullRequest
Новая
       2

Пользовательский интерфейс JQuery: перемещение элементов списка между несколькими неупорядоченными списками

0 голосов
/ 14 февраля 2012

Я хочу отсортировать несколько и многоуровневые неупорядоченные списки.

Пример: 

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
    <script>
        $(function() {
            $( ".connectedSortable" ).sortable({
                connectWith: ".connectedSortable"
            }).disableSelection();
        });
    </script>
</head>
<body>
<div id="list">
    <ul id="list1" class="connectedSortable">
        <li title='1'>Foo1</li>
        <li title='2'>Foo2
            <ul id="list3" class="connectedSortable">
                <li title='3'>FooBar1</li>
                <li title='4'>FooBar2</li>
                <li title='5'>FooBar3</li>
                <li title='6'>FooBar4</li>
            </ul>
        </li>
        <li title='7'>Foo3</li>
        <li title='8'>Foo4</li>
        <li title='9'>Foo5</li>
        <li title='10'>Foo6</li>
        <li title='11'>Foo7</li>
    </ul>
    <ul id="list2" class="connectedSortable">
        <li title='12'>Bar1</li>
        <li title='13'>Bar2</li>
        <li title='14'>Bar3</li>
    </ul>
</div>
</body>
</html>

Мне также нужно, чтобы в момент сортировки элементов списка были доступны две информации: идентификатор родительского элемента - хранится в заголовке родительских элементов (0, если родительский элемент отсутствует) и идентификатор списка ( как list1 и list2 - не list3). Как бы вы это реализовали? Любая информация приветствуется.

PS: я совершенно новый пользовательский интерфейс.

1 Ответ

0 голосов
/ 15 февраля 2012

Здесь я сделал jsfiddle с решением.Основная идея состоит в том, чтобы использовать свойство containment для sortable, чтобы каждый список оставался внутри себя.

...