Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.07.2010, 18:37
Аспирант
Отправить личное сообщение для amigo* Посмотреть профиль Найти все сообщения от amigo*
 
Регистрация: 25.05.2010
Сообщений: 39

jquery. drag&drop
Есть такой код:
<html>
<head>
    <title>Untitled Page</title>   
    <script type="text/javascript" src="jquery-1.4.2.js"></script>
    <script type="text/javascript" src="jquery-ui-1.8.2.custom.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('#qq').draggable({ containment: 'parent' });
        })
    </script>
</head>
<body>
    <div style="width:500px;height:500px;background-color:Aqua">
        <div id='qq' style="width:50px;height:50px; background-color:Gray">OOOO
        </div>
    </div>
</body>
</html>


Как можно div 'qq' перетаскивать так, чтобы div 'qq' был видим только в родительском окне? При этом, чтобы его можно было на половину, например, сдвинуть за границы родительского дива и div 'qq' отображался бы только на половину. Т.е. хочу сделать так, чтобы родительский элемент стал как бы маской для div 'qq'.
Ответить с цитированием
  #2 (permalink)  
Старый 07.07.2010, 22:17
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

видимо, завернуть #qq в еще один div (его сделать draggable, а не #qq) и в обработчике события drag изменять размер #qq, еси необзодимо
Ответить с цитированием
  #3 (permalink)  
Старый 08.07.2010, 12:34
Аспирант
Отправить личное сообщение для amigo* Посмотреть профиль Найти все сообщения от amigo*
 
Регистрация: 25.05.2010
Сообщений: 39

2 x-yuri: надеюсь есть метод попроще)

подобный результат можно получить, если вышеуказанную страницу поместить в iframe scrolling="no". Но в таком случае iframe всё-равно будет менять свои размеры при перетаскивании 'qq' за границы iframe.
Ответить с цитированием
  #4 (permalink)  
Старый 08.07.2010, 14:47
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

просто там шла речь о "только на половину"...
Ответить с цитированием
  #5 (permalink)  
Старый 10.07.2010, 19:39
Аспирант
Отправить личное сообщение для amigo* Посмотреть профиль Найти все сообщения от amigo*
 
Регистрация: 25.05.2010
Сообщений: 39

2 x-yuri: пробовал как ты говорил менять размер 'qq'. Это срабатывает если перемещение 'qq' происходит вниз или вправо, тогда действительно при изменении размера 'qq' создаётся нужный эфект. Но если перемещение происходит вверх или влево, то как быть? ведь при изменении размера 'qq' обрезается нижняя и правая сторона. Можно ли как-то изменять размер так, чтобы "обрезалась" верхняя и левая сторона?

Может с z-index можно что-то придумать? есть какие-то идеи?

Хочу чтобы был такой эфект, как в google_map, т.е. при перемещении карты внутри дива - меняется область просмотра.
Ответить с цитированием
  #6 (permalink)  
Старый 11.07.2010, 10:11
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

Сообщение от amigo*
Хочу чтобы был такой эфект, как в google_map
так бы сразу и сказал. В чем проблема? Открой Goolge Maps и посмотри разметку
Ответить с цитированием
  #7 (permalink)  
Старый 11.07.2010, 14:36
Аспирант
Отправить личное сообщение для pandasensey Посмотреть профиль Найти все сообщения от pandasensey
 
Регистрация: 24.02.2010
Сообщений: 55

Цитата:
Т.е. хочу сделать так, чтобы родительский элемент стал как бы маской для div 'qq'
Попробуй родительсуому элементу задать фиксированный размер, и параметры position:relative; overflow: hidden; А всем внутренним дивам - position:absolute;
Ответить с цитированием
  #8 (permalink)  
Старый 11.07.2010, 14:38
Аспирант
Отправить личное сообщение для pandasensey Посмотреть профиль Найти все сообщения от pandasensey
 
Регистрация: 24.02.2010
Сообщений: 55

pandasensey,
В случае, если ты это делаешь в iframe или окне - создай в нем элемент на всю длину и ширину фрейма/окна с атрибутами position:relative; overflow: hidden; Теперь, что бы ты там в нутри него не перетаскивал, ничего не двигается.
Ответить с цитированием
  #9 (permalink)  
Старый 11.07.2010, 15:47
Аспирант
Отправить личное сообщение для amigo* Посмотреть профиль Найти все сообщения от amigo*
 
Регистрация: 25.05.2010
Сообщений: 39

2 x-yuri, pandasensey: спасибо за помощь. Ключевым моментом было: overflow: hidden, который и позволяет решить поставленную задачу
Ответить с цитированием
  #10 (permalink)  
Старый 11.07.2010, 19:03
Аспирант
Отправить личное сообщение для pandasensey Посмотреть профиль Найти все сообщения от pandasensey
 
Регистрация: 24.02.2010
Сообщений: 55

amigo*,
Незачто
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
jQuery Click() не работает на объекте, созданном Ajax vovabigov jQuery 13 09.09.2012 14:25
jQuery jTreeMenu plugin Seafnox jQuery 9 12.01.2010 21:55
jquery - Как получить полный путь? kirill.adw jQuery 5 20.11.2009 17:40
JQuery + FireFox NOOB jQuery 4 02.11.2009 18:16
Как правильно подгрузить jQuery Siton jQuery 4 15.06.2009 09:54