Question

我有以下代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen, projection">
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/jquery-ui.js"></script>
        <script type="text/javascript" src="js/scripts.js"></script>            
    </head>
<style>
    #sortable{ list-style-type: none; margin: 0; padding: 0 0 2.5em; float: left; margin-right: 10px; }
    #sortable li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; width: 250px; }
    .wrp {font-size:12px;}
    #sortable {background:red;}
</style>
<body>
<div class="wrp">
<ol id="sortable" class="connectedSortable">
        <li id="0"><div>Start</div>
        <li id="1"><div>TOC</div>
        </li>
            <li id="2">
                <div>Category1</div>
                        <ol id="category" class="category">
                            <li id="3"><div>Sub-category1.1</div>
                            </li><li id="4" ><div>Sub-category1.2</div>
                                    <ol id="sub_category" class="sub_category">
                                        <li id="5" class="item">Item1.2.1</li>
                                        <li id="6" class="item">Item1.2.2</li>
                                    </ol>
                            </li><li id="7"><div>Sub-category1.3</div>
                            </li><li id="8"><div>Sub-category1.4</div>
                        </li>
                    </ol>    
            </li>    
    </li></ol>
</div> 
</body>

<script>
 $(function() {
        $( "#sortable" ).sortable({
            connectWith: ".connectedSortable"
        });

        $( "#category" ).sortable();
        $( "#sub_category" ).sortable({
            connectWith: ".category"
        });

});
</script>

目前我可以：

在同一级别移动类别
移动子类别
移动某个类别或子类别时，会移动其所有项目。
在同一级别移动项目

有人可以给我一招吗？我该如何修改以下代码： - 可以将项目移动到其他类别？例如：
我可以将item1.2.1移至sub-category1.1

提前致谢。

Answer 1

我不确定我理解你的问题，但你可能会有运气：

$('#category').append($('#sub_category'));

我知道这个项目会移动，但我不确定它的孩子。您可能需要循环通过孩子，随着他们移动它们。或者这可能与您想要的完全不同。

Answer 2

这是因为子类别1.2中的子项都包含在同一个li标签中。另外，你为什么要使用这样一个旧版本的javascript？

使用jquery UI按拖放列表排序

2 个答案: