<!DOCTYPE HTML>
<html>
<body>
<div id="block"> <div id="lt" class="angle"></div>
<div id="tr" class="angle"></div>
<div id="rb" class="angle"></div>
<div id="bl" class="angle"></div>
</div>
<script>
window.onload = function () {
function gID(id) { return document.getElementById(id); }
var block = gID('block'),
lt = gID('lt'),
tr = gID('tr'),
rb = gID('rb'),
bl = gID('bl');
// Ресайз за левый верхний уголок
function resizeLT(e) {
if (e.which == 1) {
var mousePositionX = e.pageX,
mousePositionY = e.pageY;
function moveOnDocument(e) {
var moveX = e.pageX - mousePositionX,
moveY = e.pageY - mousePositionY,
blockWidth = block.offsetWidth - 2 - moveX,
blockHeight = block.offsetHeight - 2 - moveY,
blockLeft = block.offsetLeft + moveX,
blockTop = block.offsetTop + moveY;
mousePositionX = e.pageX,
mousePositionY = e.pageY;
block.style.width = blockWidth + 'px';
block.style.height = blockHeight + 'px';
block.style.left = blockLeft + 'px';
block.style.top = blockTop + 'px';
}
document.addEventListener('mousemove', moveOnDocument, false);
function upOnDocument() {
document.removeEventListener('mousemove', moveOnDocument, false);
}
document.addEventListener('mouseup', upOnDocument, false);
e.preventDefault();
e.stopPropagation();
return false;
}
}
lt.addEventListener('mousedown', resizeLT, false);
// Ресайз за верхний правый уголок
function resizeTR(e) {
if (e.which == 1) {
var mousePositionX = e.pageX,
mousePositionY = e.pageY;
function moveOnDocument(e) {
var moveX = e.pageX - mousePositionX,
moveY = e.pageY - mousePositionY,
blockWidth = block.offsetWidth - 2 + moveX,
blockHeight = block.offsetHeight - 2 - moveY,
//blockLeft = block.offsetLeft + moveX,
blockTop = block.offsetTop + moveY;
mousePositionX = e.pageX,
mousePositionY = e.pageY;
block.style.width = blockWidth + 'px';
block.style.height = blockHeight + 'px';
//block.style.left = blockLeft + 'px';
block.style.top = blockTop + 'px';
}
document.addEventListener('mousemove', moveOnDocument, false);
function upOnDocument() {
document.removeEventListener('mousemove', moveOnDocument, false);
}
document.addEventListener('mouseup', upOnDocument, false);
e.preventDefault();
e.stopPropagation();
return false;
}
}
tr.addEventListener('mousedown', resizeTR, false);
// Ресайз за прваый нижний уголок
function resizeRB(e) {
if (e.which == 1) {
var mousePositionX = e.pageX,
mousePositionY = e.pageY;
function moveOnDocument(e) {
var moveX = e.pageX - mousePositionX,
moveY = e.pageY - mousePositionY,
blockWidth = block.offsetWidth - 2 + moveX,
blockHeight = block.offsetHeight - 2 + moveY;
//blockLeft = block.offsetLeft + moveX,
//blockTop = block.offsetTop + moveY;
mousePositionX = e.pageX,
mousePositionY = e.pageY;
block.style.width = blockWidth + 'px';
block.style.height = blockHeight + 'px';
//block.style.left = blockLeft + 'px';
//block.style.top = blockTop + 'px';
}
document.addEventListener('mousemove', moveOnDocument, false);
function upOnDocument() {
document.removeEventListener('mousemove', moveOnDocument, false);
}
document.addEventListener('mouseup', upOnDocument, false);
e.preventDefault();
e.stopPropagation();
return false;
}
}
rb.addEventListener('mousedown', resizeRB, false);
// Ресайз за нижний левый уголок
function resizeBL(e) {
if (e.which == 1) {
var mousePositionX = e.pageX,
mousePositionY = e.pageY;
function moveOnDocument(e) {
var moveX = e.pageX - mousePositionX,
moveY = e.pageY - mousePositionY,
blockWidth = block.offsetWidth - 2 - moveX,
blockHeight = block.offsetHeight - 2 + moveY,
blockLeft = block.offsetLeft + moveX;
//blockTop = block.offsetTop + moveY;
mousePositionX = e.pageX,
mousePositionY = e.pageY;
block.style.width = blockWidth + 'px';
block.style.height = blockHeight + 'px';
block.style.left = blockLeft + 'px';
//block.style.top = blockTop + 'px';
}
document.addEventListener('mousemove', moveOnDocument, false);
function upOnDocument() {
document.removeEventListener('mousemove', moveOnDocument, false);
}
document.addEventListener('mouseup', upOnDocument, false);
e.preventDefault();
e.stopPropagation();
return false;
}
}
bl.addEventListener('mousedown', resizeBL, false);
}
</script>
</body>
</html>
Но блок вообще не выводит
Я хочу,как здесь:
http://dl.dropbox.com/u/6001712/demo/resize/index.html