Draggable

Attaching and detaching drag handlers

by Brian Duffey

HTML

<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>


<button type="button" id="attach">attach</button>
<button type="button" id="detach">detach</button>

CSS

ul {
    width: 300px;
    border: 3px solid #000;
    overflow: hidden;   
}

ul li {
    display: block;
    width: 30px;
    height: 30px;
    float: left;
    background: #f2d;
    border: 1px solid #f11;
    margin-right: 5px;  
}

JavaScript

var itemsContainer = $('ul');

window.detach = function() {
    itemsContainer.sortable('destroy');
}

window.attach = function() {

    itemsContainer.sortable({
        //revert: 100,
        axis: 'x',
        //containment: itemsContainer,
        //delay: 100,
        scroll: false
    }).disableSelection();

}

$('button').click(function() {
    window[this.id]();
});





/*
 * A bridge between iPad and iPhone touch events and jquery draggable, sortable etc. mouse interactions.
 * @author Oleg Slobodskoi  
 */
  /iPad|iPhone|Android/.test( navigator.userAgent ) && (function( $ ) {

var proto =  $.ui.mouse.prototype,
_mouseInit = proto._mouseInit;

$.extend( proto, {
    _mouseInit: function() {
        this.element
        .bind( "touchstart." + this.widgetName, $.proxy( this, "_touchStart" ) );
        _mouseInit.apply( this, arguments );
    },

    _touchStart: function( event ) {
        /* if ( event.originalEvent.targetTouches.length != 1 ) {
            return false;
        } */

        this.element
        .bind( "touchmove." + this.widgetName, $.proxy( this, "_touchMove" ) )
        .bind( "touchend." + this.widgetName, $.proxy( this, "_touchEnd" ) );

        this._modifyEvent( event );

        $( document ).trigger($.Event("mouseup")); //reset mouseHandled flag in ui.mouse
        this._mouseDown( event );

        //return false;           
    },

    _touchMove: function( event ) {
        this._modifyEvent( event );
        this._mouseMove( event );   
    },

    _touchEnd: function( event ) {
        this.element
        .unbind( "touchmove." + this.widgetName )
        .unbind( "touchend." + this.widgetName );
        this._mouseUp( event ); 
    },

    _modifyEvent: function( event ) {
        event.which = 1;
        var target = event.originalEvent.targetTouches[0];
        event.pageX = target.clientX;
        event.pageY = target.clientY;
    }

});

})( jQuery );