Sortable and Draggable Jquery UI on Mobile

as seen in http://jsfiddle.net/uJcB7/218/

by lovromar

HTML

<div id="additionalFitFeatures">
<ul id="sortable">
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
    <li>Item Four</li>
    <li>Item Five</li>
    <li>Item Six</li>
</ul>
</div>

CSS

#additionalFitFeatures{
    width:230px; 
    height:100px;
    vertical-align:top;
    clear:both;
}

#sortable { list-style-type: none; margin: 0; padding: 0; }
#sortable li { margin: 3px 3px 3px 0; padding: 2px; float: left; width:auto; height:auto; font-size: 12px; text-align: center; cursor:move;
border:1px solid #aaa; border-radius:5px; background-color:#eee;}

JavaScript

/**
 * .addTouch();
 *
 * .addTouch is a plugin for jQuery to convert touch events into simulated mouse events
 * Most of jQuery UI is supported. See the proof of concept here:
 *
 *              http://spaceyraygun.net/mobile/jquery-ui-iphone.html
 *
 * The original code was altered slightly because it would simulate mouse events on every
 * element which blocked native events like scrolling and zooming.
 *
 * To use this, simply call .addTouch() to a jQuery object and the events will be attached
 * to those results only.
 *
 * @plugin_author: jason kuhn (http://jasonkuhn.net)
 * @original_author: ross boucher (http://rossboucher.com/2008/08/19/iphone-touch-events-in-javascript/)
 */

;(function($){
        $.iPhone = {
                init: function()
                {
                        $(window).bind('orientationchange',$.iPhone.updateOrientation);
                        this.updateOrientation();
                        $('body').css({'min-height':'420px','min-width': '320px'});
                },
                
                orientation: 'portrait',
                updateOrientation: function()
                {
                        this.orientation = (window.orientation === 0 || window.orientation == null || window.orientation === 180) ?  'portrait' : 'landscape';
                        $('body').attr('orient',this.orientation);
                        setTimeout($.iPhone.hideURL,100);
                },
                
                hideURL: function()
                {
                        window.scrollTo(0, 1);
                        setTimeout(function(){
                                window.scrollTo(0, 0);
                        }, 0);
                },
                
                preloadImages: function(images)
                {               
                        $(images).each(function(key,val){
                                (new Image()).src = val;                        
                        });
             ...