Construct2

Fermer Explications

Fermer Débuter en vidéo

Fermer Images

Fermer Audio

Fermer Plugins

Fermer Commentaires

Fermer Interactions

Fermer Associations

Fermer Texte à trous

Fermer Choix audio

Fermer Puzzle

Fermer Tri d'images

Fermer Consignes

Fermer Construction

Fermer Dessin

Fermer Graphisme

Fermer Ordre

Fermer Quizz

Fermer Score

Fermer Animations

Fermer Fichiers

Fermer Masques

Fermer Données

Fermer En ligne

Fermer Générateurs

Notepad++

Fermer Les mains dedans

Visites

 228456 visiteurs

 22 visiteurs en ligne

Préférences
Se reconnecter
---

Votre nom (ou pseudo) :

Votre code secret

 Nombre de membres 4 membres


Connectés :

( personne )
Webmaster - Infos
Ecrire à Denis Galipot  Webmestre
Ajouter aux favoris  Favoris
Version mobile  Version mobile
Plugins 4.6

Le site des Plugins (extensions)

pour GuppY 4.6.xx.

wink
Les mains dedans - Glisser une image
rss Ces articles sont disponibles en format standard RSS pour publication sur votre site web:
http://galipot.org/html5/data/artfr.xml

Développer en HTML5 avec un éditeur comme Notepad++
"Glisser une image"
avec jQuery UI : "Moins coder, faire plus !"


Si vous avez pris connaissance des articles :
-Notepad++
-Structure d'un projet
Vous pouvez suivre, sans problème, l'article ci-dessous.

- - - - - - - - - - - - - - - - - - - - - - -
1/ Glisser une image, compatible interfaces tactiles : 
"Moins coder, faire plus !", c'est la devise de jQuery !


Cliquer pour ouvrir l'appli HTML5 :
glisser.jpg
Que fait l'application ?
L'image du chien est déplaçable. L'image de la niche est fixe.


Le zip du projet


Le fichier index.html  :
glisser03.jpg



Le fichier CSS style.css  :
glisser06
Les 4 images sont placées et leur taille adaptée grâce à ces définitions.

La position d'une image est donnée par rapport à son coin en haut à gauche :
coordonnees02c


Le fichier Javascript  leCode.js  :
glisser07

- $ : C'est l'alias de jQuery !
       On utilise la fonction .draggable()   de jQuery-ui.

L'image qui correspond à l'ID #lidImage1 est déclarée "glissable"...







Date de création : 12/06/2016 @ 14:09
Dernière modification : 03/07/2016 @ 10:09
Catégorie : Les mains dedans
Page lue 1794 fois

Imprimer l'article Imprimer l'article

Réactions à cet article

Personne n'a encore laissé de commentaire.
Soyez donc le premier !

^ Haut ^