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

Question

我想知道是否有人对如何检测一个可排序的li项目被拖动时悬停在同一列表中的另一个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，它可以避免意外的悬停检测。当从可排序列表中拖动的元素进入或退出可拖放元素时，将触发这些事件。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"});