1

我目前正在使用 jquery mobile 开发一个项目，并且我制作了一个可拖动的 div。拖动交互非常有效，直到我在三星 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>
4

2 回答 2

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。

于 2013-06-20T19:11:12.123 回答
0

是的，Gajotres 已经给出了很好的答案，但是如果你想同时处理 click 和 move 事件，代码可能是这样的：

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

于 2014-11-11T10:23:30.223 回答