Javascript-форум - jquery. drag&drop

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - jquery. drag&drop (https://javascript.ru/forum/dom-window/10512-jquery-drag-drop.html)

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'.

видимо, завернуть #qq в еще один div (его сделать draggable, а не #qq) и в обработчике события drag изменять размер #qq, еси необзодимо

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

подобный результат можно получить, если вышеуказанную страницу поместить в iframe scrolling="no". Но в таком случае iframe всё-равно будет менять свои размеры при перетаскивании 'qq' за границы iframe.

просто там шла речь о "только на половину"...

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

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

Хочу чтобы был такой эфект, как в google_map, т.е. при перемещении карты внутри дива - меняется область просмотра.

Цитата:

Сообщение от amigo*

Хочу чтобы был такой эфект, как в google_map

так бы сразу и сказал. В чем проблема? Открой Goolge Maps и посмотри разметку

Цитата:

Т.е. хочу сделать так, чтобы родительский элемент стал как бы маской для div 'qq'

Попробуй родительсуому элементу задать фиксированный размер, и параметры position:relative; overflow: hidden; А всем внутренним дивам - position:absolute;

pandasensey,
В случае, если ты это делаешь в iframe или окне - создай в нем элемент на всю длину и ширину фрейма/окна с атрибутами position:relative; overflow: hidden; Теперь, что бы ты там в нутри него не перетаскивал, ничего не двигается.

2 x-yuri, pandasensey: спасибо за помощь. Ключевым моментом было: overflow: hidden, который и позволяет решить поставленную задачу

amigo*,
Незачто :)