Показать сообщение отдельно
  #15 (permalink)  
Старый 01.02.2013, 13:04
Аватар для BaVa
Аспирант
Отправить личное сообщение для BaVa Посмотреть профиль Найти все сообщения от BaVa
 
Регистрация: 16.11.2011
Сообщений: 60

Вот сделал чуть по другому
<!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>

Последний раз редактировалось BaVa, 12.02.2013 в 10:22.
Ответить с цитированием