Недавно начал осваивать JS. Решил посмотреть как происходит перемещение блока с помощью координат перемещения мыши. Код:
<!doctype html>
<html>
<head>
<link rel='stylesheet' href='console.css'>
</head>
<body>
<div id='divConsole' onclick="take();"></div>
<script>
var x = 0;
var y = 0;
function coords() {
divConsole.innerHTML = 'top: ' + divConsole.offsetTop + '<br>'
+ 'y: ' + event.clientY + '<br>'
+ 'left: ' + divConsole.offsetLeft + '<br>'
+ 'x: ' + event.clientX + '';
if (x == event.clientX) {
var moveUp = event.clientY - y;
divConsole.style.top = (divConsole.offsetTop+moveUp) + 'px';
y = event.clientY;
} else {
var moveRight = event.clientX - x;
divConsole.style.left = (divConsole.offsetLeft+moveRight) + 'px';
x = event.clientX;
}
}
function take() {
var html = document.getElementsByTagName('html')[0];
if (html.getAttribute('onmousemove')) {
html.setAttribute('onmousemove', '');
} else {
html.setAttribute('onmousemove', 'coords();');
x = event.clientX;
y = event.clientY;
}
}
</script>
</body>
</html>
Код CSS:
html, body {
overflow: hidden;
margin: 0;
}
#divConsole {
width: 200px;
height: 300px;
background: lightblue;
overflow: auto;
padding: 1%;
position: absolute;
}
В общем, суть вопроса в том, что при медленном перемещении блок двигается более нормально, то есть зрительно оптимально, а, если двигать мышкой быстро, то начинаются дерганья. Как разрешить такую проблему?
