Question

我创建了一个简单的嵌套可排序列表。我能够移动父列表（和他们的孩子一起）。只要父列表中已有子项，我就可以将子列表移动到父列表中，或者从父列表移动到另一个父列表。但是，我无法将孩子移动到没有孩子的父列表。

例如，我可以在父母三和五中移动子A，但是不能将子A移动到父一，二或四，即使我已经使用子列表类设置了空UL。

这是我的代码：

<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Sortable Sandbox</h1>

<ul class='mainlist'>
    <li><span class='mov_handle'></span>One
        <ul class="sublist"></ul>
    </li>
    <li><span class='mov_handle'></span>Two
        <ul class="sublist"></ul>
    </li>
    <li><span class='mov_handle'></span>Three
        <ul class="sublist">
            <li><span class='mov_handle'></span>Sub A</li>
            <li><span class='mov_handle'></span>Sub B</li>
            <li><span class='mov_handle'></span>Sub C</li>
        </ul>
    </li>
    <li><span class='mov_handle'></span>Four
        <ul class="sublist"></ul>
    </li>
    <li><span class='mov_handle'></span>Five
        <ul class="sublist">
            <li><span class='mov_handle'></span>Sub D</li>
            <li><span class='mov_handle'></span>Sub E</li>
            <li><span class='mov_handle'></span>Sub F</li>
        </ul>
    </li>
</ul>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script>
$(function() {
    $('ul.mainlist').sortable({
          handle: '.mov_handle',
        connectWith: 'ul.mainlist'
    });
    $('ul.sublist').sortable({
          handle: '.mov_handle',
        connectWith: 'ul.sublist',
          dropOnEmpty: 1
    });
});
</script>
</body>
</html>

Answer 1

这是一个非常简单的解决方案......你需要至少有一些UL.sublist元素的高度，或者真的没有什么可以放弃的。尝试将以下样式添加到演示中......

ul.sublist {
  min-height: 20px;
}

将jquery可移动到空嵌套列表

1 个答案: