Jquery 可拖动的交互在手机上不起作用

我目前正在使用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>

$（窗口）。加载（函数（）{
$（“#draggable”）.draggable（{轴：“x”}）；
});

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

这很容易解决

您唯一需要做的就是包含一些额外的javascript。它将扩展触摸事件的经典jQuery实现。我是根据我过去处理这个问题的经验来讨论这个问题的，它可以在这个

jsFiddle

示例中进行测试：

在代码中包含此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插件的原始作者是。

这很容易修复

您唯一需要做的就是包含一些额外的javascript。它将扩展触摸事件的经典jQuery实现。我是根据我过去处理这个问题的经验来讨论这个问题的，它可以在这个

jsFiddle

示例中进行测试：

在代码中包含此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插件的原始作者是。

是的，Gajotres给出了一个很好的答案，但如果您想同时处理单击和移动事件，代码可能如下所示：

//这是一个针对移动设备的修复程序
var-moveFlag=0；
/iPad | iPhone | Android/.test（navigator.userAgent）和&（function（$）{
var proto=$.ui.mouse.prototype，
_mouseInit=proto.\u mouseInit；
$.extend（proto{
_mouseInit:function（）{
这个元素
.bind（“touchstart.”+this.widgetName，$.proxy（this，“\u touchstart”）；
_mouseInit.apply（这个，参数）；
},
_touchStart：功能（事件）{
这个元素
.bind（“touchmove.”this.widgetName，$.proxy（this，“\u touchmove”））
.bind（“touchend.+this.widgetName，$.proxy（this，“\u touchend”））；
此事件（事件）；
$（document）.trigger（$.Event（“mouseup”）；//在ui.mouse中重置mouseHandled标志
这是一项活动；
//返回false；
},
_touchMove:功能（事件）{
moveFlag=1；
此事件（事件）；
此._mouseMove（事件）；
},
_touchEnd：功能（事件）{
//分派单击事件
if（moveFlag==0）{
var evt=document.createEvent（'Event'）；
evt.initEvent（'click'，true，true）；
this.handleElement[0].dispatchEvent（evt）；
};
这个元素
.unbind（“touchmove.”+this.widgetName）
.unbind（“touchend.+this.widgetName”）；
本._mouseUp（事件）；
moveFlag=0；
},
_modifyEvent:函数（事件）{
event.which=1；
var target=event.originalEvent.targetTouches[0]；
event.pageX=target.clientX；
event.pageY=target.clientY；
}
});
})（jQuery）是的，Gajotres给出了一个很好的答案，但是如果你想同时处理点击和移动事件，代码可能是这样的：


//这是一个针对移动设备的修复程序
var-moveFlag=0；
/iPad | iPhone | Android/.test（navigator.userAgent）和&（function（$）{
var proto=$.ui.mouse.prototype，
_mouseInit=proto.\u mouseInit；
$.extend（proto{
_mouseInit:function（）{
这个元素
.bind（“touchstart.”+this.widgetName，$.proxy（this，“\u touchstart”）；
_mouseInit.apply（这个，参数）；
},
_touchStart：功能（事件）{
这个元素
.bind（“touchmove.”this.widgetName，$.proxy（this，“\u touchmove”））
.bind（“touchend.+this.widgetName，$.proxy（this，“\u touchend”））；
此事件（事件）；
$（document）.trigger（$.Event（“mouseup”）；//在ui.mouse中重置mouseHandled标志
这是一项活动；
//返回false；
},
_touchMove:功能（事件）{
moveFlag=1；
此事件（事件）；
此._mouseMove（事件）；
},
_touchEnd：功能（事件）{
//分派单击事件
if（moveFlag==0）{
var evt=document.createEvent（'Event'）；
evt.initEvent（'click'，true，true）；
this.handleElement[0].dispatchEvent（evt）；
};
这个元素
.unbind（“touchmove.”+this.widgetName）
.unbind（“touchend.+this.widgetName”）；
本._mouseUp（事件）；
moveFlag=0；
},
_modifyEvent:函数（事件）{
event.which=1；
var target=event.originalEvent.targetTouches[0]；
event.pageX=target.clientX；
event.pageY=target.clientY；
}
});
})（jQuery）如果我不希望div返回其原始位置该怎么办。我只是想让它变得拖拉。我已经通读了代码，但我不知道如何让它只是拖动。如果我不想让div返回到它原来的位置怎么办。我只是想让它变得拖拉。我已经通读了代码，但我不知道如何使它只是拖动。