拖动嵌套 li 不起作用

Question

我正在使用 jquery-ui 进行排序和拖动 https://johnny.github.io/jquery-sortable/.. 但它不会附加到 li.. 代码就像

$("#example3 ul").sortable({
    placeholder: "ui-state-highlight",
    connectWith: '#example3 ul'
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<div id="example3">
    <ul>
        <li >Item 1
            <ul>
                <li>Item 1 1</li>
                <li>Item 1 2</li>
                <li>Item 1 3</li>
            </ul>
        </li>
        <li >Item 2<ul></ul></li>
        <li >Item 3<ul></ul></li>
        <li >Item 4<ul></ul></li>
    </ul>
</div>

如果我将第 3 项拖到第 2 项下，那么它不起作用。我该如何解决这个问题？而且我还必须检测哪个 li 在哪个 li.. 请帮助..

Answer 1

问题是，空 'ul'-标签没有任何 space 并且是隐藏的（大小等于零）。只需为每个元素添加一个小填充，然后您就可以将元素拖到那里。来，看看：

$("#example3 ul").sortable({
    placeholder: "ui-state-highlight",
    connectWith: '#example3 ul'
});

#example3 ul{
  padding-bottom: 0.3em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<div id="example3">
    <ul>
        <li >Item 1
            <ul>
                <li>Item 1 1</li>
                <li>Item 1 2</li>
                <li>Item 1 3</li>
            </ul>
        </li>
        <li >Item 2<ul></ul></li>
        <li >Item 3<ul></ul></li>
        <li >Item 4<ul></ul></li>
    </ul>
</div>

拖动嵌套 li 不起作用

Drag nested li doesn't work

javascript

jquery

jquery-ui

jquery-ui-draggable