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-déposer en javascript

Jusqu’à présent nous sommes intéressés au simple glisser. Voyons un exemple de script permettant d’effectuer un déposer.
Pour ce faire, la librairie offerte par Yahoo! (Yahoo User Interface Library) est très riche.
Yahoo propose un JavaScript général utilities.js pour différentes actions de glisser-déposer, nous allons donc placer ce dernier entre les balises <head> de notre fichier HTML aux côtés des propriétés de style.
Dans cet exemple, nous allons glisser l’élément Source pour le déposer sur l’élément Cible. Chacun sera placé dans un <div> respectif. Enfin nous appellerons certaines variables du JavaScript principal. Voici une portion de notre code placée entre les balises <body>.

div id= »source » class= »dd-demo »><br />La Source</div></p><p id= »cible » class= »dd-demo »>La Cible</p><p><script type= »text/javascript »> (function() { var dd, dd2, clickRadius = 46, startPos, Event=YAHOO.util.Event, Dom=YAHOO.util.Dom; YAHOO.util.Event.onDOMReady(function() { var el = Dom.get(« source »); startPos = Dom.getXY(el); dd = new YAHOO.util.DD(el); dd.clickValidator = function(e) { var el = this.getEl(); var region = Dom.getRegion(el); var r = clickRadius; var x1 = Event.getPageX(e), y1 = Event.getPageY(e); var x2 = Math.round((region.right+region.left)/2); var y2 = Math.round((region.top+region.bottom)/2); Event.preventDefault(e); return ( ((x1-x2)*(x1-x2) + (y1-y2)*(y1-y2)) <= r*r ); }; dd.onDragDrop = function(e, id) { Dom.setXY(this.getEl(), Dom.getXY(id)); } dd.onInvalidDrop = function(e) { new YAHOO.util.Motion( this.id, { points: { to: startPos } }, 0.3, YAHOO.util.Easing.easeOut ).animate(); } dd2 = new YAHOO.util.DDTarget(« cible »); }); })();</script>

Quelques explications :
En ligne 13, le validateur permet de définir la zone qui sera déplaçable sur la page au clic de la souris. C’est la variable var r = clickRadius; qui trace un cercle autour du point Source. Lorsque l’utilisateur clique sur ce champ, les variables X1 et Y1 établissent l’endroit précis du clic de la souris. Par ailleurs, afin d’éviter toute confusion, nous ne souhaitons pas que le texte de la source puisse être sélectionné, c’est l’objet de la commande en ligne 20. Si l’utilisateur ne déplace pas la Source jusqu’à la Cible, la fonction dd.onInvalidDrop = function(e) (ligne 26), est activée (la Source retourne à son point initial).

Voir l’exemple 3c – 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