jQuery UI Draggable ne fonctionne pas sur les appareils ios
je suis à l'aide .draggable (partie de jQuery UI) pour permettre aux utilisateurs de déplacer des éléments dans le cadre d'une application web simple. Il fonctionne très bien sur tous les derniers navigateurs de bureau pour OSX & Windows (sauf Windows Safari, où il ne déplace les articles verticalement pour une raison quelconque).
le principal problème que J'ai est qu'il ne fonctionne pas sur Safari IOS (qui est où l'application est initialement prévue pour).
y a-t-il une raison de compatibilité pour laquelle cela ne fonctionne pas?
Est y a-t-il une autre façon d'obtenir le même effet?
Le site de test, je suis en cours d'exécution sur http://www.pudle.co.uk/mov/draggable.html et j'ai aussi fait un jsfiddle - http://jsfiddle.net/t9Ecz/.
toutes les aides beaucoup apprécié, santé.
2 réponses
les appareils basés sur le toucher comme l'iPhone ne possèdent pas tous les événements courants relié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 aurez besoin d'utiliser une solution qui a à l'esprit les "événements tactiles" homologues pour ces "événements souris" ci-dessus: évènements touchstart, touchmove, touchend ou touchcancel.
jetez un oeil à ceci: https://github.com/furf/jquery-ui-touch-punch
Vous pourriez être intéressé à jQuery mobile.
espérons que c'est un début où vous pouvez trouver une solution appropriée à vos besoins.
je viens de résoudre ce problème en utilisant https://github.com/furf/jquery-ui-touch-punch Il était presque une chute parfaite dans la solution, mais j'ai eu un problème où tout en traînant mon élément traînant autour, l'écran continuerait à défiler de façon imprévisible si la page était plus grande que le viewport.
j'ai résolu ce problème en forçant la fenêtre.scrollTop & scrollLeft de rester le même tout en faisant glisser, 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);
}
});