javascript - jquery ui 可排序的父子元素

Question

我希望有所有选项可以将子元素作为父元素和父元素拖入子元素。

稍后，如果将子元素拖动为父元素并能够获取子元素，则子元素应该是父元素。

这可能吗，如何解决？

这就是我所拥有的：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>

感谢所有的帮助。

Answer 1

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

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

并将 jQuery 更改为：

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

这是一个带有小示例的 jsFiddler。