Вот сделал чуть по другому
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>resizeDiv</title>
<script type="text/javascript">
var doc = document;
function move(event) {
var div = doc.getElementsByTagName("div")[0];
var e = event || window.event;
var t, r, b, l;
t = div.getBoundingClientRect().top;
r = div.getBoundingClientRect().right;
b = div.getBoundingClientRect().bottom;
l = div.getBoundingClientRect().left;
div.style.width = (e.clientX - l) + "px";
div.style.height= (e.clientY - t) + "px";
}
function up(event) {
document.removeEventListener("mouseup", up, true);
document.removeEventListener("mousemove", move, true);
}
onload = function() {
var div = doc.getElementsByTagName("div")[0];
div.onmousemove = function(event) {
var e = event || window.event;
var x = e.clientX;
var y = e.clientY;
var t, r, b, l;
t = div.getBoundingClientRect().top;
r = div.getBoundingClientRect().right;
b = div.getBoundingClientRect().bottom;
l = div.getBoundingClientRect().left;
div.innerHTML = "top: " + t + "<br>right: " + r + "<br>bottom: " + b + "<br>left: "+ l;
if((e.clientX+1 == r) && (e.clientY+1 == b))
div.style.cursor = "se-resize";
else
div.style.cursor = "default";
}
div.onmousedown = function(event) {
var e = event || window.event;
var x = e.clientX;
var y = e.clientY;
var t, r, b, l;
t = div.getBoundingClientRect().top;
r = div.getBoundingClientRect().right;
b = div.getBoundingClientRect().bottom;
l = div.getBoundingClientRect().left;
if((e.clientX+1 == r) && (e.clientY+1 == b)) {
document.addEventListener("mousemove", move, true);
document.addEventListener("mouseup", up, true);
}
}
}
onmousemove = function(event) {
var e = event || window.event;
var mX = doc.getElementById("mouseX");
var mY = doc.getElementById("mouseY");
mX.value = "" + e.clientX;
mY.value = "" + e.clientY;
}
</script>
<style type="text/css">
div {
border: 2px solid #000;
}
</style>
</head>
<body>
<p>
x: <input type="text" id="mouseX"><br>
y: <input type="text" id="mouseY"><br>
</p>
<div style="width: 400px; height: 200px;">
</div>
<span></span>
</body>
</html>
посмотрите ответ в моём коде
