CODEWITHSUNDEEP
javascriptjquery-uijquery-ui-draggable
Isaac Kleinman
Isaac Kleinman

Reputation: 4392

JQuery UI Draggable Multiple revert Options

The JQuery UI draggable widget has a revert options which determines under what circumstances the dragged element should revert back to its initial location.

The documentation specifies that the string "invalid" may be provided in which case the dragged element reverts to its original location if not dropped on a droppable widget. Another option is to provide revert with a function which will determine whether the widget should revert when the dragging stops.

In my situation, I'd like both of these behaviors; I want the widget to revert if dropped on a non-droppable element, but I also want to do some on-the-fly custom validation, failure of which should result in a revert. How can I incorporate both of these functionalities?

Upvotes: 1

Views: 407

Answers (1)

blgt
blgt

Reputation: 8205

When revert is a function, the first argument passed to it is the droppable or sortable widget it was dropped on, if one exists, or false otherwise. For example:

$(elt).draggable({
    revert: function(dropped) {
        var result = false;
        // dropped can safely be typecast to boolean
        // if you want to call jquery functions on it check for "false" first
        result = customLogic || (dropped && $(dropped).is(".valid-droppable-class") ); 
        return result;
    }
});

Using revert:"invalid" is equivalent to revert: function(dropped) { return dropped; }

Upvotes: 1

Related Questions