posX = event.clientX;
posY = event.clientY;
Проблема в том, что эти значения всегда устанавливаются на смещение щелчка сверху тела, а НЕ сверху квадратного элемента. В первый раз они работали нормально, потому что смещение от верхней части тела было таким же, как у элемента, потому что его положение было прямо по отношению к телу. После того, как вы переместили его, он будет иметь смещение со стороны тела от того места, куда вы только что переместили его. Когда вы перетаскиваете его мышью, она перемещается с позицией мыши , смещенной на количество пикселей, на которые вы только что ее переместили. Это часто полностью сдвигало экран. Вы хотите, чтобы элемент двигался с помощью мыши, где верхняя часть элемента остается в том же положении относительно мыши.
Если это не имеет смысла, оставьте комментарий, и я постараюсь сделать его немного понятнее. : D
Это сработало для меня:
<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>