I have a draggable div with a revert parameter set as "invalid".
When the revert occurs I want to trigger a CSS change to another element.
"revert" is parameter rather than an event so I'm experiencing great difficulty in triggering the required CSS change when the revert occurs.
$('#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)');
}
});
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;
}
}
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.
How do I trigger a CSS change to another element when revert occurs on a drag?
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.