jQuery UI nested list create new child list

Question

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.

CoolEsh · Accepted Answer · 2011-02-04 13:27:36Z

1

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.

answered Feb 4, 2011 at 13:27

CoolEsh

3,1641 gold badge23 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Luke Over a year ago

It seems to be the easiest way to accomplish this. However, I'm not sure at the moment if nesting UL's this is valid XHTML. I will mark your answer as correct since within the context of the question it does provide a correct answer.

Collectives™ on Stack Overflow

jQuery UI nested list create new child list

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related