jQuery Sortable - cancel and revert not working as expected
Solution 1
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;
}
});
Solution 2
i created a demo for you here:
it seems to produce the output you expect.
i changed the receive callback method from this:
$(ui.sender).sortable('cancel');
to this:
$(ui.sender).sortable( "option", "revert", false );
hopefully, this is what you expected.
Related videos on Youtube
Richard
Lover of anything programming related, with a special interest in algorithms, micro-optimisation, performance, and systems architecture. Primarily focusing on Microsoft web-based applications using: c#, t-sql javascript, jquery, typescript html5, css3 Previous projects also include native ios work using xcode.
Updated on June 18, 2022Comments
-
Richard almost 2 years
Problem (jsFiddle demo of the problem)
I'm having some trouble with the
revert
setting when used in conjunction with thecancel
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
andreceive
callbacks, however if I add arevert
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 therevert
andcancel
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 therevert
occurring before thecancel
method. Is there a way to alter the life-cycle so if thecancel
method is executed,revert
isn't, and instead the item is immediately return to it's original location?-
Richard about 11 years@EaterOfCorpses, I've updated the links to point to a new jsFiddle which has the same problem. :)
-
Richard almost 12 yearsThanks for your answer @chrisvillanueva, sadly though there is a key reason to to why this won't work; the
receive
is only triggered after the revert animation has occurred, meaning that on the first drop, therevert
is still set to animate. Ideally I need to be able to cancel the revert, if acancel
is triggered during a certain event... the question is, which event? :) -
Rey Gonzales almost 12 yearsBeautiful in concept. I'll have to test it out.
-
Odys about 10 yearsI fail to understand what you did. How can one use this hotfix to animate the item to its original position, can you create a fiddle to show it off? Thank you
-
Titenis over 8 yearsThis throws error
TypeError: b.replace is not a function jquery.js:4:7342
-
Titenis over 8 years@Odys this allows you to alter the revert animation duration by certain conditions, for example, if something bad happens the item reverts to its original position instantly:
return 0;
, else use normal revert animationreturn 1000;
. This does not make the item return to original with normal (non instant) animation, though.