Question

我目前正在使用jquery mobile进行一个项目，我做了一个div draggable。拖动交互完美无缺，直到我在Samsung S3 mini上打开网站。

这是我的头脑：

<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>`

这是拖动互动的脚本：

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

我正在移动的div有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

这很容易解决。

您唯一需要做的就是添加一些额外的JavaScript。它将扩展触摸事件的经典 jQuery 实现。我是根据我过去对这个问题的经验来讨论这个问题，可以在 jsFiddle 示例中进行测试：http://jsfiddle.net/Gajotres/zeXuM/

在您的代码中包含此javascript，它应该有效：

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

此示例中使用的touchFix插件的原作者是Oleg Slobodskoi。

Answer 2

是的，Gajotres给出了一个很好的答案，但如果你想同时处理点击和移动事件，代码可能是这样的：

＆＃13;

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

＆＃13;

可拖动的互动不适用于手机

2 个答案: