jQuery et écrans tactiles

Si vous voulez déplacer sur un écran tactile un élément avec la souris il faut aussi recourir à jQuery pour programmer facilement un "drag and drop" (glisser-déposer).
Attention le glisser-déposer de jQuery UI ne fonctionne qu'avec la souris.
Pour qu'il fonctionne aussi avec le doigt (donc sur écrans tactiles) il faut charger un greffon : jquery_touch_punch !

J'ai déjà évoqué ce "patch" dans le chapitre "jQuery UI : un plugin bien utile" dans ce tutoriel.

Tests

Déplacez le requin ou plongeur avec la souris (ou avec le doigt) !

Fonctionne aussi sur écrans tactiles (tablettes et smarphones). Essayez !

Le code HTML & CSS correspondant

... <script src ="jquery.js"></script> <script src ="jquery_ui.js"></script> <script src ="jquery_touch_punch.js"></script> </head> <body> ... <div style = "width : 90% ; height : 300px ; position : relative ; background-image: url(../images/fond3.jpg) ; background-size : cover ; margin : auto ; " > <img id ='plongeur' src ='../images/plongeur3.gif' style = "position : absolute ; top : 300px; left : 600px ; " > <img id ='requin' src ='../images/requin.gif' style = "position : absolute ; top : 10px; left : 10px ; " > </div> ...

Partie HEAD : je dois donc charger jQuery de base et jQuery UI. Mais aussi le fichier jquery_touch_punch.js car sans ce "greffon" certains outils jQuery UI tels la méthode draggable() ne fonctionnent pas sur les écrans tactiles.

Partie BODY : Une boîte positionnée en relatif ayant pour "background" un décor corallien.
Deux gifs animés positionnés en absolu.

Le script

Grâce au recours à jQuery il est d'une simplicité enfantine !

		$('img').draggable({containment : 'div'});
	

Il s'agit d'un simple "drag" mais limité à la boîte DIV.
Retour menu