CODEWITHSUNDEEP
javascriptjquerycssdrag-and-dropz-index
Mithun Sreedharan
Mithun Sreedharan

Reputation: 51272

Handling Scroll bars with jQuery event Drag and Drop

I have a room div with some toy divs arranged on it, see alt text

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

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

Upvotes: 6

Views: 1446

Answers (3)

michael
michael

Reputation: 4483

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>

Upvotes: 1

JQuery Guru
JQuery Guru

Reputation: 6963

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

Upvotes: 1

Peter Smeekens
Peter Smeekens

Reputation: 664

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

Upvotes: 2

Related Questions