`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 fenêtre du navigateur. Une méthode permet de masquer l’élément. Voici le prototype, seul le 1^er 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 curseur 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

Par défaut, sans indication des paramètres positionX, positionY, distanceCurseurX et distanceCurseurY, l’élément apparaît sous le curseur de la souris à 0 pixel de distance de celui-ci ;
Pour un placement par rapport au curseur de la souris, à une distance supérieure à 0 pixel, transmettre des valeurs positives dans les paramètres distanceCurseurX et distanceCurseurY ;
Pour un placement par rapport à la fenêtre, transmettre des valeurs dans les paramètres positionX et positionY, et transmettre 0 pour les distances au curseur de la souris distanceCurseurX et distanceCurseurY.

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

ElementDeplacable

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

Utilisation

À savoir

François Delègue

`ElementDeplacable`

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