CODEWITHSUNDEEP
jqueryjquery-uidrag-and-drop
Luke
Luke

Reputation: 21236

jQuery UI nested list create new child list

I have set up nested drag and drop with jQuery UI however, I was wondering how it it possible to drag an item in such a way that it creates a new child list. E.g. if I drag item 1.2.2 to the right it will create a new sub-level under item 1.2.1.

This is my code:

<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',
    } );
} );

UPDATE:

Actually. It's not working properly at all with my example code. I just noticed that when I drag a parent is should drag all it's children as well, which it currently doesn't. I like it to be able to do that as well.

Upvotes: 1

Views: 916

Answers (1)

CoolEsh
CoolEsh

Reputation: 3154

You need to nest your ULs into LIs, like this:

<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>

Try live example: http://jsfiddle.net/pyEa4/ - its little buggy but childs are dragged with parent.

Upvotes: 1

Related Questions