为具有 0 个元素的 uls 排序嵌套列表答案

【问题标题】：sorting nested list for uls with 0 elements为具有 0 个元素的 uls 排序嵌套列表
【发布时间】：2014-07-10 12:18:17
【问题描述】：

我正在尝试实现一个可排序的嵌套列表，这是我目前的进展：jsfiddle

只要目标关卡至少有 1 个元素，将元素从一个关卡移动到另一个关卡就可以正常工作。但我无法将 li 元素移动到空的 ul 中。

HTML：

<ul class="sortable">
    <li>
        <span>Parent A</span>
        <ul class="sortable">
            <li>
                <span>Child A</span>
                <ul class="sortable"> </ul>
            </li>
            <li>
                <span>Child B</span>
                <ul class="sortable"> </ul>
            </li>
        </ul>
    </li>
</ul>

JS：

$(".sortable").sortable({
    connectWith:'.sortable',
    placeholder: "ui-state-error",
    forcePlaceholderSize: true
});

$(".sortable").disableSelection();

在上面的代码中，我想将Child A 移动到Child B。如何检测所需的空 ul 并实现我的目标？有什么解决方法？

我阅读了所有类似的主题，尝试了各种插件，但都无法为我的树工作。

【问题讨论】：

我没有看到空的 ul，对我来说工作正常。
@C-linkNepal 你可以在我的小提琴中将Child A 移动到Child B 中吗？
ul 没有尺寸，因为它是空的，并且没有样式提供任何尺寸，这就是为什么你不能“检测到”它的原因。也许您可以在 ul.sortable 中实现 de lie:hover 或 min-height 和/或 li:hover ul.sortable 中的 min-height 和选项？
@frikinside 我知道是什么导致了问题，但我不知道li:hover ul sortable。这解决了我的问题。将其发布为答案，我将接受它。谢谢
@AlexandruSeverin 做到了！很高兴它能帮助你！

标签： javascript jquery jquery-ui-sortable nested-lists

【解决方案1】：

ul 没有维度，因为它是空的，并且没有样式给出任何维度，这就是为什么你不能“检测到”它。也许您可以在ul.sortable 中实现li:hover 或min-height 和/或li:hover ul.sortable 中的min-height 并选择li:hover ul.sortable

例如：

li:hover ul.sortable {
    min-height:10px;
}

【讨论】：