Saturday 15 March 2014

jquery - Draggable interaction not working on cellphone -


I am currently working on a project with jquery mobile and I have made a divisor until I website Drag the conversation up to your Samsung S3 Mini until the conversation works perfectly.

This is my head:

  & lt; Meta name = "viewport" content = "width = device-width, initial-scale = 1" /> & Lt; Link rel = "stylesheet" href = "themes / florida_tech.min.css" /> & Lt; Link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" /> & Lt; Script src = "http://code.jquery.com/jquery-1.9.1.min.js" & gt; & Lt; / Script & gt; & Lt; Script src = "http://code.jquery.com/ui/1.10.3/jquery-ui.js" & gt; & Lt; / Script & gt; & Lt; Script src = "http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js" & gt; & Lt; / Script & gt; `  

This is a script for drag interaction:

  & lt; Script & gt; $ (Window) .load (function () {$ ("#draggable") .draggable ({axis: "x"})}}; & lt; / script & gt;   

The path I'm taking is ID id = draggable:

  
data-role = "content" style = "margin: 0 px; padding: 0px; limit : 0px "> gt; id id =" draggable "class =" draggable ui-widget-content "style =" position: relative; height: 347px ">
gt; & lt; img src =" style / pic.png "alt =" Map of parking lot "/>

It can be easily fixed.

I am talking to this problem with my previous experience and on this jsFiddle example:

This code can be included in your code And it should work:

  // This mobile device / iPad_iPhone; One fix for Android /.test (navigator.userAgent) & amp; Amp; (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, argument);}, _touchStart: function {event.element.bind ("touchmove." + This.widgetName, $ .Proxy ( This "_touchMove") .bund ("touchend." + This.widgetName, $ .proxy (this, "_touchEnd"); this._modifyEvent (event); $ (document) .trigger ($ Event. Mouseup "); / mouse re-set flag in ui.mouse._mausdown (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);   

The textbook plugin used in this example is the original author.

No comments:

Post a Comment