jQuery UI: Sortable Rearrange Effects

The sortable widget, provided by jQuery UI, allows users to visually sort elements. It's easy for the programmer to implement too, since we need only call the sortable constructor on some container element. This let's the user sort the child elements by dragging them around. During this process of rearranging the sortable elements, can we alter the visual presentation of the elements, as they're moved about? In other words, can we apply subtle visual effects to the items as they're rearranged?

It turns out, there's a way to do this. Have a peek at this demonstration. The key to providing this behavior is the _rearrange() method. We need to find a way in here so we can make the item fade in once it changes position. Keep in mind, we're applying effects to the item that's moved as a result of dragging another item around. It'll fade into it's new position instead of just popping into it. Let's take a look at a custom implementation of the _rearrange() method.

_rearrange: function ( e, item ) {
            
    if ( !this.options.effects ) {
        return this._superApply( arguments );    
    }
            
    var $item = $( item.item[ 0 ] );

    $item.hide();
    this._superApply( arguments );
    $item.show( "fade", 325 );
            
}

The first thing that's done in this implementation of the method is to check that it's enabled. Our customization of the sortable widget adds an effects option that when true, enables our behavior. It defaults to false, and this is especially important when overriding private widget methods — we should opt-in for the customized behavior. That way, the default widget behavior stays surprise-free.

The actual implementation is pretty straightforward. The $item variable holds the element we're going to animate. So, we hide it before making our call to the original _rearrange() method. This is done using _super(). At this point, the element has been relocated in the DOM structure. Now we can fade it into view.