jquery - 使用 jquery 重新排列菜单：悬停事件不会在拖动时触发

Question

我正在尝试创建一个页面，该页面允许您使用 jquery 可排序功能重新排序菜单。菜单由一个导航栏和水平排列的链接组成；将鼠标悬停在链接上会将子菜单显示为下拉菜单，这可以按预期工作。但是，当拖动一个项目对其进行重新排序时，不会触发悬停事件，因此不会显示子菜单，从而阻止您将链接放入其中。

我认为这可能与被拖动的项目直接位于鼠标下方并阻止其他对象获取事件有关。我尝试过 mouseover 和 mouseout 而不是 hover，但这也不起作用。

有任何想法吗？

编辑：这是我的jsfiddle。

Answer 1

您可以使用 jQuery UIdroppable行为，然后将行为附加到over和out处理程序上。请参阅我的 jsFiddle 分支。

$('li', menu)
    .mouseover(function () { $('>ul', $(this)).show(); })
    .mouseout(function () { $('>ul', $(this)).hide(); })
    .droppable({
        over:function() { $('>ul', $(this)).show(); },
        out:function () { $('>ul', $(this)).hide(); }});