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 ?