web-dev-qa-db-fra.com

jQuery UI Draggable ne fonctionne pas sur les appareils iOS

J'utilise .draggable (partie de l'interface utilisateur jQuery) pour permettre aux utilisateurs de déplacer des éléments dans le cadre d'une simple application Web. Il fonctionne très bien sur tous les derniers navigateurs de bureau pour OSX et Windows (sauf Windows Safari, où il déplace uniquement les éléments verticalement pour une raison quelconque).

Le problème majeur que j'ai, c'est qu'il ne fonctionne pas sur Safari IOS (qui est à l'origine le ciblage de l'application)).

Y a-t-il une raison de compatibilité qui ne fonctionne pas?

Existe-t-il une autre manière d'obtenir le même effet?

Le site de test sur lequel je l'exécute est http://www.pudle.co.uk/mov/draggable.html et j'ai également créé un jsfiddle - http://jsfiddle.net/t9Ecz/ .

Tout aide très apprécié, bravo.

jqueryjquery-uidraggablejquery-ui-draggable
31
sam

Les appareils tactiles comme l'iPhone n'ont pas tous les événements courants liés à la souris auxquels nous sommes habitués dans les navigateurs de bureau. Il comprend: mousemove , mousedown , mouseup , entre autres.

Donc, la réponse courte est, vous devrez utiliser une solution qui a en tête les homologues "événements tactiles" pour ces "événements souris" ci-dessus: touchstart , touchmove , touchend ou touchcancel .

Jetez un œil à ceci: https://github.com/furf/jquery-ui-touch-punch

Vous pourriez également être intéressé par jQuery mobile .

J'espère que c'est un début où vous pourrez trouver une solution appropriée à vos besoins.

59
Zheileman

Je viens de résoudre ce problème en utilisant https://github.com/furf/jquery-ui-touch-punch c'était presque une goutte de solution parfaite, mais j'ai eu un problème où en faisant glisser mon élément déplaçable autour, l'écran continuerait à défiler de façon imprévisible si la page était plus grande que la fenêtre d'affichage.

J'ai résolu ce problème en forçant le window.scrollTop & scrollLeft à rester le même pendant le glissement, c'est-à-dire:

    var l_nScrollTop = $(window).scrollTop();
    var l_nScrollLeft = $(window).scrollLeft();
    $('#draggable_image').draggable({
        start: function() {
            l_nScrollTop = $(window).scrollTop();
            l_nScrollLeft = $(window).scrollLeft();
        },
        drag: function() {
            $(window).scrollTop(l_nScrollTop);
            $(window).scrollLeft(l_nScrollLeft);
        }
    });
14
Jasdeep Gosal