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表明问题在于助手粘在你的鼠标光标下。

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

通过提供带有回调的helper选项来生成辅助元素，可以轻松完成此任务：

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

Answer 3

这可以通过使用“over：”和“out：”来实现，其中定义了droppable。

$(".droppable").droppable({
    accept: '.draggable',
    over: function(event, ui) {
       $(this).addClass('temporaryhighlight');
    },
    out: function(event, ui) {
       $(this).removeClass('temporaryhighlight');
    },    
    drop: function() {
        //do some stuff
    }
});

在你的场景中，你必须让你的菜单可以删除，我猜你的菜单并不完全是你想要的（我假设你试图放到菜单中的东西，而不是整个下拉）。也许只是什么也不做或恢复掉落：这些项目的功能..？

积分和更多信息：

http://forum.jquery.com/topic/draggable-highlighting-custom-div-on-droppable-hover

http://jsfiddle.net/nickadeemus2002/wWbUF/1/

Answer 4

您可以为draggable编写一个拖动事件处理程序，用于检查光标是否在您要处理mouseover事件的元素上。您必须使用jQuery方法自己检测鼠标悬停，使用静态元素的offset（），width（）和height（）以及来自事件对象的拖动事件或jQuery UI自己的ui.offset的光标位置，以更符合您的目的为准

另一个不太优雅但可能更容易实现的选项是将静态元素设置为droppable，在这种情况下，jQuery UI允许您在可拖动的情况下悬停它时处理事件。如果你实际上不想允许它，你可以阻止丢弃。

Answer 5

根据Yonatan发布的内容：

你的JS：

$('#some_id').draggable({
  helper: 'clone',
  opacity: 0.35,
  zIndex: 20000,
  cursor: 'move' 
});

只需将其添加到您的CSS：

#some_id.ui-draggable-dragging { 
  pointer-events: none; 
}

有点清洁。

jquery draggable和mouseover

5 个答案: