Question

147

jQuery Sortable - cancel and revert not working as expected

rated 0 times [ 153] [ 6] / answers: 1 / hits: 17032 / 12 Years ago, tue, june 19, 2012, 12:00:00

Problem (jsFiddle demo of the problem)

I'm having some trouble with the revert setting when used in conjunction with the cancel method in the jQuery sortable. The cancel method, as documented in the jQuery Sortable documentation states:

Cancels a change in the current sortable and reverts it back to how it
was before the current sort started. Useful in the stop and receive
callback functions.

This works fine in both the stop and receive callbacks, however if I add a revert duration to the sortable connected list, it starts to act funny (see jsFiddle here).

Ideally, upon cancelling, the revert could simply not happen, or alternatively in a more ideal world, it would gracefully revert to it's original location. Any ideas how I can get the revert and cancel to play nice?

Expected

Drag from left list to right list

Drop item

Item animates to original location - or - immediately shifts to original location

Actual

Drag from left list to right list

Drop item

Item animates to new location, assuming sortable is successful

Item immediately shifts to original location, as sortable was cancelled

Clarification

The revert property moves the item to the location where the item would drop if successful, and then immediately shifts back to the original location due to the revert occurring before the cancel method. Is there a way to alter the life-cycle so if the cancel method is executed, revert isn't, and instead the item is immediately return to it's original location?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

monetm

Add To Favorites

Follow

Total Points: 615

Total Questions: 103

Total Answers: 119

Location: Finland

Member since Fri, Oct 21, 2022

2 Years ago

monetm questions

1 How to protect API routes in Next.js?

Fri, Feb 26, 21, 00:00, 3 Years ago

1 React props for passing color

Wed, Sep 9, 20, 00:00, 4 Years ago

1 How to catch the error when making fetch api request?

Sun, Jul 26, 20, 00:00, 4 Years ago

1 How to stop propagation on Link elements from React-Router-Dom?

Thu, Jul 2, 20, 00:00, 4 Years ago

1 Wait for an xpath in Puppeteer

Thu, Jun 11, 20, 00:00, 4 Years ago

View All

answered 12 Years ago elaine · Accepted Answer

After many hours for searching for a solution I decided the only way to achieve what I was trying to do was to amend the way in which the jQuery sortable plugin registered the revert time. The aim was to allow for the revert property to not only accept a boolean or integer, but also accept a function. This was achieved by hooking into the prototype on the ui.sortable with quite a lot of ease, and looks something like this.

jQuery Sortable Hotfix

$.ui.sortable.prototype._mouseStop = function(event, noPropagation)

{

    if (!event) return;



    // if we are using droppables, inform the manager about the drop

    if ($.ui.ddmanager && !this.options.dropBehaviour)

        $.ui.ddmanager.drop(this, event);



    if (this.options.revert)

    {

        var self = this;

        var cur = self.placeholder.offset();



        // the dur[ation] will not determine how long the revert animation is

        var dur = $.isFunction(this.options.revert) ? this.options.revert.apply(this.element[0], [event, self._uiHash(this)]) : this.options.revert;



        self.reverting = true;



        $(this.helper).animate({

            left: cur.left - this.offset.parent.left - self.margins.left + (this.offsetParent[0] == document.body ? 0 : this.offsetParent[0].scrollLeft),

            top: cur.top - this.offset.parent.top - self.margins.top + (this.offsetParent[0] == document.body ? 0 : this.offsetParent[0].scrollTop)

        }, !isNaN(dur) ? dur : 500, function ()

        {

            self._clear(event);

        });

    } else

    {

        this._clear(event, noPropagation);

    }



    return false;

}

Implementation

$('ul').sortable({

    revert: function(ev, ui)

    {

        // do something here?

        return 10;

    }

});