Tutoriels

DHTML, Ajax, Drag and Drop : Dynamisez votre site Internet !

Exemple de glisser

Comment cela fonctionne-t-il ? La réponse ne vous-t-elle pas évidente ? Avec du JavaScript bien sûr !

Voyons de quelle manière nous pouvons permettre à un élément d'une page d'être déplaçable au clic d'une souris. Ici, nous employons un JavaScript de la librairie de dynamicdrive.com.

La première étape consiste à placer le script dans la tête de votre document HTML de cette manière :
<head><script type="text/javascript" src="dom-drag.js"></script></head>
Ensuite, il suffit d'appeler la fonction Drag.init ( ) et de l'appliquer à l'élément que vous souhaitez pouvoir glisser à l'aide de la souris. Pour cela, nous utilisons un identificateur zebulon.  Voici notre page HTML très basique.

Notez que l'élément qui nous intéresse doit être en position relative, dans le cas contraire, le JavaScript ne fonctionnera pas.

Voir l'exemple 3a - Télécharger l'exemple

Ce qui est intéressant avec ce script c'est qu'il est aussi possible de faire glisser des blocs entiers de texte. Cela fonctionne de la même manière, c'est-à-dire en attribuant un identificateur à l‘élément <div> dans le code de la page.

Quelques explications :
Ici, le DIV est identifié par cadre (ligne 4). C'est sur ce dernier que la fonction Drag.init (ligne 10) opère sa magie.

Voir l'exemple 3b - Télécharger l'exemple

Vos commentaires
Laissez un commentaire !
  1. dan4 en tant qu'invité
    le 22 février 2012 à 15h09

    C'est super mais ça ne fait pas un vrai iframe.

    Je dois avoir un index avec un autre fichier en iframe ou include qui lui seul se charge quand je clique sur un élément du conteneur.

    répondre
  2. Glups en tant qu'invité
    le 12 avril 2009 à 21h39

    Glups a dit :Je n'ai pu faire fonctionner cette application qu'en remplaçant 200 par 0 (au niveau du test sur xhr2.status)
    Ensuite, impeccable.

    (Je parle de l'exemple 2c)

    répondre
  3. Glups en tant qu'invité
    le 12 avril 2009 à 21h36

    Je n'ai pu faire fonctionner cette application qu'en remplaçant 200 par 0 (au niveau du test sur xhr2.status)
    Ensuite, impeccable.

    répondre
Ecrire un commentaire