Accueil » Dossiers » Tutoriaux » DHTML, Ajax, Drag and Drop : Dynamisez votre site Internet ! » Page 12

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

Par GuillaumeB

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.

<html><head><script language= »javascript » src= »dom-drag.js »></script></head><body><img id= »zebulon » src= »image.png » style= »position: relative; » /><script type= »text/javascript »>Drag.init(document.getElementById(« zebulon »));</script></body></html>

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.

<html><head><script language= »javascript » src= »dom-drag.js »></script></head><body></p><p id= »cadre » style= »left:20px; top:20px;border:1px solid#333;position:relative;padding:10px;width:350px; »>Chers lecteurs de Zebulon.fr<br/>Ceci est un texte que nous glissons sur la page. Celui-cise trouve dans un DIV.</p><p><script type= »text/javascript »>Drag.init(document.getElementById(« cadre »));</script></body></html>

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

5 Commentaires
0

Vous aimerez aussi

S’abonner
Notifier de
guest
5 Commentaires
plus ancien
plus récent Le plus populaire
Commentaires en ligne
Voir tous les commentaires
lucifer

J’aimerai savoir (l’exemple 3b) comment faire en sorte que les éléments qui ont pour class "exeception" ne puissent pas posséder l’effet du drag and drop ?

En effet si dans notre div, on a un champ input (par exemple) eh bien on ne peut pas remplir ce champs.

Sinon c’est un très bon tuto 😛

Anonyme

Tous simplement, comment faire une fonction qui mettent fin à "Drag.init" ?

je vais faire un onclick="stop_Drag();"

Mais comment faire ?

Glups

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

Glups
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)

dan4

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.

5
0
Nous serions ravis d'avoir votre avis, laissez un commentaire !x
()
x
More in Tutoriaux
Tutoriel VirtualBox : créer une machine virtuelle

Utilisation de la machine virtuelle L'installation terminée, nous disposons maintenant d'une machine virtuelle parfaitement fonctionnelle. Avant de terminer ce tutoriel,…

Close