В общем, написал вот такой код, где красный блок див можно схватить и перетаскивать, но не знаю как наложить ограничение на то, чтобы этот красный блок див не заходил за рамки второго -- серого блока с размером 500х500 пикселей. Как это можно сделать?
Хотелось бы увидеть готовый код, чтобы можно было в нём покопаться и разобраться самому. Заранее спасибо.
<html>
<head><title>Moving</title></head>
<body onload= "init()">
<h1 style="margin-left: 650px; color: red;">Адаптировано для Chrome</h1>
<div id='serkv' style="position:absolute;width:500;height:500;background-color:grey;left:10;top:10">
<DIV id='kv' style="position:absolute;left:10;top:10;width:50;height:50;background-color:red">
</div>
</div>
</body>
<SCRIPT>
kv.onmousedown = function(event) {
kv.style.position = 'absolute';
kv.style.zIndex = 1000;
document.body.appendChild(kv);
moveAt(event.pageX, event.pageY);
function moveAt(pageX, pageY) {
kv.style.left = pageX - kv.offsetWidth / 2 + 'px';
kv.style.top = pageY - kv.offsetHeight / 2 + 'px';
}
function onMouseMove(event) {
moveAt(event.pageX, event.pageY);
}
document.addEventListener('mousemove', onMouseMove);
kv.onmouseup = function() {
document.removeEventListener('mousemove', onMouseMove);
kv.onmouseup = null;
};
};
kv.ondragstart = function() {
return false;
};
</SCRIPT>
</html>
