В общем суть задачи следующая, необходимо реализовать возможность изменения размеров 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.
Так вот, можно ли такое провернуть?