0

标题

我有以下代码：

<!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

提前致谢。

4

2 回答 2

1

我不确定我是否理解您的问题，但您可能有运气尝试：

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

我知道该项目会移动，但不确定它的子项。您可能需要遍历孩子，边走边移动它们。或者这可能与您想要的完全不同。

于 2013-11-01T15:59:38.203 回答
0

这是因为 sub-category1.2 中的子项都包裹在同一个 li 标签中。另外，你为什么使用这么旧版本的javascript？

于 2013-11-01T15:58:56.207 回答