Problème de drag & drop

Bonjour, je débute en JS et je m'entraîne à la réalisation de drag&drop sur un exemple simple : je veux juste déplacer un div dans une page html.

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
 
function beginDrag(elementToDrag, evt)
{
	var x = parseInt(elementToDrag.style.top);
	var y = parseInt(elementToDrag.style.left);
 
	var initialMouseX = evt.clientX;
	var initialMouseY = evt.clientY;
 
	document.addEventListener("mousemove", moveHandler, false);
	document.addEventListener("mouseup", upHandler; false);
 
	evt.stopPropagation();
	evt.preventDefault();
 
	function moveHandler(evt)
	{
		elementToDrag.style.left = x + (evt.clientX - initialMouseX) + "px";
		elementToDrag.style.top = y + (evt.clientY - initialMouseY) + "px";
 
		evt.stopPropagation();
	}
 
	function upHandler(evt)
	{
		removeListener(document, "mousemove", moveHandler);
		removeListener(document, "mouseup", upHandler);
 
		evt.stopPropagation();
	}
}

et voici le body de la page associée. Le div à déplacer est lui même contenu dans un div.

Code:

1
2
3
4
5
6
7
8
	<body>
		<div style="position: absolute; left: 100px; top: 100px; border: dotted black; padding: 3px; width: 700px; height: 500px; overflow: hidden;">
			<div id="toDrag" style="width: 128px; height: 128px; background-color: green; position: absolute; top: 50px; left:100px; cursor:hand;"
				onmousedown = "beginDrag(this, event);" >
 
			</div>
		</div>
	</body>

Mon problème est que lorsque je drag la zone, le div fait un "bond" et se retrouve à perpet' de la souris. Puis, après ce bond, il suit les déplacements correctement mais n'est pas à l'endroit attendu.

Pourriez-vous m'aider ?

Merci