jquery - JQUERY Sortable - 检测 li 项目悬停在同一列表中的另一个 li 上

Question

我想知道是否有人对如何检测拖动时可排序的 li 项目是否悬停在同一列表中的另一个 li 项目上有任何想法？我想检测到这一点的原因是，如果将一个 li 项目拖放到另一个项目上，它将在已拖放到的 li 下创建一个子列表。

我已经尝试了很多方法，但似乎无法做到正确。任何帮助将非常感激。

谢谢！安迪

Answer 1

您也可以使列表中的元素可放置：

$item.droppable({
    over: function (event, ui) { ... },
    out: function (event, ui) { ... },
    drop: function (event, ui) { ... },
    greedy: true,
    hoverClass: 'highlight'
});

$item 可以是排序列表中的列表元素（例如 ul 中的 li）或 li 中的某些元素，如 div，这可以避免意外的悬停检测。当您的 sortable 中拖动的元素传入和传出 droppable 时，将触发这些事件。不过，对于您想要的东西，Drop 可能是最有用的。

Answer 2

我和你有类似的问题，我在这里找到了一个解决方案：http: //a.shinynew.me/post/4641524290/jquery-ui-nested-sortables 这个想法是你没有检测到何时结束另一个 li项目，但您使用可排序的 connectWith

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

和javascript：

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