VPF::jquery: использование draggable с resizable

dimes

Дата 13.7.2012, 09:58 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 249
Регистрация: 20.7.2004
Где: то около СПБ

Репутация: нет
Всего: 14

Скачал отсюда(http://jqueryui.com/download) самые свежие библиотеки
Беру пример из demos\resizable\aspect-ratio.html
слегка его правлю:

Добавляю:

Код


<script src="../../ui/jquery.ui.draggable.js"></script>

Меняю:

Код


$(function() {
 $("#resizable").draggable({ containment: "#demo", scroll: false }).resizable({
    aspectRatio: 16 / 9,
    containment: $("#demo"),
  });
});
</script>

И меняю:

Код


<center>
<div id="demo" style="width:600px; height: 300px; background-color:green;">
    
<div id="resizable" class="ui-widget-content">
    <h3 class="ui-widget-header">Preserve aspect ratio</h3>
</div>
</div><!-- End demo -->
</center>

Что хочу получить: В центре стоит зеленый блок внутри которого можно таскать и менять размер другой блог, но так что бы он не выходил за границы зеленого блока.

draggable работает отлично.
resizable работает только без опции containment(запрещающая выходить из зеленой зоны). Причем создается такое ощущение, что resizable считает что зеленый блок стоит у левого верхнего угла а не в центре. Потому что если убрать центровку, с виду все работает а при смещении зеленого блока от угла зона ресайза пропорциональность уменьшается.

Что я делаю не так? Как то не верится, что мне первому пришлось использовать эти два плагина одновременно.

Это сообщение отредактировал(а) Aliance - 13.7.2012, 17:20

Aliance

Дата 13.7.2012, 17:20 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 7
Всего: 137

У меня на решение этого вопроса ушло меньше минуты.

- Заходим на jqueryui.com
- жмем на демки
- выбираем Resizable
- жмем на 3 пример contain
- смотрим на синтаксис - там задается селектор элемента, а не сам элемент. В общем-то можно было догадаться еще и по этому:

Цитата

$("#resizable").draggable({ containment: "#demo", scroll: false }).resizable({
    aspectRatio: 16 / 9,
    containment: $("#demo"),
  });

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Применение библиотек \| Следующая тема »