Подскажите как правильно ресайзить элемент.
На странице создаются однотипные блоки, дивы с уголками тоже из дивов.
Смотрите пример. Если схватить блок за один из уголков то можно изменять размер блока. Я практически все реализовал но есть нюансы:
1. Если очень сильно уменьшать блок то он схлопнется.
2. Иногда курсор выходит за пределы уголка но попрежнему продолжает ресайзить блок.
3. У меня получилось четыре (по одной на каждый уголок) практически идентичные функции, возможно их можно склеить.
Нужно исправить эти мелочи.
P.S. Возможно есть статьи на эту тему, дайте ссылку. Я искал не нашел.
И как здесь на форуме сворачивать код )).
На всякий случай код:
<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>
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);
}
