jquery-draggable

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:

( NOTE: Some have asked similar questions, but were too specific and yielded no usable answers ) jQuery UI's draggable widget has options for snapping to a grid, but no way to set what the grid is relative to. For example, we've got a clearly defined 20x20 grid in our drop target. A drag item that starts at 0,0 within the drop target will snap in correspondence with the grid. But a drag item that starts at a different location, or outside the drop target, will not line up with that grid. http://jsfiddle.net/FNhFX/5/ HTML: <div class="drop-target"> <div class="drag-item">Drag me</div> <div