CODEWITHSUNDEEP
javascriptjqueryhtmljquery-ui
caramba
caramba

Reputation: 22480

jquery ui sortable parent and child elements

I would like to have all options to drag a child as parent and a parent into child elements.

Later a child should be parent if dragged as parent and be able to get child elements.

Is this possible, how to solve it?

This is what I've got: http://jsfiddle.net/LBybN/

<script type="text/javascript">
    $(function  () {
        $('ul.nav').sortable({
            connectWith: '.subnav',
        });
        $('ul.subnav').sortable({
        connectWith: '.nav',
        });
    })
</script>

<ul class="nav">
    <li>Web Development</li>
    <ul class="subnav">
        <li>PHP Jobs</li>
        <li>OSCommerce projects</li>
    </ul>
    <li>Content Creation</li>
    <ul class="subnav">
        <li>Technical Writing Jobs</li>
        <li>Forum Posting</li>
    </ul>
    <li>Design and Artwork</li>
    <ul class="subnav">
        <li>Blog Design Projects</li>
        <li>Freelance Website Design</li>
    </ul>
    <li>Sales and Marketing</li>
    <ul class="subnav">
        <li>Internet Marketing Consulting</li>
        <li>Leads Generation Services</li>
    </ul>
    <li>Test</li>
    <ul class="subnav"></ul>
</ul>

<style>
.subnav {
    background-color:orange;
    min-height:10px;
    width:400px;
}
</style>

Thanks for all the help.

Upvotes: 0

Views: 7012

Answers (1)

Valentin D
Valentin D

Reputation: 725

hope this is not too late for you. You should try to build each child node as

<li>
    <h2>Level 1_2</h2>
    <ul class="nav"></ul>
</li>

And change the jQuery to:

$(document).ready(function () {
    $(".nav").sortable({
        connectWith: ".nav"
    }).disableSelection();
});

Here is a jsFiddler with a small example.

Upvotes: 2

Related Questions