Draggable interaction not working on cellphone

Question

I am currently working on a project with jquery mobile and I made a div draggable. The drag interaction works perfectly until I open the website on my Samsung S3 mini.

This is my head:

<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="themes/florida_tech.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>`

This is the script for the drag interaction:

<script>
    $(window).load(function() {
      $( "#draggable" ).draggable({ axis: "x" });
    });
</script>

The div I am moving has ID = DRAGGABLE:

<div data-role="content" style="margin:0px; padding:0px; border:0px">
      <div id="draggable" class="draggable ui-widget-content" style="position:relative; height: 347px">
          <div style="z-index: 1; position: absolute; top: 0px; left: 0px"> 
                <img src="style/pic.png" alt="Parking Lot Map"/>             
          </div>
          <div style="background-color:green; width:17px; height:35px; z-index: 2; position: absolute; top: 31px; left: 81px "> &nbsp </div>
          <div style="background-color:green; width:17px; height:35px; z-index: 2; position: absolute; top: 31px; left: 102px "> &nbsp </div>

      </div>
 </div>

Answer 1

This can be easily fixed.

Only thing you need to do is to include some additional javascript. It will extend classic jQuery implementation of touch events. I am talking this from my past experience with this problem and it can be tested on this jsFiddle example: http://jsfiddle.net/Gajotres/zeXuM/

Include this javascript in your code and it should work:

    // This is a fix for mobile devices

/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 ) {
         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 );

Original author of a touchFix plugin used in this example is Oleg Slobodskoi.

Answer 2

yeah， Gajotres has given a great answer, but if you want to deal with click and move event at the same time, the code may be like this:

// This is a fix for mobile devices
var moveFlag = 0;

/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 ) {
	         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 ) {
	    	moveFlag = 1;
	        this._modifyEvent( event );
	        this._mouseMove( event );   

	    },
	    _touchEnd: function( event ) {
	        // dispatch the click event
	        if (moveFlag == 0) {
	        	    var evt = document.createEvent('Event'); 
		    evt.initEvent('click',true,true); 
                    this.handleElement[0].dispatchEvent(evt);
	        };
	        
	        this.element
	        .unbind( "touchmove." + this.widgetName )
	        .unbind( "touchend." + this.widgetName );
	        this._mouseUp( event ); 

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