jquery-ui – 添加一个函数到jQuery draggable还原“事件”

前端之家收集整理的这篇文章主要介绍了jquery-ui – 添加一个函数到jQuery draggable还原“事件”前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我拥有的:

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

我需要的:

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

问题:

“还原”是参数而不是一个事件,所以在恢复发生时我遇到很大的困难才能触发所需的CSS更改。

我的代码

$('#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;
     }
  }

语境:

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

我的问题:

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

解决方法

事实证明,还原可以接受一种方法。看到这个完整的例子:
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,看看你的问题是否在那里。

原文链接:https://www.f2er.com/jquery/182401.html

猜你在找的jQuery相关文章