jquery ui可排序的父子元素

时间:2013-08-01 10:40:23

标签: javascript jquery html jquery-ui

我希望能够将子项作为父项和父项拖到子元素中。

如果孩子作为父母被拖动并且能够获得子元素,那么孩子应该是父母。

这可能,如何解决?

这就是我所得到的: 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>

感谢您的帮助。

1 个答案:

答案 0 :(得分:2)

希望这对你来说还不算太晚。 您应该尝试将每个子节点构建为

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

将jQuery更改为:

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

Here is a jsFiddler with a small example