正文 

当前位置： 首页 > 问答 >

jquery可拖动和鼠标悬停

     2023-05-08     132

关键词：

【中文标题】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;

干净一点。

【讨论】：

如何使用 jQuery 在单击和鼠标悬停时使可滚动的 div 滚动

】如何使用jQuery在单击和鼠标悬停时使可滚动的div滚动【英文标题】：HowtomakeascrollabledivscrollonclickandmouseoverusingjQuery【发布时间】：2010-12-3119:08:28【问题描述】：使用下面的标记，当我单击或悬停在“#scrollUp”或“#scrollDown”锚... 查看详情

如何使用 jquery ui 可拖动突出显示悬停时的可放置​​区域

】如何使用jqueryui可拖动突出显示悬停时的可放置​​区域【英文标题】：HowdoIhighlightadroppableareaonhoverusingjqueryuidraggable【发布时间】：2012-04-1009:16:59【问题描述】：我实际上有两个问题，标题中的on是主要问题。我在标记为可放... 查看详情

jQuery可拖动+可排序：奇怪的鼠标偏移行为

】jQuery可拖动+可排序：奇怪的鼠标偏移行为【英文标题】：jQuerydraggable+sortable:strangemouseoffsetbehaviour【发布时间】：2010-11-1720:09:06【问题描述】：我有元素的可拖动列表，我可以将它们拖动到另一个空的元素中。如果我拖动可拖... 查看详情

在带有子菜单的菜单上需要有关 JQuery 鼠标悬停的帮助

】在带有子菜单的菜单上需要有关JQuery鼠标悬停的帮助【英文标题】：NeedhelponJQuerymouseoveronmenuwithsubmenus【发布时间】：2011-05-0507:39:37【问题描述】：我有这个菜单(@jsFiddle)，如果发生以下鼠标事件，就会发生这种情况：悬停在Mov... 查看详情

鼠标摇动时jQuery可拖动背景图像更改

】鼠标摇动时jQuery可拖动背景图像更改【英文标题】：jQuerydraggablebackgroundimagechangeonmouseshake【发布时间】：2018-03-2904:52:51【问题描述】：我一直在使用jQuery-UIDraggablehttps://www.jcmatheson.com/page/blog.html并想知道如果你用鼠标拖动并摇... 查看详情

JQuery中鼠标悬停和鼠标悬停时停止和继续动画的方法

】JQuery中鼠标悬停和鼠标悬停时停止和继续动画的方法【英文标题】：ThewaytostopandcontinueanimationwhilemouseoverandmouseoutinJQuery【发布时间】：2011-07-0214:31:54【问题描述】：例如：一个简单的例子来解释：$(\'.moveDiv\').animate("margin-left":20... 查看详情

拖动禁用 CSS 悬停

】拖动禁用CSS悬停【英文标题】：DraggingdisablingCSShover【发布时间】：2017-04-0315:35:40【问题描述】：我有这个迷你测试示例：https://jsfiddle.net/3d6udf2n/。当我开始将鼠标从Link外部拖到内部时，它不会改变背景和颜色，直到我松开鼠... 查看详情

Jquery：可拖动的敏感性

】Jquery：可拖动的敏感性【英文标题】：Jquery:Draggablesensibility【发布时间】：2016-12-3023:49:54【问题描述】：我有一个使用jquery的可拖动DOM元素。如果客户端在没有移动的情况下单击它，则不会调用可拖动开始，并且它的行为就像... 查看详情

jQuery UI 可拖动位置不刷新？

】jQueryUI可拖动位置不刷新？【英文标题】：jQueryUIDraggablePositionnotrefreshing?【发布时间】：2013-07-3022:00:17【问题描述】：我正在使用jQueryUIDraggable和Droppable。当可拖动对象位于可放置对象上方时，可放置对象将向下滑动，这会将... 查看详情

jQuery 更改 CSS 背景位置和鼠标悬停/鼠标移出

】jQuery更改CSS背景位置和鼠标悬停/鼠标移出【英文标题】：jQuerychangeCSSbackgroundpositionandmouseover/mouseout【发布时间】：2011-01-3116:57:45【问题描述】：我有一个由单个图像（例如精灵）组成的菜单。为了显示悬停图像，我只需将背... 查看详情

画布上的可拖动图像和鼠标事件

】画布上的可拖动图像和鼠标事件【英文标题】：DraggableimagesonCanvasandmouseevents【发布时间】：2013-09-1702:42:42【问题描述】：我有一个画布，上面有多个可拖动的图像。如果我单击它，我想将图像移至顶部，但它不起作用..如果我... 查看详情

jQuery - CSS - 通过拖动鼠标事件旋转 Div

】jQuery-CSS-通过拖动鼠标事件旋转Div【英文标题】：jQuery-CSS-RotateDivbydragmouseevent【发布时间】：2011-03-2704:45:05【问题描述】：我搜索了几天没有真正的结果，也许有人可以在这里帮助我。我的页面上有一个div（可以包含图像、文... 查看详情

使用 jQuery 在鼠标悬停时获取元素和 ID（如果有）[重复]

】使用jQuery在鼠标悬停时获取元素和ID（如果有）[重复]【英文标题】：GetElementandID,ifanyonmouseoverwithjQuery[duplicate]【发布时间】：2017-03-3004:12:19【问题描述】：我正在尝试为我的管理员提供他们悬停在其上的元素的鼠标悬停，以便... 查看详情

Angular UI-Bootstrap 弹出框可拖动

】AngularUI-Bootstrap弹出框可拖动【英文标题】：AngularUI-Bootstrappopoverdraggable【发布时间】：2017-06-1012:26:37【问题描述】：我正在使用AngularUI-Bootstrappopover并希望使用jQuery-UIdraggable使其可拖动。这一切都按预期工作，但我遇到了UI-Boot... 查看详情

通过拖动元素传递 mouseover 事件

】通过拖动元素传递mouseover事件【英文标题】：passmouseovereventthroughdraggingelement【发布时间】：2012-10-0613:59:03【问题描述】：我有一个自定义的可拖动元素（拖动开始于单击并结束于单击），可以将其拖放到某些区域。在鼠标悬... 查看详情

悬停、鼠标悬停和鼠标移出

】悬停、鼠标悬停和鼠标移出【英文标题】：Hover,mouseoverandmouseout【发布时间】：2011-05-2616:33:45【问题描述】：我正在学习和使用jQuery，并希望为某些元素显示一个删除图标。我有一个外部主div，其中包含元素的包装器数量。在... 查看详情

jQuery可拖动问题

】jQuery可拖动问题【英文标题】：Jquerydraggableissue【发布时间】：2013-01-1617:15:09【问题描述】：基本上我想要的是，在拖动时，如果我走出收容区域并在那里释放鼠标点击，可拖动元素只会粘在我离开收容区域的边框上。当我将... 查看详情

jQuery UI 在悬停时添加可放置的事件侦听器

】jQueryUI在悬停时添加可放置的事件侦听器【英文标题】：jQueryUIadddroppableeventlistenerwhilehovering【发布时间】：2020-06-0313:54:45【问题描述】：我想在拖动一个对象并悬停可放置对象时添加可放置事件侦听器。这是我的代码：$(\'.will... 查看详情