ElementDeplacable

Un objet JavaScript
de déplacement d’élément par glisser-déposer

Cet objet fait apparaître un élément déplaçable à la souris par glisser-déposer. L’élément peut apparaître à proximité du curseur de la souris ou à un emplacement déterminé de la fe­nê­tre du navigateur. Une méthode permet de masquer l’élément. Voici le prototype, seul le 1er paramètre est obligatoire :

ElementDeplacable (idElement, fading, distanceCurseurX, distanceCurseurY,
          positionX, positionY)
	

Télécharger l’objet avec fichier d’exemple (.zip)

Utilisation

1 – Insérer l’objet ElementDeplacable dans l’élément head de la page :

<script src="objet-element-deplacable.js"
          type="text/javascript"></script>
		

2 – Définir l’élément à déplacer dans le code HTML, ici une image placée dans une DIV ; l’élément doit être identifié par un attribut id :

<div id="a_deplacer">
     <img src="image.jpg" width="30" height="30" alt="">
</div>
	

3 – Créer une instance de l’objet ElementDeplacable placée dans le code HTML après la définition de l’élément à déplacer. La variable JavaScript doit porter le nom de l’attribut id de l’élément correspondant, comme a_deplacer dans notre exemple :

var a_deplacer = new ElementDeplacable ("a_deplacer", 1, 10, 10)
	

Dans cet exemple, il y aura un effet de fading et l’élément apparaîtra à 10 pixels du cur­seur de la souris horizontalement et verticalement.

4 – Afficher et masquer l’élément, ici depuis 2 liens :

<a href="#" onclick="a_deplacer.afficher()"> … </a>
<a href="#" onclick="a_deplacer.masquer()"> … </a>
	

À savoir

Paramètres
Le paramètre idElement est obligatoire
idElement Chaîne ID de l'élément déplaçable
fading Booléen avec (1) ou sans (0) effet de fading, à 0 par défaut
distanceCurseurX
distanceCurseurY
Entiers distances horizontale et verticale d’apparition par rapport au curseur de la souris (pixels), à 0 par défaut
positionX
positionY
Entiers positions horizontale et verticale d’apparition par rapport au sommet et à la gauche de la fenêtre
Propriété
nomObjet.on Booléen vaut true si l’élément est affiché, false sinon
Méthodes
afficher() Affichage de l’élément
masquer() Masquage de l'élément

imprimer

télécharger

haut de page

François Delègue