将函数添加到 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 可拖动恢复“事件” 的相关文章

随机推荐