Правильное изменение размеров div элементов
 

В общем суть задачи следующая, необходимо реализовать возможность изменения размеров div-блока со всех возможных сторон(сверху,снизу, слева, справа и 4 по каждому углу). Блоков на странице может быть неограниченное количество, для каждого должна быть возможность изменения размеров.


Я реализовал часть задачи, но пока остановился в поисках более правильного решения.

<div id="center_section" class="b_res">
	<div class="top_g" id="center_sectiontop" ></div>
	<div class="left_g" id="center_sectionleft"></div>
        <div class="right_g" id="center_sectionright"></div>
        <div style="clear: both;"></div>
        <div class="bottom_g" id="center_sectionbottom"></div>
</div>

.top_g {height: 10px; display: none;  position: relative; width: 100%; cursor: n-resize; z-index:50;}
.bottom_g {height: 10px; display: none; position: relative; bottom: 10px; width: 100%; cursor: n-resize; z-index:50;}
.right_g {height: 100%; display: none; position: relative; float: right; width: 10px; cursor: e-resize; z-index:50;}
.left_g {height: 100%; display: none; position: relative; float: left; width: 10px; cursor: e-resize; z-index:50;}

То есть я добавил 4 скрытых блока с каждой стороны и на них наложил события изменения размера. Это работает. Соответственно для изменения размера блока по углам, мне необходимо добавить ещё 4 блока в каждый угол и наложить на них события. Итого получается 8 лишних div`ов в каждом элементе.

Что-то мне подсказывает, что можно весь html код сократить до

<div id="center_section"></div>

(то есть оставить только нужный блок/блоки, с которым необходимо работать)
А всё остальное запихать в JS.

Так вот, можно ли такое провернуть?

Чем не нравятся скрытые блоки?

Посмотрите как сделано в http://jqueryui.com/resizable/

Скрытые блоки нравятся. Но просто я ищу оптимальное и наиболее удобное решение. На странице может быть множество блоков. Соответственно в каждом блоке получается по 8 скрытых блоков для изменения размеров. Многовато "пустых" элементов, нет?.

Чисто в теории размеры можно менять комбинацией тех же селекторов класса...

Вот только правильно указать значение ЦСС-свойств для тех селекторов, можно только точно зная, что именно хочется получить в итоге...

В итоге хочется получить скрипт, позволяющий менять размер div блоков.

Так вот, как поменять размер выбранного объекта с любой из сторон я знаю, это не трудно. Я не знаю как реализовать выбор стороны для изменения размера без дополнительных невидимых блоков.

Например, пользователь навёл указатель на правый верхний угол, надо поменять курсор. Пользователь зажал мышку и потянул - изменить размер. Аналогично со всеми остальными сторонами.

Можно ли как-то отсчитать координаты внутри объекта, а не страницы?

просто следите за курсором мыши, событие mousemove
и проверяйте координаты

ниже простой пример, который меняет курсор при наведении на границы блока
http://learn.javascript.ru/play/8W1Erc

возможно, в старых браузерах и в IE не будет работать

про кроссбраузерные координаты мыши http://learn.javascript.ru/mouse-clicks#координаты-мыши