将函数添加到 jQuery 可拖动恢复“事件”

2024-01-18

我拥有的:

我有一个可拖动的 div,其恢复参数设置为“无效”。

我需要的:

当恢复发生时,我想触发对另一个元素的 CSS 更改。

问题:

“恢复”是参数而不是事件,因此当恢复发生时,我在触发所需的 CSS 更改时遇到了很大的困难。

My code:

$('#peg_icon').draggable({
    revert: 'invalid',
    scroll: false,
    stack: "#peg_icon",
    drag: function(event, ui) {
        $('#peg_icon').css('background-image','url(images/peg-icon-when-dragged.png)');
    }
});

我尝试过的:

我尝试使用“恢复”作为事件未成功:

revert: function(event, ui) {
    $('#peg_icon').css('background-image','url(images/peg-icon-default.png)');
},

我也未能成功尝试获取恢复参数来执行此功能:

function(socketObj)
  {
     //if false then no socket object drop occurred.
     if(socketObj === false)
     {
        //revert the peg by returning true
        $('#peg_icon').css('background-image','url(images/peg-icon-default.png)');
        return true;
     }
     else
     {
        //return false so that the peg does not revert
        return false;
     }
  }

Context:

我正在拖动一个 div,当拖动时,背景图像会发生变化,当拖动恢复时,背景图像会恢复到其原始状态。

我的问题:

当拖动发生恢复时,如何触发对另一个元素的 CSS 更改?


事实证明,revert 可以接受一个方法。请参阅完整示例:http://jsfiddle.net/mori57/Xpscw/ http://jsfiddle.net/mori57/Xpscw/

具体来说:

$(function() {
    $("#ducky").draggable({
        revert: function(is_valid_drop){
            console.log("is_valid_drop = " + is_valid_drop);
            // when you're done, you need to remove the "dragging" class
            // and yes, I'm sure this can be refactored better, but I'm 
            // out of time for today! :)
            if(!is_valid_drop){
               console.log("revert triggered");
                $(".pond").addClass("green");
                $(this).removeClass("inmotion");
               return true;
            } else {
                $(".pond").removeClass("green");
                $(this).removeClass("inmotion");
            }
        },
        drag: function(){
            // as you drag, add your "dragging" class, like so:
            $(this).addClass("inmotion");
        }
    });
    $("#boat").droppable({
      drop: function( event, ui ) {
        $(this)
          .addClass("ui-state-highlight");
      }
    });
  });

希望这会有所帮助...我猜测您尝试修改的任何内容都是问题,而不是尝试使用函数调用来恢复。再次查看您尝试设置的 CSS,看看您的问题是否出在其中。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将函数添加到 jQuery 可拖动恢复“事件” 的相关文章

  • 使用 AJAX 和 Jquery 自动完成功能填充表单数据

    我想使用自动完成所选项目来填写表单数据 我的自动完成工作正常 但我无法弄清楚如何通过从自动完成文本框中检索项目来填写表单数据 这是我的代码 HttpPost public JsonResult GetAutocomplete string
  • 创建后将事件处理程序添加到 jQuery UI 日期选择器

    我有以下场景 在我的母版页中我有 datepicker datepicker changeYear true changeMonth true dateFormat dd mm yy duration fast 这样 我分配 datepic
  • 在 jQuery 可排序中对多个选定项目进行排序?

    我试图在 jQuery 可排序集中选择多个项目 然后将选定的项目一起移动 这是我的弱点开始尝试使其发挥作用 http jsfiddle net benstenson CgD8Y 这是代码 HTML div class container d
  • 将 jquery-mobile 与 Webpack 结合使用

    我正在尝试使用 webpack 加载 jquery mobile 但到目前为止还没有运气 我知道 jquery mobile 依赖于 jquery ui 而 jquery ui 又依赖于 jquery 如何在 Webpack 中设置这样的场
  • 在 MVC 4 中的另一个表单中验证 JQuery UI 模式表单

    我在 MVC 4 中有一个表单 其中包含多个字段 根据组合的值 我需要打开一个模式对话框表单并加载到这 3 个附加字段中 这些字段将影响我正在创建的同一实体 在主窗体中进行编辑 对于这个模式对话框 我使用的是 jQuery UI 中的对话框
  • 调用函数值[重复]

    这个问题在这里已经有答案了 可能的重复 函数提前触发 https stackoverflow com questions 12201816 function triggering early 我已经编写了这段代码 但是当我调用函数 test
  • 如何将函数绑定到DOM事件一次且仅一次,以便在事件触发时不会再次执行?

    所以我有以下形式的锚标签 a href link 我在页面加载时应用以下内容 我的意思是 文档准备就绪 jQuery a rel Tab click function e e preventDefault then I do some st
  • 如何使用 jQuery UI Sortable 正确相交?

    这是我对 jQuery UI Sortable 进行动画处理的尝试 https codepen io anon pen YdMOXE https codepen io anon pen YdMOXE var startIndex chang
  • 如何在 jQueryUI 工具提示中换行

    新版本的 jQueryUI 1 9 附带了本机工具提示小部件 经过测试 如果内容 标题属性的值 很短 它就可以正常工作 但如果内容很长 工具提示一旦显示就会与输入文本重叠 有a demo http jqueryui com tooltip
  • 使用 jquery 淡入/淡出

    我正在研究我的学生项目 我是新的 jquery 对于该项目 我必须使用 jquery 来增强一些功能 并且我已经学到了很多来执行基本任务 但我陷入了一些非常令人困惑的事情 我的一个脚本实际上在鼠标悬停在功能上时更改了 div 容器的图像 功
  • 使用 jquery UI 调整大小的分屏 div

    我心中有一个设计 涉及 html 中的拆分面板视图 类似于 winforms 拆分面板 我一直在尝试jQuery UI 可调整大小 http jqueryui com demos resizable我喜欢这个功能 我只是似乎无法协调两者的大
  • jQuery UI 对话框使用 setTimeout 自动关闭

    我试图让对话框在打开后三秒自动关闭 我尝试过以下方法 setTimeout mydialog dialog close 3000 这是在上下文中 acknowledged dialog dialog height 140 modal tru
  • jQuery UI Sortable:如果更新回调使 AJAX 调用失败,则恢复更改?

    我正在使用可排序小部件来重新排序项目列表 将项目拖到新位置后 我启动一个 AJAX 表单发布到服务器以保存新订单 如果我收到来自服务器的错误消息 如何撤消排序 例如 将拖动项目返回到其在列表中的原始位置 基本上 如果服务器确认更改已保存 我
  • 是否可以将外部数据拖放到 jstree 中?

    我正在开发一个需要构建分层导航菜单的项目 jstree https www jstree com看起来很适合这个 该树将被保存到数据库中 我计划使用 CakePHP树的行为 https book cakephp org 2 0 en cor
  • jQueryUI 操作可拖动克隆

    编辑 我把这个问题删掉 然后把它放在 看看它是如何被改变的原来的而不是新的http jsfiddle net mikkelbreum DBG5q http jsfiddle net mikkelbreum DBG5q 看看拖动的助手如何改变
  • Jquery Draggable - 如何动态创建一个新的可拖动 div,然后可以拖动?

    我正在使用 jquery 创建一个可拖动和可放置的日程安排器 当作业从未分配的列拖到小时时间段中时 原始的可拖动项目将被删除 并且新的 div 会被放置到页面中 其中包含作业详细信息 这个新创建的 div 代码块包含使其可拖动的所有参数 当
  • 在 JQueryUI 小部件的 QUnit 测试中测试可见性

    这对于其他人来说可能是显而易见的 但我没有通过搜索找到它 所以在这里发布问题和一个可能的答案 背景 使用自定义 JQuery UI 小部件小部件工厂 http jqueryui com widget 在小部件中 某些元素根据其他数据 选项隐
  • 如何动态选择 jQuery ui 选择菜单中的选项?

    将菜单从常规选择更改为 jQuery 选择菜单后 我无法再以编程方式选择其中的选项 有没有办法做到这一点 选择的代码是 假设ListId是列表的实际Id ListId val value 该插件的激活方式如下 ListId selectme
  • 为什么 IE 不将

    我正在运行这个示例脚本 http jsfiddle net KsV2F 2 使用IE var select select var button button button click function var option
  • JQuery UI Selectable 插件:当 div 溢出时使滚动条不可选择

    我有一个 div 设置为overflow auto 该 div 的内容是可选择的 使用 jQuery UI 当 div 溢出并出现滚动条时 滚动条本身变为可选择状态 因此滚动效果不佳 在 FF Chrome 中 我可以滚动 div 但我得到

随机推荐