jQuery UI вложенный список создать новый дочерний список

Question

Я настроил вложенное перетаскивание с помощью пользовательского интерфейса jQuery, однако мне было интересно, как можно перетащить элемент таким образом, чтобы он создавал новый дочерний список.Например, если я перетащу элемент 1.2.2 вправо, он создаст новый подуровень в пункте 1.2.1.

Это мой код:

<div id="mylist">
    <ul>
        <li>Item #1</li>
        <li>Item #2</li>
        <ul>
            <li>Item #1.1</li>
            <li>Item #1.2</li>
            <ul>
                <li>Item #1.2.1</li>
                <li>Item #1.2.2</li>
                <li>Item #1.2.3</li>
                <li>Item #1.2.4</li>
            </ul>
            <li>Item #1.3</li>
            <li>Item #1.4</li>
        </ul>
        <li>Item #3</li>
        <li>Item #4</li>
    </ul>
</div>

$(document).ready( function() {    
    $("#mylist ul").sortable( {
        items: "li",
        connectWith: 'ul',
    } );
} );

ОБНОВЛЕНИЕ:

На самом деле.Это не работает должным образом с моим примером кода.Я просто заметил, что когда я перетаскиваю родителя, он должен перетаскивать и всех его детей, чего в настоящее время нет.Мне нравится, что я могу это делать.

Answer 1

Вы должны вложить свои UL в LI, например:

<div id="mylist">
<ul>
    <li>Item #1</li>
    <li>Item #2
        <ul>
            <li>Item #1.1</li>
            <li>Item #1.2
                <ul>
                    <li>Item #1.2.1</li>
                    <li>Item #1.2.2</li>
                    <li>Item #1.2.3</li>
                    <li>Item #1.2.4</li>
                </ul>
            </li>
            <li>Item #1.3</li>
            <li>Item #1.4</li>
        </ul>
    </li>
    <li>Item #3</li>
    <li>Item #4</li>
</ul>

Попробуйте живой пример: http://jsfiddle.net/pyEa4/ - это немного глючит, но потомки перетаскиваются с родителем.