Prise en charge du curseur jQuery UI Touch & Drag/Drop sur les appareils mobiles

Question

J'ai déjà stylisé et implémenté un slider jQuery UI dans un projet. Bien qu'il soit réactif, le curseur ne réagit pas au toucher et au déplacement. Au lieu de cela, vous devez toucher l'endroit où vous voulez que le curseur se déplace. J'aimerais éviter de passer à l'interface utilisateur mobile de jQuery, qui prend en charge le toucher et le glisser, car nous utilisons déjà largement l'interface utilisateur (non mobile) de jQuery.

La fonctionnalité que nous voulons : Aquí
Ce que nous utilisons : Aquí

Sur un ordinateur de bureau, vous ne pouvez pas faire la différence. Sur un appareil mobile, elle est apparente.

Quelqu'un sait-il comment ajouter ce support à jquery UI ?

$("#videographers").slider({
  value: 2,
  min: 1,
  max: 3,
  step: 1,
  slide: function(event, ui) {
    return calcTotal(ui.value);
  }
});

Answer 1

L'interface utilisateur de jQuery ne prend pas en charge le tactile. Vous devez l'utiliser avec jQuery-ui touch punch .

Il suffit d'ajouter le script après jQuery ui :

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>

Vous pouvez également utiliser cdnjs :

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>

Note : Mieux vaut donner ce référentiel une étoile sur Github.

Answer 2

Vous pouvez simplement lier ce js.

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>

Merci.

Answer 3

Si vous êtes dans Wordpress vous pouvez utiliser ce code dans functions.php :

add_action( 'wp_head', function () {

    // jquery.ui.touch-punch
    wp_enqueue_script( 'jquery.ui.touch-punch', '//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js', [], '0.2.3',false );

}, 999 );