Revert sortables
February 5th, 2007
I recently ran into a case where I needed to control when a sortable really was updated (it was not allowed for the list in question to become empty) and was a bit surprised when I found there was no support for this in the scriptaculous Sortable. Draggables have it, but Sortables use the Draggable revert method both when updating it's position, and not when truly reverting.
Furthermore, the Sortable updates its position in the hover-handlers, and thus "forgetting" it's original position in the change and update handlers.
To make the revert work we need to patch the hover-handlers to check for the revert-condition before updating the sortables position.
With it, you can use the "revert" option on Sortables in the same way as Draggables use it:
-
Scriptaculous.require( "dragdrop.js" );
-
Sortable.create('globallist',{revert: revert,dropOnEmpty:true,containment:['settinglist','globallist', 'reallist'],constraint:false});
-
Sortable.create('settinglist',{revert: revert,dropOnEmpty:true,containment:['settinglist','globallist', 'reallist'],constraint:false});
-
Sortable.create('reallist',{revert: revert,dropOnEmpty:true,containment:['settinglist','globallist', 'reallist'],constraint:false});
-
-
function revert (el, oldContainer, newContainer ) {
-
if ( !Element.hasClassName( el, newContainer.id ) ) {
-
return true;
-
}
-
return false;
-
}
Check out an example with three sortables where the revert condition is decided on the class of the sortable elements and the id of the container -> here