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();
});

Here is a jsFiddler with a small example .