Déplaçable jQuery sur android, Phonegap

J'utilise un script mais oublier d'où je le prends:

 *
* Copyright 2011, Dave Furfero
* Dual licensed under the MIT or GPL Version 2 licenses.
*
* Depends:
*  jquery.ui.widget.js
*  jquery.ui.mouse.js
*/
(function(b){b.support.touch="ontouchend" in document;if(!b.support.touch){return;}var c=b.ui.mouse.prototype,e=c._mouseInit,a;function d(g,h){if(g.originalEvent.touches.length>1){return;}g.preventDefault();var i=g.originalEvent.changedTouches[0],f=document.createEvent("MouseEvents");f.initMouseEvent(h,true,true,window,1,i.screenX,i.screenY,i.clientX,i.clientY,false,false,false,false,0,null);g.target.dispatchEvent(f);}c._touchStart=function(g){var f=this;if(a||!f._mouseCapture(g.originalEvent.changedTouches[0])){return;}a=true;f._touchMoved=false;d(g,"mouseover");d(g,"mousemove");d(g,"mousedown");};c._touchMove=function(f){if(!a){return;}this._touchMoved=true;d(f,"mousemove");};c._touchEnd=function(f){if(!a){return;}d(f,"mouseup");d(f,"mouseout");if(!this._touchMoved){d(f,"click");}a=false;};c._mouseInit=function(){var f=this;f.element.bind("touchstart",b.proxy(f,"_touchStart")).bind("touchmove",b.proxy(f,"_touchMove")).bind("touchend",b.proxy(f,"_touchEnd"));e.call(f);};})(jQuery);

Il travail parfait avec jquery-ui. U suffit de l'ajouter à votre code html comme bibliothèque js

OriginalL'auteur user3111850

J'ai utilisé un mélange de solutions ci-dessus, et a réalisé qu'il aidait avec les éléments déplaçables, mais il fait aussi quelques éléments dans mon projet sans possibilité de déclencher des événements click sur eux, parce que le code ci-dessus a été la prévention de touchend événements. J'ai résolu ce problème. Ma version conserve déplaçable d'éléments de travail et conserve également la capacité d'autres éléments d'un document pour recevoir des événements de clic:

(function() {
function init() {
var mouseEventTypes = {
touchstart : "mousedown",
touchmove : "mousemove",
touchend : "mouseup"
};
for (originalType in mouseEventTypes) {
document.addEventListener(originalType, function(originalEvent) {
if(originalEvent.type == 'click')
return;
if (originalEvent.type != 'touchstart' && originalEvent.type !='touchend'){
originalEvent.preventDefault();
}
event = document.createEvent("MouseEvents");
touch = originalEvent.changedTouches[0];
event.initMouseEvent(mouseEventTypes[originalEvent.type], true, true, window, 0, touch.screenX, touch.screenY, touch.clientX, touch.clientY, touch.ctrlKey, touch.altKey, touch.shiftKey, touch.metaKey, 0, null);
originalEvent.target.dispatchEvent(event);
event.preventDefault();         
});
}
}
init();
})();

Peut-être que cela aidera quelqu'un avec un problème similaire. Ce problème avec déplaçable éléments arrivait que sur mon Galaxy Tab GT-P5110, la version Android 4.0.4.

OriginalL'auteur Andrej Lučanský

Comme une extension des Couches de réponse:

J'ai essayé de son extrait de code sur une application que je suis bâtiment pour les appareils Android. Il compile bien et je suis en mesure de faire glisser (dans mon cas, un carré autour, cependant la touchmove souris type d'événement ne se déclenche pendant 2 secondes puis s'arrête.

Cela donne l'impression que l'objet n'est pas déplaçable, cependant sur la libération, l'objet est déplacé à cet endroit.

Pour résoudre ce une simple ligne de code est nécessaire à l'intérieur de l'écouteur d'événement:

    <script type="text/javascript" charset="utf-8">
//Wait for PhoneGap to load
//
document.addEventListener("deviceready", onDeviceReady, false);
//PhoneGap is ready
//
function onDeviceReady() {
$(".shape").draggable();
var mouseEventTypes = {
touchstart : "mousedown",
touchmove : "mousemove",
touchend : "mouseup"
};
for (originalType in mouseEventTypes) {
document.addEventListener(originalType, function(originalEvent) {

originalEvent.preventDefault();

        event = document.createEvent("MouseEvents");
touch = originalEvent.changedTouches[0];
event.initMouseEvent(mouseEventTypes[originalEvent.type], true, true,
window, 0, touch.screenX, touch.screenY, touch.clientX,
touch.clientY, touch.ctrlKey, touch.altKey, touch.shiftKey,
touch.metaKey, 0, null);
originalEvent.target.dispatchEvent(event);
event.preventDefault();
});
}
}
</script>

Le remplacement de preventDefault résout le problème avec le mousedown gestionnaire de pas de tir.

OriginalL'auteur jcrowson