Drag'n'Drop en Javascript

Bonjour a tous et meilleur voeux pour commencer :d

Voila je ne connais que tres peu de choses en Javascript mais j'essai de develloper un script permettant de realiser un drag and drop sur une image.

Dans mon raisonnement voici ce que cela donne:

1ere etape: quand on clique sur l'image, on signifie que c'est cette objet qui sera Dragger

2eme etape: quand la souris bouge on met a jour les coordonnees de notre image

3eme etape: quand on relache la souris on vide notre variable qui specifie quel objet est draggé

Donc je me mets a la recherche des evenements souris et je trouve donc ceux la:
onMouseDown (clique enfonce)
onMouseUp (clique relache)
onMouseMove ( la souris bouge)

Je me dis allez hop on demare, je fais donc une page html toute bete avec seulement une image auquel j'associe mes evenements:

<img id="carre" onmousedown="Drag(this);" onmouseup="Drop();" onmousemove="Move(event)"; src="images/carre.gif" />

Donc mon image est affichée et devrait reagir aux evements en appelant les differentes fonctions decrites dans un fichier javascript:

var ObjetDragged = null;
var MouseX=null;
var MouseY=null;

function Drag(object){
ObjetDragged = object;
}

function Drop(){
ObjetDragged = null;
}

function Move(e){
MouseX = e.clientX;
MouseY = e.clientY;
ObjetDragged.style.left = MouseX+'px';
ObjetDragged.style.top = MouseY+'px';	
}

J'arrive a cette implementation apres qq recherches (recuperation position de la souris).

Mais probleme, cela ne fonctionne pas.

Si je reste clique sur mon image et que je commence a bouge mon image bouge legerement puis s'arrete, je relache le bouton et des que je passe sur mon image elle suit la souris.

si je reclique sur mon image tout redevient normale.

Il faut donc que je clic, bouge legerement, lache le bouton et ensuite je deplace mon objet et je reclique sur mon objet pour le dropper.

J'ai donc un petit probleme mais je ne sais pas d'ou, alors je fais appel a vous pour votre aide merci