Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.08.2014, 12:21
Интересующийся
Отправить личное сообщение для Nupster Посмотреть профиль Найти все сообщения от Nupster
 
Регистрация: 12.08.2014
Сообщений: 20

Правильное изменение размеров 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.

Так вот, можно ли такое провернуть?
Ответить с цитированием
  #2 (permalink)  
Старый 13.08.2014, 13:15
Лаборант :-)
Отправить личное сообщение для Pavel M. Посмотреть профиль Найти все сообщения от Pavel M.
 
Регистрация: 08.11.2011
Сообщений: 806

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

Посмотрите как сделано в http://jqueryui.com/resizable/
Ответить с цитированием
  #3 (permalink)  
Старый 13.08.2014, 13:43
Интересующийся
Отправить личное сообщение для Nupster Посмотреть профиль Найти все сообщения от Nupster
 
Регистрация: 12.08.2014
Сообщений: 20

Сообщение от Pavel M. Посмотреть сообщение
Чем не нравятся скрытые блоки?

Посмотрите как сделано в http://jqueryui.com/resizable/
Скрытые блоки нравятся. Но просто я ищу оптимальное и наиболее удобное решение. На странице может быть множество блоков. Соответственно в каждом блоке получается по 8 скрытых блоков для изменения размеров. Многовато "пустых" элементов, нет?.
Ответить с цитированием
  #4 (permalink)  
Старый 13.08.2014, 13:51
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,205

Сообщение от Nupster
необходимо реализовать возможность изменения размеров div-блока со всех возможных сторон
Чисто в теории размеры можно менять комбинацией тех же селекторов класса...

Вот только правильно указать значение ЦСС-свойств для тех селекторов, можно только точно зная, что именно хочется получить в итоге...
Ответить с цитированием
  #5 (permalink)  
Старый 13.08.2014, 18:22
Интересующийся
Отправить личное сообщение для Nupster Посмотреть профиль Найти все сообщения от Nupster
 
Регистрация: 12.08.2014
Сообщений: 20

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

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

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

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

Можно ли как-то отсчитать координаты внутри объекта, а не страницы?
Ответить с цитированием
  #6 (permalink)  
Старый 13.08.2014, 19:07
Лаборант :-)
Отправить личное сообщение для Pavel M. Посмотреть профиль Найти все сообщения от Pavel M.
 
Регистрация: 08.11.2011
Сообщений: 806

Сообщение от Nupster
Можно ли как-то отсчитать координаты внутри объекта, а не страницы?
просто следите за курсором мыши, событие mousemove
и проверяйте координаты

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

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

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

Последний раз редактировалось Pavel M., 13.08.2014 в 19:17.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменение размера и перемещение элементов Nupster Элементы интерфейса 2 12.08.2014 19:38
Как сделать обход элементов внутри DIV reno4 jQuery 4 24.07.2013 13:30
запретить изменение количество элементов в списке Antistas jQuery 0 05.12.2012 14:05
плавное изменение размеров div dimon76 Элементы интерфейса 9 07.11.2011 13:28
Суммирование значений всех элементов div frolvict jQuery 1 11.07.2011 17:05