Home/ Questions/Q 4015924
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T09:40:40+00:00

So, what it does: You can successfully drag something anywhere, but when you click

  • 0

So, what it does: You can successfully drag something anywhere, but when you click it again, it resets to its original position (I don’t know why), and when you try to drag it again, as soon as your cursor touches the object it disappears (I don’t know why). I’m hoping someone can tell me why it is happening and how to fix it!

// JavaScript Document

var posX;
var posY;
var element;

function drag() {

element = document.getElementById("square");
posX = event.clientX;
posY = event.clientY;

element.addEventListener("mousemove", move, false);
}

function move() {

    element.addEventListener("mouseup", drop, false);

    element.style.left = event.clientX - posX + "px";
    element.style.top = event.clientY - posY + "px";
}

function drop() {

    element.removeEventListener("mousemove", move, false);
    element.removeEventListener("mouseup", drop, false);
}

the html is a simple (position is set to relative):

<p id="square" onmousedown="drag(event)">meep</p>

Lastly, and most importantly, thank you all for your time =]

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    posX = event.clientX;
posY = event.clientY;

    The problem is these values are always set to the offset of the click from the top of the body, NOT from the top of the square element. The first time they worked fine, because the offset from the top of the body was the same thing as that of the element, because its position was right up against the body. Once you moved it, it would have the offset from the side of the body from wherever you just moved it to. When you dragged it with the mouse, it would move it with the mouse’s position shifted over the number of pixels you just moved it to. This often moved it completely off the screen. You want the element to move with the mouse where the top of the element stays in the same position relative to the mouse.

    If this doesn’t make sense, post a comment and I’ll try to make it a little clearer. 😀

    This worked for me:

    <html>
<head>
<script type="text/javascript">
// JavaScript Document

var posX;
var posY;
var element;

function drag(event) {                //added event parameter

element = document.getElementById("square");
posX = event.clientX - parseInt(  element.offsetLeft );  //this is the big change!
posY = event.clientY - parseInt(  element.offsetTop );

element.addEventListener("mousemove", move, false);
}

function move(event) {                  //added event parameter
    if (typeof(document.getElementById("square").mouseup) == "undefined") {  //this just prevents redundantly adding the same event handler repeatedly, even though duplicates are removed anyway
        element.addEventListener("mouseup", drop, false);
    }

    element.style.left = event.clientX - posX + "px";
    element.style.top = event.clientY - posY + "px";
}

function drop() {

    element.removeEventListener("mousemove", move, false);
    element.removeEventListener("mouseup", drop, false);
}
</script>
<style type="text/css">
body {
 width: 1000px;
 height: 1000px;
 background-color: blue;
 }

p {
 position: relative; 
 background-color: red;
 width: 100px;
 height: 100px;
 left: 1px;
 top: 1px;
}

</style>
<body>
<p id="square" onmousedown="drag(event)">meep</p>
</body>
</html>
    • 0