Jquery Sortable 获取底层 div 的 ID

Question

我正在使用 jquery 可排序功能对应用程序中的项目列表进行排序。看到我的列表变得相当大，我决定将它们重新组织为可以展开或折叠的子列表。

我的想法是，当用户将一个元素拖动到子列表的标题上并将光标保持在那里 750 毫秒时，列表会展开，但我遇到了一个问题，我无法获取底层 div 的 ID，因为jquery 似乎抓取了我正在拖动的项目的 ID，而不是我让它悬停的项目的 ID。

有没有我可以用来实现此目的的功能或插件（我确信我不是第一个遇到此问题的人，但我的 googlefu 未能找到与我相关的任何内容）。

感谢您的帮助:)

编辑：

这是我想做的事情的一个想法：

$('.categoryLi').hover(function(){expandCategory(this.id);});

function expandCategory(id)
{
    if(sectionDraggingMode)
    {   
        $(document).oneTime('750ms', 'expandCategoryTimer', function(){$('#'+id+' .category_content').show();});
    }
}

这是我的 HTML 的要点：

<ul class="category">
    <li class="categoryLi" id="c8">
            <div class="sublistHeader"></div>
            <div id="cat_8_container" class="category_content" style="display: none;">
            //sortable list here
            </div>
    </li>
    <li class="categoryLi" id="c9">
            <div class="sublistHeader"></div>
            <div id="cat_9_container" class="category_content" style="display: none;">
            //other sortable list here
            </div>
    </li>
</ul>

现在当我将鼠标悬停在 .categoryLi 上时，我调用 ExpandCategory 发送在我悬停的元素的 id 上，但它永远不会触发任何 .categoryLi 容器的悬停，除了我目前正在拖动的元素的父级之外。我需要找到一种方法来“窥视”它的背后。因此，如果我从 #c9 拖动一个项目，jquery 会认为我总是悬停在 #c9 上

Answer 1

事实证明，jquery 的 droppable 可以用于此目的。我将要用作展开触发器的区域定义为可放置区域，并在触发 over 事件时执行此操作。

$('.categoryLi > .toolbar').droppable({
    accept: ".sectionLi",
    over: function(event, ui){
        $(this).siblings('.category_content').show();
        $('.section').sortable('refreshPositions');
    }
});

此修复存在一些问题，但至少解决了悬停问题。希望这可以帮助将来的人。