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

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

5
Poster un Commentaire

avatar
5 Fils de commentaires
0 Réponses de fil
0 Abonnés
 
Commentaire avec le plus de réactions
Le plus populaire des commentaires
0 Auteurs du commentaire
dan4Glups0lucifer Auteurs de commentaires récents
  S’abonner  
plus récent plus ancien Le plus populaire
Notifier de
lucifer
Invité
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
Invité
Anonyme

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

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

Mais comment faire ?

Glups
Invité
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
Invité
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
Invité
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.

Plus dans 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,…

Fermer