jQuery ui.draggable event/status on revert

Question

Is there a way to get information if an element that's draggable is reverted? I'm stuck on this. I want to make an element droppable again but only if the draggable that was lying there is moved elsewhere (meaning doesn't revert).

Thanks in advance.

Kind regards, flo

Answer 1

Doesn't looks like jQuery UI has support for it so you could add it yourself like this:

$.ui.draggable.prototype._mouseStop = function(event) {
    //If we are using droppables, inform the manager about the drop
    var dropped = false;
    if ($.ui.ddmanager && !this.options.dropBehaviour)
     dropped = $.ui.ddmanager.drop(this, event);

    //if a drop comes from outside (a sortable)
    if(this.dropped) {
     dropped = this.dropped;
     this.dropped = false;
    }

    if((this.options.revert == "invalid" && !dropped) || (this.options.revert == "valid" && dropped) || this.options.revert === true || ($.isFunction(this.options.revert) && this.options.revert.call(this.element, dropped))) {
     var self = this;
     self._trigger("reverting", event);
     $(this.helper).animate(this.originalPosition, parseInt(this.options.revertDuration, 10), function() {
      event.reverted = true;
      self._trigger("stop", event);
      self._clear();
     });
    } else {
     this._trigger("stop", event);
     this._clear();
    }

    return false;
}

Would allow you to do this:

$(document).ready(function($) {
    $('#draggable').draggable({
     revert: true,
     reverting: function() {
      console.log('reverted');
     },
     stop: function(event) {
      if (event.reverted) {
       console.log('reverted');
      }
     }
    });
});

Answer 2

Did you ever get this working?

It looks like exactly what I need too. However I can never seem to get the stop: function to trigger on reverted

i.e.

stop: function(event) {
            if (event.reverted) {
                    console.log('reverted');
            }
    }

event.reverted never returns true even when the draggable has reverted (as tested in firebug).

Thanks

Answer 3

I found out that there is away to get information about whether an object has reverted or not. It's built into jQuery but not that well documented apparently.

Essentially it's done via using a callback function for the revert option of a draggable object.

Something like the following:

$(".myselector").draggable(
{
  revert: function(droppableObj)
  {
     //if false then no socket object drop occurred.
     if(droppableObj === false)
     {
        //revert the .myselector object by returning true
        return true;
     }
     else
     {
        //droppableObj was returned,
        //we can perform additional checks here if we like
        //alert(droppableObj.attr('id')); would work fine

        //return false so that the .myselector object does not revert
        return false;
     }
  }
});

See http://www.agilepro.com/blog/2009/12/while-this-functionality-is-built-into.html for more details.