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.
et voici le body de la page associée. Le div à déplacer est lui même contenu dans un div.
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
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(); } }
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.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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>
Pourriez-vous m'aider ?
Merci
Partager