Перемещаемое взаимодействие, не работающее на сотовый телефон

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> 

ДИВ Я двигаюсь имеет 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 дал большой ответ, но если вы хотите иметь дело с щелчком мыши и переместить событие в то же время, этот код может быть таким:

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

 
/iPad|iPhone|Android/.test(navigator.userAgent) && (function($) { 
 
\t var proto = $.ui.mouse.prototype, 
 
\t _mouseInit = proto._mouseInit; 
 
\t $.extend(proto, { 
 
\t  _mouseInit: function() { 
 
\t   this.element 
 
\t   .bind("touchstart." + this.widgetName, $.proxy(this, "_touchStart")); 
 
\t   _mouseInit.apply(this, arguments); 
 
\t  }, 
 
\t  _touchStart: function(event) { 
 
\t   this.element 
 
\t   .bind("touchmove." + this.widgetName, $.proxy(this, "_touchMove")) 
 
\t   .bind("touchend." + this.widgetName, $.proxy(this, "_touchEnd")); 
 

 
\t   this._modifyEvent(event); 
 

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

 
\t   //return false;   
 
\t  }, 
 
\t  _touchMove: function(event) { 
 
\t  \t moveFlag = 1; 
 
\t   this._modifyEvent(event); 
 
\t   this._mouseMove(event); 
 

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

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