当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - Handling Scroll bars with jQuery event Drag and Drop

问题描述:

I have a room div with some toy divs arranged on it, see alt text http://i27.tinypic.com/2rwt4t5.jpg

Toys are absolutly positioned and are drag-able with in the walls of the room . The room container div has a fixed height and height, so the room has horizontal as well as vertical scrolls. I use jquery event drag plug-in for setting up DnD. I managed to set up the toys drag only with in the lomits of the wall, but when there are scrolls, component is moving a little ouside the wall (only up to the actual width of the wall).

I want to show only a portion of the toy as shown below alt text http://i30.tinypic.com/jac19i.jpg

I tried setting the z-index, but has no effect, any one has better idea?

网友答案:

Withouth seeing the actual code, i guess overflow:hidden could solve this?

网友答案:

You can used scrollTo plugin http://demos.flesler.com/jquery/scrollTo/ to work with scrollbars

网友答案:

the example below shows that overflow:hidden does indeed do what you're asking. Something is up with your code, but we can't help you unless you post it!

alt text http://img155.imageshack.us/img155/9594/example1281542227415.png

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Example</title>

        <style type="text/css">

            #container {
                background-color:#ddddff;
                height:300px;
                overflow:hidden;
                position:relative;
                width:300px;
            }

            #container .child {
                background-color:#ddffdd;
                height:50px;
                position:absolute;
                width:50px;
            }

            #container .child1 {
                left:100px;
                top:70px;
            }

            #container .child2 {
                left:270px;
                top:170px;
            }

        </style>
    </head>

    <body>

        <div id="container">
            <div class="child child1"></div>
            <div class="child child2"></div>
        </div>

    </body>
</html>
分享给朋友:
您可能感兴趣的文章:
随机阅读: