jQuery ui.draggable event/status on revert

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

Answers


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

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.


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

Need Your Help

Remove Datalist Dropdown Arrow in Chrome

html css html5 google-chrome

Chrome has apparently added a dropdown arrow to text inputs that reference a <datalist>. It's appearing in Chrome 34 (Canary) but not in the current stable build (Chrome 31).

How do I flip a UILabel horizontally?

cocoa-touch

I want to develop an iPhone application using the utility template, where the flip side is semi-transparent displaying the contents of the main view, flipped horizontally.