jquery draggable和mouseover

Question

我目前有一些下拉菜单,鼠标悬停打开.我正在使用jquery ui中的draggable和droppable实现一些拖放功能.看起来菜单的鼠标悬停事件在拖动时不会触发,有没有办法允许它们工作？

我已经实现了如下(简化):

$('#some_id').draggable({ helper: 'clone', opacity: 0.35, zIndex: 20000, cursor: 'move' });
$('#some_menu').live('mouseenter click', function(){jThis.find('div').addClass('opened');});

Answer 1

我刚刚发现这是一个非常合乎逻辑的问题.一旦你开始拖动元素,它就会粘在你的鼠标指针下面.因此,它会一直悬停在当前元素上!

一个(不那么漂亮)修复是设置cursorAt选项,使鼠标指针位于可拖动元素之外:

$('#some_id').draggable({
      cursorAt: {left: -10, top: -10}
});

如果有一种方法以某种方式将鼠标指针传递到被拖动的元素下面会更好,但到目前为止我还没有找到解决方案.

希望这个对你有帮助!

Answer 2

正如Marcel Paans所指出的那样,问题在于帮助器粘在你的鼠标光标下.

该解决方案是将CSS属性设置pointer-events,以none辅助元素上.这样做会让指针事件触发帮助程序下面的元素.

您可以通过向helper选项提供回调来生成辅助元素,从而轻松完成此操作:

$('#some_id').draggable({
    helper: function() {
        return $(this).clone().css("pointer-events","none").appendTo("body").show();
    }
});