Curseurs de l'interface utilisateur jQuery sur les appareils tactiles

95

Je développe un site Web en utilisant jQuery UI, et il y a plusieurs éléments sur mon site qui semblent incompatibles lorsqu'ils sont affichés sur des appareils à écran tactile; ils ne causent aucune erreur, mais le comportement n'est pas ce qu'il devrait être.

Les éléments en question sont des curseurs et des rangeliders tels que définis par jQuery UI; sur l'écran tactile, au lieu d'enregistrer une touche comme ramassant une poignée et un glissement comme faisant glisser la poignée sur le curseur, il fait simplement glisser la page Web entière sur le côté de l'écran. Cela fonctionne si vous appuyez sur la poignée, puis sur l'emplacement du curseur où vous voulez que la poignée se termine, mais c'est très lent et pas idéal. Des idées?

J'ai essayé de télécharger le plugin jqtouch, puis de l'attacher .touch([...])à tous les appels à slider () et rangeslider (), mais cela n'a pas fonctionné.

Merci!

MISE À JOUR: J'ai trouvé ce "patch" sur le site Web de l'interface utilisateur jQuery

http://bugs.jqueryui.com/ticket/4143

cela dit qu'il facilite le curseur sur iPhone, mais maintenant pour une autre question stupide: comment incorporer ce "patch" dans mon code? Dois-je simplement l'inclure au début du code comme un plugin?

jqcoder
la source

Réponses:

140

Cette bibliothèque semble offrir ce que vous recherchez:

https://github.com/furf/jquery-ui-touch-punch#readme

Il a également un exemple de code d'utilisation (ajoutez simplement le plugin):

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<script>
  $('#widget').draggable();
</script>
Dazbradbury
la source
28
Remarque aux masses: attachez-le à la poignée du curseur, pas au tout. (Pour le curseur jQuery qui serait$('.ui-slider-handle').draggable();
PaulSkinner
17
Maintenant, je peux déplacer le curseur sur toute la page !! C'est ridicule.
dezman
Je peux déplacer la poignée sur toute la page dans Firefox Mac. Je me demande si nous devons placer un conditionnel if (ipad | iphone) ... then draggable ().
Joe Hyde
13
Grattez mon commentaire original ci-dessus. Cela fonctionne simplement en incluant ce plug-in dans HEAD. Ajoutez le <script src> en n'ajoutant pas $ (selector) .draggable (); pour faire fonctionner les poignées de curseur.
Joe Hyde
6
Il vous suffit d'inclure le script touch punch et c'est tout. Comme @JoeHyde l'a dit dans son deuxième commentaire, il n'est pas nécessaire d'appeler .draggable () sur aucun élément. Incluez simplement le script et cela devrait fonctionner.
Jack Vial
22

Je voulais juste ajouter de nouvelles informations à ce sujet. Touch-punch fonctionnera bien pour les iPad et les appareils Android. Mais le curseur ne fonctionnera pas sur les appareils mobiles Windows, pour autant que je puisse le tester (avec les dernières versions de jquery ui & Touch punch)

Le correctif est assez simple, ajoutez simplement les règles CSS suivantes au .ui-slider-handle:

-ms-touch-action: none;
touch-action: none;

J'espère que cela t'aides

Stijn_d
la source
ne fonctionne pas pour moi? n'importe quel exemple de lien s'il vous plaît @Stijn_d
ShibinRagh
euh mais cela ruine le fonctionnement du poinçon tactile réel
user151496
Cela a résolu mon problème. Merci!
parker_codes
Ni travailler de moi sur un ordinateur portable Dell avec un écran tactile jsfiddle.net/jhtcqbqo
Jean-François Beauchamp
6

Comme @dazbradbury l'a suggéré, la bibliothèque touchpunch peut aider à traduire les événements de la souris en événements tactiles. Les paramètres de .draggable () limitent le mouvement du curseur afin qu'il ne puisse pas être déplacé au-delà de son parent de curseur.

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<script>
$(".ui-slider-handle").draggable({ 
    axis: "x",
    containment: "parent"
});
</script>

EDIT: Si vous utilisez déjà un curseur Jquery UI , il vous suffit d'inclure la bibliothèque touchpunch. N'appelez pas .draggable () pour le .ui-slider-handle car il écrasera la fonctionnalité existante.

DPH Trading Danish Plate House
la source
Cela a fonctionné pour moi. Le seul problème maintenant est que la région d'arrière-plan (lorsque range: "min" est défini) n'obéit pas à la position du curseur.
ejectamenta
Cela devrait être la réponse acceptée.
ionalchemist
3

J'ai eu le même problème. J'ai développé une interface utilisateur de curseur élaborée en s'appuyant sur le curseur de jQuery UI pour me rendre compte que cela ne fonctionne pas du tout sur mobile. J'ai essayé les suggestions répertoriées ici, mais comme j'ai une solution personnalisée basée uniquement sur jQuery UI Slider, cela n'a pas fonctionné.

Utilisez simplement noUiSlider .

Il fait toutes les fonctionnalités élaborées (et bien plus encore) comme celle que j'ai construite au-dessus du curseur de l'interface utilisateur jQuery. Il fonctionne à merveille sur les appareils mobiles et est également facile à coiffer.

Adam Karacsony
la source