Comment faire pour que la largeur et l’élément changent lorsqu’un contact tactile est détecté sur un périphérique tactile

J’ai construit un curseur qui en modifie la largeur pour faire glisser l’élément dans la vue. Sur un bureau, il y a des boutons pour le faire. Je veux pouvoir faire fonctionner le curseur avec un événement de toucher et de glisser et qu’il soit lisse, comme iosslider. J’ai trouvé un moyen qui fonctionne, mais il est instable et ne répond pas toujours.

Mon code …

 $(document).bind("mobileinit", function(){$.extend($.mobile , {autoInitializePage: false})});   function clickNDrag(){ var mousePosition = event.pageX; $(this).bind('vmousemove',function(){ var mouseCurrentPosition = event.pageX; var positionNumber = mouseCurrentPosition - mousePosition; if(positionNumber > 0){ var widthAppend = 20; } else { var widthAppend = -20; } $(this).css({width: '+=' + widthAppend}); }); $(this).vmouseup(function(){ $(this).unbind('mousemove'); }); $(this).vmouseleave(function(){ $(this).unbind('mousemove'); }); } $(document).ready(function(){ $('.slider').bind('vmousedown',clickNDrag); });

Ce que j’ai fait, c’est que j’ai chargé jQuery Mobile et uniquement les événements tactiles de celui-ci.

Le script vérifie si la souris virtuelle se trouve, puis lorsqu’il se déplace, vérifie si elle s’est déplacée à droite ou à gauche, puis ajoute 20 pixels ou soustrait 20 pixels du curseur.

Comment pourrais-je faire cela de manière plus naturelle et en douceur?

Ce que j’avais auparavant ne fonctionnait tout simplement pas. J’ai donc commencé avec un script qui détectait la position x de la souris et modifiait la largeur en conséquence.

 var oldXPos = 0; var isDragging = false; $(document).mousemove(function(event) { if (isDragging) { var difference = event.pageX - oldXPos; $('#changeMe').css({width: '+='+ difference}); } oldXPos = event.pageX; $('#changeMe').mousedown(function(){isDragging = true;}) $('#changeMe').mouseup(function(){isDragging = false;}) });

Mais je voulais aussi le faire fonctionner sur un appareil tactile. Donc, je lie les événements pour toucher, déplacer et toucher. J’ai également dû changer l’auditeur pour la position de la souris.

  oldXPos = event.originalEvent.targetTouches[0].pageX;

Cela me permet d’obtenir la position actuelle de l’événement tactile. Cela a fonctionné correctement, mais vous deviez appuyer sur et sur le robinet et faire glisser pour que cela fonctionne. Je lie donc un auditeur d’événement à l’élément lui-même, une fois le dom prêt. Ainsi, chaque fois qu’il y a un événement touchstart, il en trouve la position.

 $(document).ready(function(){ $('#changeMe').bind('touchstart', function(event){ oldXPos = event.originalEvent.targetTouches[0].pageX; }); });

Cela fonctionnait parfaitement, sauf que vous deviez garder votre doigt sur une ligne droite sinon l’écran “défilerait”. J’ai donc dû empêcher les valeurs par défaut de touchmove lorsque vous étiez dans l’élément et le paramètre “réactiver” lorsque vous vous êtes arrêté.

 $(document).ready(function(){ $('#changeMe').bind('touchstart', function(event){ oldXPos = event.originalEvent.targetTouches[0].pageX; $('body').bind('touchmove', function(e){e.preventDefault()}); }); });

Le code final …

    Some Content