Classe GDraggableObject

La classe GDraggableObject permet de rendre des éléments du DOM déplaçables à l’aide de la souris.

Consultez également la classe GDraggableObjectOptions qui gère les paramètres optionnels du constructeur de la classe GDraggableObject.

Voir un exemple de carte déplaçable.

Accès direct aux gestionnaires d’événements:

mousedown mouseup click dragstart drag dragend

constructeur GDraggableObject

Disponible depuis la version 2.59 de l’Api.

Signature du constructeur GDraggableObject :
var objectDrag = new GDraggableObject(element : élément du DOM, opts ? : GDraggableObjectOptions) .

Met en place des gestionnaires d’événement de sorte que l’élément source peut être glissé.

<script type="text/javascript">

   var objectDrag = new GDraggableObject(document.getElementById('dragMe')) ;

   /* Ici, l'élément HTML ayant pour id : dragMe,
   est rendu glissable*/

</script>

setDraggableCursor()

Disponible depuis la version 2.59 de l’Api.

Signature de la méthode setDraggableCursor:
setDraggableCursor(cursor : style de curseur) .

Définit le curseur à utiliser lorsque la souris survole l’élément glissable.

<script type="text/javascript">

   var objectDrag = new GDraggableObject(document.getElementById('dragMe')) ;

   /* Ici, l'élément HTML ayant pour id : dragMe,
   est rendu glissable*/

   objectDrag.setDraggableCursor('move');

</script>

setDraggingCursor()

Disponible depuis la version 2.59 de l’Api.

Signature de la méthode setDraggingCursor:
setDraggingCursor(cursor : style de curseur) .

Définit le curseur à utiliser lorsque l’élément est en cours de déplacement.

<script type="text/javascript">

   var objectDrag = new GDraggableObject(document.getElementById('dragMe')) ;

   /* Ici, l'élément HTML ayant pour id : dragMe,
   est rendu glissable*/

   objectDrag.setDraggableCursor('move');
   objectDrag.setDraggingCursor('wait');

</script>

moveTo()

Disponible depuis la version 2.89 de l’Api.

Signature de la méthode moveTo:
moveTo(point : GPoint) .

Place l’objet déplaçable aux coordonnées passées en paramètres via l’objet de type GPoint. La position est définie en pixel par rapport à la position de l’élément parent.
Le système de coordonnées utilisé est celui du DOM, c’est-à-dire que les coordonnées en X augmentent vers la gauche et en Y vers le bas.

<script type="text/javascript">

   var objectDrag = new GDraggableObject(document.getElementById('dragMe')) ;

   /* Ici, l'élément HTML ayant pour id : dragMe,
   est rendu glissable*/

   objectDrag.moveTo(new GPoint(100, 55));

   /* Ici, l'élément glissable est positionné au point (100 , 55),
   donc décalé de 100 pixels vers la gauche et de
   55 pixels vers le bas. */

</script>

moveBy()

Disponible depuis la version 2.89 de l’Api.

Signature de la méthode moveBy:
moveBy(size : GSize) .

Déplace l’objet glissable en fonction de l’objet de type GSize passé en paramètre.
Le système de coordonnées utilisé est celui du DOM, c’est-à-dire que les coordonnées en X augmentent vers la gauche et en Y vers le bas.

Gestion des événement liés aux objets déplaçables

mousedown()

Disponible depuis la version 2.84 de l’Api.

Déclenche un événement lorsque la souris est appuyée au-dessus de l’objet déplaçable.

mouseup()

Disponible depuis la version 2.84 de l’Api.

Déclenche un événement lorsque la souris est relâchée au-dessus de l’objet déplaçable.

click()

Disponible depuis la version 2.84 de l’Api.

Déclenche un événement lorsque l’objet déplaçable est cliqué.

dragstart()

Disponible depuis la version 2.84 de l’Api.

Déclenche un événement lorsque le déplacement de l’objet commence.

drag()

Disponible depuis la version 2.84 de l’Api.

Déclenche un événement tout au long du déplacement de l’objet.

dragend()

Disponible depuis la version 2.84 de l’Api.

Déclenche un événement le déplacement de l’objet s’arrête.

Laisser une réponse

Security Code: