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).

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

Solution 2

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.

Solution 3

Expanding on @mbeedub's solution, here's my own solution. In my case, I need the value of ui.position on stop. If the drag is reverted, then I need to return the object to its original position. Unfortunately, jQuery UI does not update the position property after the revert animation is run. Fortunately, there is an originalPosition property. So as long as I can detect reverted state (in this case, via classname), I'm ok!

function updatePosition (position) {
  /* Posting position to server */
}

element.draggable({

  drag: function (event, ui) {
    updatePosition(ui.position);
  },

  revert: function (droppable) {
    return !droppable && element.addClass('ui-draggable-reverted');
  },

  stop: function (event, ui) {
    if (element.is('.ui-draggable-reverted')) {
      updatePosition(ui.originalPosition);
      element.removeClass('ui-draggable-reverted');
    } else {
      updatePosition(ui.position);
    }
  }
});