Discussion :

[renaud26]

Bonjour à tous,

Je rame lamentablement, malgré des tas de recherche. Je voudrais afficher les coords X et Y d'un layer draggable sur une image dans des champs texte nommés X et Y. Voici comment j'ai fait, mais les coordonnées sont fausses...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
 
function twPositionRelative(evt) {
var nOffsetX;
var nOffsetY;
evt = (evt) ? evt : ((window.event) ? window.event : "");
if (evt) {
if (document.all) {
nOffsetX = evt.offsetX;
nOffsetY = evt.offsetY;
} else if (document.getElementById) {
nOffsetX = evt.pageX - document.getElementById("monID").offsetLeft;
nOffsetY = evt.pageY - document.getElementById("monID").offsetTop;
}
//monID est le calque draggable dont je veux les coordonnées
 
  document.all.X1.innerText = nOffsetX; //input X
  document.all.Y1.innerText = nOffsetY; //input Y
 
}
}
 
function twInit() {
var oImage = document.getElementById("image")//le calque de l'image
if (oImage) {
oImage.onmousemove = twPositionRelative;
}
}

la fonction twInit() se charge avec body
les 2 inputs text X et Y sont ok: les coords s'affichent bien, mais erronées

les layers :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
<img src="image.gif" width="468" height="60" id="image">
<div id="monID" class="zone">TEXTE</div>
<script type="text/javascript" language="javascript">
document.getElementById("monID").style.cursor = 'move';
new Draggable('monID',{}); 
</script>

Vous voyez ce qui cloche ?
Je veux bien un coup de main...merci !

[FremyCompany]

pk ne pas utiliser this.offsetTop/offsetLeft ?

[renaud26]

Ben en faisant ça, c'est ce que je pensais faire...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
 
nOffsetX = evt.pageX - document.getElementById("monID").offsetLeft;
nOffsetY = evt.pageY - document.getElementById("monID").offsetTop;

Non ?

[Sergejack]

Elles sont éronnées comment tes valeurs ?

Si tu les calcules après le déplacement, les offest sont les valeurs à afficher et non pas mouseX - offsetLeft et mouseY - offsetTop (qui te dooneront alors forcement des valeurs constantes).

PS : Les offset peuvent avoir a être calculer en fonction des conteneurs ancêtres.

[renaud26]

pas facile à dire comment les valeurs sont erronées...
Et oui, je veux que le user puisse déplacer le layer sur l'image, puis lorsque il lâche le bouton de la souris, cela "fige" X et Y dans les inputs...

[FremyCompany]

pageX n'est pas reconnu par tous les navigateurs.... si ?

[renaud26]

Très franchement Fremy, je n'en sais rien...je voudrais déjà faire fonctionner ça avec IE, ce serait très bien !

[Sergejack]

Tu ne peux pas et déplacer le div et utiliser comme référence ses offsets puisque ces justement ceux ci que tu changes.

C'est comme calculer du siège arrière d'une voiture, qu'elle ne va pas vite en considérant le passager avant comme point de repère et donc : "Je ne le dépasse jamais.".

N'utilise comme référence que les coordonnées du curseur.

[renaud26]

Tu veux dire obliger le user à positionner son curseur sur l'angle du layer pour afficher les coords puis les noter lui même dans les champs ???
j'avoue que je ne te suis pas bien...

[Sergejack]

?

Attends...
Pour placer ton div à la bonne position que dois-tu connaître ?
Seulement la position de la souris ?

[renaud26]

Mais peut-être me suis-je mal expliqué:

Mon div est draggable, positionné sur une image. Le user le déplace à son gré dans cette image en maintenant le bouton de souris enfoncé. Lorsque le div est à la position voulue, il lâche le bouton de la souris. A ce moment là j'ai besoin de connaître X et Y de la dernière position du div dans l'image. Je sais pas si je suis plus clair, là...

[Sergejack]

Mais peut-être me suis-je mal expliqué:

Mon div est draggable, positionné sur une image. Le user le déplace à son gré dans cette image en maintenant le bouton de souris enfoncé. Lorsque le div est à la position voulue, il lâche le bouton de la souris. A ce moment là j'ai besoin de connaître X et Y de la dernière position du div dans l'image. Je sais pas si je suis plus clair, là...

Donc : la bonne position c'est la position de la souris, tant que la souris est dans l'image.
C'est ça, cette fois ?

[renaud26]

oui, ou les coordonnées du layer à sa dernière position dans l'image.

[FremyCompany]

pageX n'est pas reconnu par tous les navigateurs.... si ?

Je te conseille de faire une recherche

Si tu cherche la position de la souris, voici le script que j'utilise et qui marche très bien :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
var Mouse={"x":0,"y":0};
function OnMouseMoveEventHandler(e)
{
   Mouse.x = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft;
   Mouse.y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop;
   if (Mouse.x < 0) {Mouse.x=0;}
   if (Mouse.y < 0) {Mouse.y=0;}
}
document.onmousemove=OnMouseMoveEventHander;

[renaud26]

oui, merci Fremy. Ton script donne, je pense, le même résultat que celui que j'ai mis en tête de ce post, à savoir les coordonnées de la souris. Si on ajoute ces lignes, on peut même définir les coords sur une image plutôt que sur la page entière (ce que je recherche)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
var oImage = document.getElementById("image")
oImage.style.cursor = "crosshair"
oImage.onmousemove = OnMouseMoveEventHander;

Mais dans mon cas, puisque cette image possède un layer texte draggable, cela oblige le user à positionner le layer puis postionner la souris dans le coin inférieur gauche du layer et noter X et Y. Pas très pratique...Puisque dès qu'il bouge la souris, les coords changent. Le script dropdrag que j'utilise (wz_dragdrop) possède une fonction qui permet de noter la position du layer draggable. Hélas, c'est toujours par rapport à la page entière et non par rapport à l'image...Et je ne sais pas le transformer pour cela...
un casse-tête.

[renaud26]

donc pas de soluce ???