Curseurs de l'interface utilisateur jQuery sur les appareils tactiles

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?

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>

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

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.

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.