向jQuery draggable revert“event”添加一个函数

Question

我拥有的：

我有一个可拖动的div，其revert参数设置为“invalid”。

我需要什么：

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

问题：

“revert”是参数而不是事件，因此在恢复发生时触发所需的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”用作事件时未成功：

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

我还试图让revert paramater尝试使用这个功能：

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更改？

Answer 1

事实证明，revert可以接受一种方法。请参阅此示例以获取完整示例： 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，看看你的问题是否存在。

Answer 2

你想做这样的事情：

 $('#peg_icon').draggable({
        revert: function (socketObj) {
        if (socketObj === true) {
            // success
            return false;
        }
        else {
            // reverting
            return true;
        }
    },
        scroll: false,
        stack: "#peg_icon",
        drag: function(event, ui) {
            $('#peg_icon').css('background-image','url(images/peg-icon-when-dragged.png)');
        }
    });

样本： http://jsfiddle.net/yTMwu/35/

希望这有帮助！