Drag drop avec DHTML

Généralités

<SCRIPT SRC=wz_dragdrop.js></SCRIPT>

La bibliothèque wz_dragdrop.js permet de faire du drag&drop au sein d'une page HTML directement avec DHTML.
Attention: Il faut l'inclure après le tag <BODY> sinon ça ne marche pas!

La seule chose à faire est d'appeler au chargement la fonction SET_DHTML avec en paramètres (séparés par une virgule) les valeurs des attributs ID (balise DIV) ou NAME (balise IMG) des objets qui doivent devenir déplaçables.

Exemple:

<SCRIPT>SET_DHTML("theCanvas"+SCALABLE, "titi"+COPY+5, "uml");</SCRIPT>

Points à connaitre

Options de SET_DHTML

Il y a plusieurs options possibles pour obtenir des comportements non standards. La syntaxe est originale: il faut concatèner (par +) le nom de l'objet à affecter avec une ou plusieurs constantes dont les noms sont en majuscules.

exemples d'options: HORIZONTAL, RESIZABLE ou SCALABLE (faire glisser en appuyant touche "majuscule"), CLONE, COPY+5, CURSOR_HAND, CURSOR_MOVE, TRANSPARENT, MAXOFFBOTTOM+10, REZET_Z)

Il faut toujours appeler la fonction SET_DHTML() même si sans arguments dès le chargement de la page.
On peut ajouter aux déplaçables un nouvel élément DIV par ADD_DHTML("mon_id") (Même syntaxe pour les options) Limitations: un objet à la fois, ne marche pas pour les images.

Manuel de référence: liste des options.

Si l'on passe en paramêtre à SET_DHTML() une option (exemple TRANSPARENT) sans id d'objet, tous les objets seront affectés.

API liste des propriétés et méthodes

On peut aussi interagir avec les objets en javaScript (après l'appel à SET_DHTML). Un objet global dd (drag-drop) est automatiquement créé, il contient un tableau dd.elements de tous les objets. dd.obj est l'objet en train d'être déplacé.

Trois syntaxes équivalentes permettent d'accéder aux objets

Accès aux propriétés et méthodes par:

Quelques propriétés (en lecture seule): x,y,w,h,name (sera l'ID des DIV et NAME des images),src et defsrc (images),z et defz,defx,defy
Quelques méthodes: moveBy(deltaX,deltaY), moveTo(new_x, new_y), resizeBy(deltaW,deltaH), resizeTo(width,height), show(), hide(), swapImage("new_src.jpg"), addChild(autreObjet) (ils bougeront ensemble), detachChild(objetFils),del(),setBgColor("color") (pour GIF transparent ou DIV), setDraggable(true/false),setOpacity(coeff),setResizable(true/false),setZ(number),write("html"),setScalable(true/false), getEltBelow(), setPickFunc(nomFonction) (idem pour Drag, Resize et Drop)

4 fonctions sont personnalisables (il faut les surcharger). On les utilise avec dd.obj (objet concerné). my_PickFunc() (clic sur un objet), my_DragFunc() (pour affichage de x et y dans barre d'état par exemple), my_ResizeFunc() (similaire à my_DragFunc), my_DropFunc().

On peut aussi ajouter des propriétés et méthodes aux objets:
dd.elements[i].myProperty = ... Mieux encore: DDObj est le nom de la classe (DDObj() le constructeur) pour les objets déplaçables.

DDObj.prototype.myNewProperty = valeur;

concernera TOUS les objets.
Pour autoriser le double-clic sur les images:

dd.elements.titi.div.ondblclick=dd.elements.titi.oimg.ondblclick;

Cette propriété 'div' est une référence directe à l'objet DIV du DOM (la bibliothèque insère automatiquement les images dans un div créé à la volée). La propriété 'nimg' est une référence directe au nouvel objet IMG du DOM, 'oimg' à l'ancien.

Autre exemple:

dd.elements.titi.nimg.title='nouveau title';

API: Liste des commandes.
Support technique: Walter Zorn [walter2615gmx.de]

Exemples

Faire glisser le Tableau en le prenant par la marge gauche.
Essayez le double clic sur Titi.

Vehicule
Marque
Modele de vehicule