Geek Answers Handbook

Draggable jQuery on Android Phone

I'm having some problems when implementing jQuery Draggable http://jqueryui.com/demos/draggable/ on Android. I created the html code and tested it using my browser. Then I compiled it on build.phonegap.com. Having received .apk, I installed it on my xperia x8, which uses Android 2.2 Froyo. The application works well, but when I drag the object, it will not move. Is there something wrong with my method? Thanks

+5
source share
6 answers

This code displays touchstart, touchmoveand touchendthe relevant mouse events: There is still a bug with touchstart/ mousedownbecause the position can not be displayed directly.

My idea to fix this is to defer sending mousedownuntil it happens touchmove, and then send both mouse events with coordinates touchmove.

var mouseEventTypes = {
    touchstart : "mousedown",
    touchmove : "mousemove",
    touchend : "mouseup"
};

for (originalType in mouseEventTypes) {
    document.addEventListener(originalType, function(originalEvent) {
        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);
    });
}
+3
source

I use a few script, but forget where I get it:

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

It works great with jquery-ui. U just need to add it to your html code like js library for example

+2
source

...

            var mouseEventTypes = {
                touchstart : "mousedown",
                touchmove : "mousemove",
                touchend : "mouseup",
                click : clickEvent
            };

            for(originalType in mouseEventTypes) {
                document.addEventListener(originalType, function(originalEvent) {
                    if (originalEvent.type != 'click' && originalEvent.type != 'touchstart')
                        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();
                });
+1

, , , touchhend. . , :

(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();
})();

, - . Galaxy Tab GT-P5110, 4.0.4 Android.

+1

, / . , jQuery Mobile, , - .

0

:

, Android. , ( , ), touchmove 2 , .

, , .

, :

    <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>

Exiting the preventDefault function resolves the issue when the mousedown handler does not start.

0
source

More articles:


All Articles