草庐IT

javascript - 拖动时 jQuery mouseleave 未正确触发

coder 2024-07-25 原文

我有一个可排序列表，其中的 mouseleave 事件监听器行为不正确。

如果我将鼠标移入和移出可排序列表，mouseleave 会正确触发。

如果我首先单击并拖动 sortable 的其中一个子项，mouseleave 会错误地触发 - 偶尔触发或根本不触发。

有什么想法吗？

谢谢。

更新:鼠标移出事件也会发生这种情况。 

<style>
#sortable { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; background-color: #CCC; }

#sortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
</style>

<script>
  $(function(){
    $("#sortable").sortable().disableSelection();
    $("#sortable").mouseleave(function(){ console.log("mouseleave"); });
  });   
</script>

<ul id="sortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
</ul>

更新 我使用以下方法来检测 child 何时被完全拖出可排序对象:

$("#sortable li").mousemove(function() {
        if ($(this).offset().left > $(this).parent().outerWidth() + $(this).parent().offset().left ||
                $(this).offset().top > $(this).parent().outerHeight() + $(this).parent().offset().top  ||
                $(this).offset().left + $(this).outerWidth() < $(this).parent().offset().left  ||
                $(this).offset().top + $(this).outerHeight() < $(this).parent().offset().top ){
                console.log("child is outside parent");
            }
    });

最佳答案

我将做一个假设，假设您正试图在元素视觉上离开可排序区域时捕获事件。正如您所发现的，mouseleave 和 mouseout 并不是最好的方法，因为它们跟踪鼠标相对于 DOM 元素的移动。由于您正在拖动这些列表项，它们实际上从未离开无序列表，因此您得不到预期的结果。

然而，这应该适合你:

$("#sortable").sortable().disableSelection();
$("#sortable li").mousemove(function() {
    if (parseInt($(this).css("left")) > $("#sortable").width() ||
        parseInt($(this).css("top")) > $("#sortable").height()) {
        //This is when the element is out of bounds
    }
});

关于javascript - 拖动时 jQuery mouseleave 未正确触发，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6785326/

javascriptmouseleavesortable34thisjqueryjquery-ui-sortable

有关javascript - 拖动时 jQuery mouseleave 未正确触发的更多相关文章

  1. ruby-on-rails - 如何使用 instance_variable_set 正确设置实例变量？ - 2

    我正在查看instance_variable_set的文档并看到给出的示例代码是这样做的:obj.instance_variable_set(:@instnc_var,"valuefortheinstancevariable")然后允许您在类的任何实例方法中以@instnc_var的形式访问该变量。我想知道为什么在@instnc_var之前需要一个冒号:。冒号有什么作用？ 最佳答案 我的第一直觉是告诉你不要使用instance_variable_set除非你真的知道你用它做什么。它本质上是一种元编程工具或绕过实例变量可见性的黑客攻击

  2. ruby - 触发器 ruby​​ 中 3 点范围运算符和 2 点范围运算符的区别 - 2

    请帮助我理解范围运算符...和..之间的区别，作为Ruby中使用的“触发器”。这是PragmaticProgrammersguidetoRuby中的一个示例:a=(11..20).collect{|i|(i%4==0)..(i%3==0)?i:nil}返回:[nil,12,nil,nil,nil,16,17,18,nil,20]还有:a=(11..20).collect{|i|(i%4==0)...(i%3==0)?i:nil}返回:[nil,12,13,14,15,16,17,18,nil,20] 最佳答案 触发器(又名f/f)是

  3. ruby-on-rails - Rails - 乐观锁定总是触发 StaleObjectError 异常 - 2

    我正在学习Rails，并阅读了关于乐观锁的内容。我已将类型为integer的lock_version列添加到我的articles表中。但现在每当我第一次尝试更新记录时，我都会收到StaleObjectError异常。这是我的迁移:classAddLockVersionToArticle当我尝试通过Rails控制台更新文章时:article=Article.first=>#我这样做:article.title="newtitle"article.save我明白了:(0.3ms)begintransaction(0.3ms)UPDATE"articles"SET"title"='dwdwd

  4. ruby-on-rails - 如何在 Rails Controller Action 上触发 Facebook 像素 - 2

    我有一个ruby​​onrails应用程序。我按照facebook的说明添加了一个像素。但是，要跟踪转化，Facebook要求您将页面置于达到预期结果时出现的转化中。即，如果我想显示客户已注册，我会将您注册后转到的页面作为成功对象进行跟踪。我的问题是，当客户注册时，在我的应用程序中没有登陆页面。该应用程序将用户带回主页。它在主页上显示了一条消息，所以我想看看是否有一种方法可以跟踪来自Controller操作而不是实际页面的转化。我需要计数的Action没有页面，它们是ControllerAction。是否有任何人都知道的关于如何执行此操作的gem、文档或最佳实践？这是进入布局文件的像素

  5. ruby-on-rails - 正确的 Rails 2.1 做事方式 - 2

    question的一些答案关于redirect_to让我想到了其他一些问题。基本上，我正在使用Rails2.1编写博客应用程序。我一直在尝试自己完成大部分工作(因为我对Rails有所了解)，但在需要时会引用Internet上的教程和引用资料。我设法让一个简单的博客正常运行，然后我尝试添加评论。靠我自己，我设法让它进入了可以从script/console添加评论的阶段，但我无法让表单正常工作。我遵循的其中一个教程建议在帖子Controller中创建一个“评论”操作，以添加评论。我的问题是:这是“标准”方式吗？我的另一个问题的答案之一似乎暗示应该有一个CommentsController参

  6. ruby - 我可以将我的 README.textile 以正确的格式放入我的 RDoc 中吗？ - 2

    我喜欢使用Textile或Markdown为我的项目编写自述文件，但是当我生成RDoc时，自述文件被解释为RDoc并且看起来非常糟糕。有没有办法让RDoc通过RedCloth或BlueCloth而不是它自己的格式化程序运行文件？它可以配置为自动检测文件后缀的格式吗？(例如README.textile通过RedCloth运行，但README.mdown通过BlueCloth运行) 最佳答案 使用YARD直接代替RDoc将允许您包含Textile或Markdown文件，只要它们的文件后缀是合理的。我经常使用类似于以下Rake任务的东西:

  7. ruby-on-rails - 使用 config.threadsafe 时从 lib/加载模块/类的正确方法是什么!选项？ - 2

    我一直致力于让我们的Rails2.3.8应用程序在JRuby下正确运行。一切正常，直到我启用config.threadsafe!以实现JRuby提供的并发性。这导致lib/中的模块和类不再自动加载。使用config.threadsafe!启用:$rubyscript/runner-eproduction'pSim::Sim200Provisioner'/Users/amchale/.rvm/gems/jruby-1.5.1@web-services/gems/activesupport-2.3.8/lib/active_support/dependencies.rb:105:in`co

  8. ruby - 调用其他方法的 TDD 方法的正确方法 - 2

    我需要一些关于TDD概念的帮助。假设我有以下代码defexecute(command)casecommandwhen"c"create_new_characterwhen"i"display_inventoryendenddefcreate_new_character#dostufftocreatenewcharacterenddefdisplay_inventory#dostufftodisplayinventoryend现在我不确定要为什么编写单元测试。如果我为execute方法编写单元测试，那不是几乎涵盖了我对create_new_character和display_invent

  9. ruby - 如何在 RVM 下将 Bundler 安装到 @global gemset，这是正确的方法吗 - 2

    我在OSX上(如果重要的话)。如果我使用RVM安装Ruby，它会默认将Bundler安装到@globalgemset假设我想要一个不同版本的bundler。我假设我需要做的就是执行geminstallbundler--version但是，这会将bundler安装到默认gemset并且RVM不会为其设置路径。因此，如果我键入bundler，它仍会启动一个与Ruby一起安装到@global中的bundler两个问题:如何将bundler安装到@globalgemset。将bundler安装到@globalgemset中的模式是否正确，或者我遗漏了什么 最佳答案

  10. ruby-on-rails - 如何正确格式化字符串，如 'mccdougal' 到 'McDougal' - 2

    什么Ruby或RailsDSL会将字符串"mccdougal"格式化为"McDougal"，同时留下字符串"McDougal"原样？将titleize传递给"McDougal"结果如下:"McDougal".titleize#=>"McDougal" 最佳答案 据我所知，没有可以处理这种情况的Rails助手。这是一个非标准的边缘案例，需要特殊处理。但是，您可以创建自定义字符串变形。您可以将这段代码放入初始化程序中:ActiveSupport::Inflector.inflections(:en)do|inflect|inflect.

随机推荐