Discussion :

[OnaStick]

Bonjour,

Je m'excuse d'avance pour le manque d'inspiration dans ce titre. Je vais essayer d'être clair dans mes explications. J'ai pour mission de réaliser une map draggable, Jusque là tout va bien.
Enfin presque. Si la position d'origine de mon élément draggé n'est pas top 0 left 0, je suis ramené au coin super gauche lors du onmousedown. Par contre, après le premier drag, si on relache le bouton et qu'on recommence, c'est la bonne position.

Code javascript :

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
 
var gX = 0;
var gY = 0;
var gDifX = 0;
var gDifY = 0;
 
var moveElement = null;
 
function mMove(e){
    gX = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft;
    gY = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop;
 
    if(moveElement != null){
        moveElement.style.left = (gX - gDifX)+'px';
        moveElement.style.top = (gY - gDifY)+'px';
    }
}
 
function mDown(element){
    gDifX = parseInt(element.style.left);
    gDifX = gX - ( isNaN(gDifX) ? 0 : gDifX) ;
    gDifY = parseInt(element.style.top);
    gDifY = gY - ( isNaN(gDifY) ? 0 : gDifY) ;
    moveElement = element;
}
 
function mUp() {
    if(moveElement != null){
    if(gX - gDifX > 0) {
        moveElement.style.left = '0px';
    }
    if(gY - gDifY > 0) {
        moveElement.style.top = '0px';
    }
    if(gX - gDifX < -2600) {
        moveElement.style.left = '-2600px';
    }
    if(gY - gDifY < -2000) {
        moveElement.style.top = '-2000px';
    }}
    moveElement = null;
}
 
/*if(navigator.appName.substring(0,3) == "Net")
    document.captureEvents(Event.MOUSEMOVE);*/
document.onmousemove = mMove;

Ce code provient d'un post du forum, je l'ai modifier afin d'empêche la map de sortir de son conteneur.

Code html :

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

1
2
3
4
5
6
7
8
 
<div id="mapBox" onmouseout="mUp();">
                    <div id="map" 
                         onmousedown="javascript : mDown(this);"
                         onmouseup="javascript : mUp();"
                         onmousemove="javascript : mMove(this);">
                    </div>
</div>

Code css :

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
 
#mapBox {
    width: 600px;
    height: 400px;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid red;
}
 
#map {
    width: 3200px;
    height: 2400px;
    left: -875px;
    top: -1875px;
    position: absolute;
    background-image: url("../maps/map.jpg");
}

Comment faire pour que la position du cursuer soit correct ? J'aimerais également que la position correspondant à l'evenement onmousedown soit centrée dans le div mapBox.

D'avance merci.

Cordialement,
Stick.

[OnaStick]

Après plusieurs test, j'arrive à obtenir la position du clic, par rapport au bord de mapBox, mais pas de l'élement absolute en lui même. Par contre, après un premier drag, tout semble corretement fonctionner. je continue de chercher !

Edit :

Bon, il s'avere que je n'arrive pas à avoir les mêmes valeur partout. Sur IE et Opera ce sont les valeurs du top et left de l'élement relatif (mapBox). Sur chrome, les valeurs top et left de la page. Sur firefox, le drag ne fonctionne pas.

Il va vraiment falloir qu'ils se mettent d'accord un jour !