How can I revert a 'draggable' upon failed AJAX request?

Question

I have a draggable div, that needs to be dropped on a droppable. If it is dropped correctly, the droppable calls an AJAX request. If the draggable does not have a valid id or the AJAX request fails, the draggable should be reverted to it's original position. Is that something that can be done with jQuery?!

Any help is greatly appreciated!!

$("div.draggable").livequery(function(){
   $(this).draggable({
      revert: 'invalid',
      distance: 20
   })
});

$("#trash").droppable({
   tolerance: 'touch',
   drop: function(event, ui) 
   {    
      var item = ui.draggable;
      var id = item.attr('id');

      if (id) 
      {
         $.ajax( 
         {
            type: "POST",
            url: "delete.php",
            data: "id=" + id,
            success: function(html)
            { 
               if (html) 
               {
                  item.remove();
               } 
               else
               {
                  // FAILED AFTER AJAX
                  // is it possible to revert the draggable from here??
               } 
            }
         });      
      }
      else
      {
         // FAILED BEFORE AJAX
         // is it possible to revert the draggable from here??
      }
}
});

Answer 1

Im not too familiar with jquery - but id suggest using the prototype framework (along with scriptaculous) - within prototype you can definately achieve this effect.

Answer 2

If you can guess what it's original position was in the fail block, just use a selector to find it and the manipulation functions to remove it from its current position and move it to the old one.

If you need to, perhaps you can store the original position (parent and child-index) when it is dragged, then move it back there when it fails

Answer 3

Hi,

I have the same problem,

You can simply do:

item.css({"top":0, "left":0});

tip: draggable has relative position.