jquery 可拖动和鼠标悬停

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 选项提供回调来生成 helper 元素来轻松完成此操作：

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

Answer 3

这可以通过在定义 droppable 的地方使用“over:”和“out:”来实现。

$(".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/

Answer 4

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

另一种选择，不太优雅但可能更容易实现，是使静态元素成为可放置元素，在这种情况下，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; 
}

会更干净一些。