Adding a function to jQuery draggable revert "event"

Question

What I have:

I have a draggable div with a revert parameter set as "invalid".

What I need:

When the revert occurs I want to trigger a CSS change to another element.

The problem:

"revert" is parameter rather than an event so I'm experiencing great difficulty in triggering the required CSS change when the revert occurs.

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)');     } }); 

What I've tried:

I've unsuccessfully attempted using "revert" as an event:

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

I've also unnsuccesfully tried to get the revert paramater to take this function:

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:

I'm dragging a div that when dragged, the background-image changes and when the drag reverts, the background-image is restored to its original state.

My question:

How do I trigger a CSS change to another element when revert occurs on a drag?

Answer 1

It turns out that revert can accept a method. See this for a complete example: http://jsfiddle.net/mori57/Xpscw/

Specifically:

$(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");       }     });   }); 

Hope this helps... I'm guessing that whatever you were trying to modify was the issue, not the attempt to use revert with a function call. Take a look again at what CSS you were trying to set, and see if maybe your issue was in there.