[Resolu]Drag and Drop avec Prototype

Bonjour à tous,

Je créé actuellement un carte interactive avec les bibliothèques Prototype et Script.aculo.us. L'utilisateur génère un point (constitué d'une image et d'un titre contenu dans une div avec pour id "divDeplacable") en choisissant parmi quatre tailles est cinq couleurs différentes. Une fois le point générer, il apparait sur le carte et il suffit de le déplacer (drag and drop) pour le mettre à l'endroit voulu. Je voudrait que le point (ma div déplaçable) soit bloqué dans la div contenant la carte. Je fais donc un new Draggable et j'utilise la fonction snap comme suit :

    div = $('divDeplacable');
    new Draggable(div, {
    snap: function(x,y) {
      if(x<0)x=0;
      if(y<0)y=0;
      dimCarte = $('carte').getDimensions();
      dim = div.getDimensions();
      if((x+dim.width)>dimCarte.width)x=dimCarte.width-dim.width;
      if((x+dim.height)>dimCarte.height)x=dimCarte.height-dim.height;
      return [x, y] ;
      }
    }); 

Pour ne pas que la div déplaçable prenne tout l'espace de la div carte, je lui ai mis un width:20px. Mais le contenu de cette div déplaçable change dynamiquement (l'utilisateur met un point plus ou moins gros, un titre plus ou moins long sous le point,..) et mon dim.width me renvoi toujours 20. Je n'arrive pas à obtenir la taille réelle de ma div et donc je n'arrive pas à la bloquer à droite et en bas (en haut et à gauche ça marche, normal).

Mes questions sont donc les suivantes :
- Il y a-t-il un moyen d'obtenir "dynamiquement" la taille d'une div ?
- Ai-je une autre solution pour bloquer ma div en bas et à droite ?

Merci d'avance à celles et ceux qui prendrons le temps de lire mon message.
Modifié par lanfisis (14 Jun 2007 - 19:55)

Déjà dans ta fonction snap(), je ne suis pas sur que la variable 'div' existe bien (elle n'est pas transmis à la fonction) donc dim = div.getDimensions(); doit pas bien fonctionné. Il y a des trucs bizarre en js avec la porté des variables... A la limite rajoute 'var' devant la création de 'div' (var div = $....)

Ensuite si tu veux bloquer un élément en bas à droit:

tonEl.style.position = 'absolute';
tonEl.style.right = '0';
tonEl.style.bottom = '0';
//Au cas ou...
tonEl.style.left = '';
tonEl.style.top = '';
//Si tonEl est dans un element qui est déjà en position absolute rajoute
document.body.appendChild(tonEl);

Un truc dans le genre devrait fonctionner
Modifié par MoOx (14 Jun 2007 - 18:29)

Il récupérais bien mon div, c'est juste qu'il prenais la taille contenu dans le fichier css et non celle qu'elle prenais dynamiquement. J'ai résolu mon problème en me servant d'un span dont je n'ai pas besoin de spécifier la taille pour qu'il s'adapte à son contenu. Merci d'avoir prété attention à ma question.