Edit in JSFiddle

// save the old _mouseStop function
var _mouseStop = $.ui.sortable.prototype._mouseStop;

// now lets make a new one
$.ui.sortable.prototype._mouseStop = function( event ) {
console.dir( event );
// save copies of the current object and args
var _this = this,
    args = arguments;
    
// animate the item to its placeholder
_this.currentItem.animate( this.placeholder.position(), 450, "easeOutElastic",  
     function() {
         // call the original function when it's done
          _mouseStop.apply( _this, args );
     });   
}

    
// make it so, #1
$('#sortable').sortable().disableSelection();

<ul id="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>

#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0 0.4em 0.2em; padding-left: 1.5em; font-size: 1em; height: 1em; }
#sortable li span { position: absolute; margin-left: -1.3em; }