jquery可拖动和鼠标悬停

Posted 2023-05-08

【中文标题】jquery可拖动和鼠标悬停

【英文标题】：jquery draggable and mouseover

【发布时间】：2011-09-26 09:07:12

【问题描述】：

我目前有一些在鼠标悬停时打开的下拉菜单。我正在使用 jquery ui 中的可拖放和可拖放来实现一些拖放功能。似乎菜单的鼠标悬停事件在拖动时不会触发，有没有办法让它们工作？

我已经实现如下（简化）：

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

【问题讨论】：

我们可以看看你目前尝试过的代码吗？

是的，试试$('p738')[*2] *11 (function() +=39% acc rate);

也许在你的 mouseenter 和 click 事件中尝试 event.stopPropagation()

@ryuutatsuo 我想让它做 mouseenter 行为，而不是阻止它。我希望它同时进行拖动和鼠标悬停，它只进行拖动。

【参考方案1】：

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

一个（不太漂亮）的解决方法是设置 cursorAt 选项，使鼠标指针位于可拖动元素之外：

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

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

希望这会有所帮助！

【讨论】：

谢谢！经过大量搜索，这解决了我的问题。

【参考方案2】：

正如Marcel Paans 所指出的，问题在于助手粘在您的鼠标光标下。

解决方案是在辅助元素上将 CSS 属性 pointer-events 设置为 none。 这样做将使指针事件在助手下方的元素上触发。

您可以通过为辅助选项提供回调来生成辅助元素来轻松完成此操作：

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

【讨论】：

$(this) 似乎是指父容器 (ul)。要获取单个元素 (li)，请使用辅助函数接受的 ui 参数： helper: function (event, ui) return ui.clone().css("pointer-events", "none").appendTo( ".container").show();

您是英雄！谢谢！

【参考方案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
    
);

但是，在您的场景中，您必须使菜单可放置，我猜这并不是您想要的（我假设您尝试放置在菜单中的内容，而不是整个下拉列表）。也许只是什么都不做或为 drop: 恢复这些项目的功能..？

学分和更多信息：

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

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

【参考方案4】：

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

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

【参考方案5】：

根据 Yonatan 发布的内容：

你的 JS：

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

只需将其添加到您的 CSS 中：

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

干净一点。