Sortable Rearrange Effects

Overriding internal sortable methods to animate the item rearrangement.

HTML

<h1 class="ui-widget">Default</h1>

<ul id="sortable1" class="ui-widget sortable">
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><input type="text" value="1" name="abc"/></li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>2</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>3</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>4</li>
   
</ul>

<h1 class="ui-widget">Rearrange Effects</h1>

<ul id="sortable2" class="ui-widget sortable">
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>

CSS

body {
    font-size: 0.8em;
}
.sortable {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 60%;
}
.sortable li {
    margin: 0 3px 3px 3px;
    padding: 0.4em;
    padding-left: 1.5em;
    font-size: 1.1em;
    height: 18px;
}
.sortable li span {
    position: absolute;
    margin-left: -1.3em;
}

JavaScript

(function ($) {

    // Extending the sortable interaction widget.
    $.widget("app.sortable", $.ui.sortable, {

        // Adds the new "effects" option, turned off by default.
        options: {
            effects: false
        },

        // Called internally by sortable when sortable
        // items are rearranged.
        _rearrange: function ( e, item ) {
            
            // Don't do anything special if the "effects" option is turned
            // off. Just call the original implementation of _rearrange().
            if ( !this.options.effects ) {
                return this._superApply( arguments );    
            }
            
            // Get the item we're running the effect on - it's the
            // element that's moving as a result of dragging another
            // element.
            var $item = $( item.item[ 0 ] );

            // Perform the effect by hiding the item, then calling the
            // original implementation of _rearrange() which actually
            // moves the item. Then we display it using a fade effect.            
            $item.hide();
            this._superApply( arguments );
            $item.show( "fade", 325 );
            
        }
        
    });

    // Create two sortables - one with effects turned on.
    $(function () {
        $( "#sortable1" ).sortable();
        $( "#sortable2" ).sortable({
            effects: true 
        });
        $( ".sortable" ).disableSelection();
    });
    
})(jQuery);