css - jqueryui 连接可排序列表以在拖动时激活悬停

Question

简而言之

我需要能够在拖动可排序对象时在悬停时激活菜单。这可能吗？

上下文:

我有一个由 cssmenu 提供支持的导航菜单，它基本上采用列表项并将它们排列成一个漂亮干净的菜单结构。我想连接导航菜单中的列表，并能够使用 jqueryui 可排序连接列表重新排列元素。我可以让连接的列表单独工作(在 cssmenu 之外)并在特定列表的一个菜单中工作。问题是当我尝试从一个菜单项拖动到另一个菜单项时，下拉菜单未激活。

您可以在这个 fiddle 中看到我可以对列表中的对象进行排序，但是我无法激活下拉菜单将其拖到另一个列表中(即从黄色列表拖到蓝色列表，反之亦然):

http://jsfiddle.net/9j5wyoLn/

html

<div id='cssmenu'>
    <ul id='subNavElements'>
    <li class='active has-sub'><a href='#'><span>About Us</span></a>
        <ul id="sortable1" class="connectedSortable">
          <li class="">Item 1</li>
          <li class="">Item 2</li>
          <li class="">Item 3</li>
          <li class="">Item 4</li>
        </ul>
    </li>   
    <li class='active has-sub'><a href='#'><span>Articles</span></a>
        <ul id="sortable2" class="connectedSortable">
          <li class="">Article 1</li>
          <li class="">Article 2</li>
          <li class="">Article 3</li>
          <li class="">Article 4</li>
        </ul>
    </li>
    </ul>
</div>

js

//make sortable
$(document).ready(function() {
    $( "#sortable1, #sortable2" ).sortable({
      connectWith: ".connectedSortable"
    }).disableSelection();

  });

css:在 fiddle 中处理(太多无法显示在下面)

Answer 1

想通了...

我在 css 中添加了一个名为“openSaysMe”的类，它为要显示的元素设置样式。

    #cssmenu .openSaysMe {
      left: auto;
      top: 34px;
      opacity: 1;
    }

然后我在对元素进行排序时添加了类，在排序完成后将类移除。

$( "#sortable1, #sortable2, #sortable3" ).sortable({
      connectWith: ".connectedSortable",
      sort: function( event, ui ) {
        $('#cssmenu ul ul').addClass('openSaysMe');
      },
      beforeStop: function( event, ui ) {
        $('#cssmenu ul ul').removeClass('openSaysMe');
      }
    }).disableSelection();

这是一个 fiddle :http://jsfiddle.net/9j5wyoLn/2/