Mauvaise position curseur + centrage position

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:

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:

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:

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.