Drag and Drop with overflow auto

[srinath]

Hi all,
I am trying to create a web app that will let you drag
items from a left pane to a right pane. These panes must have
overflow: auto on because there will definitely be more data in them
than can fit in the provided space. The problem is that when overflow
is set to auto, the div expands when the draggable object reaches the
extents instead of the object existing outside that div while being
dragged.
I want to drag an item from left pane and drop on right pane target div.
This is not working when using overflow:auto, as the item is going under right pane and not visible .

Here is my code :

Code:

#LeftPane {
width: 150px; /* optional, initial splitbar position */
margin: 10px 0px 10px 10px;
background: #ffffff;
border: #b6b6b6 1px solid;
overflow:auto;
}

#LeftPane li.sorting {
float: left;
margin: 4px;
padding: 4px;
border: 1px solid #ccc;
}

#LeftPane li.sorting:hover {
float: left;
margin: 4px;
padding: 4px;
border: 1px solid #666;
cursor: move;
}
/*
* Right-side element of the splitter.
*/
#RightPane {
float:right;
width:271px;
margin: 10px 10px 10px 0px;
background: #ffffff;
border: #b6b6b6 1px solid;
}

please find my attachments.
thanks,
sri..

[cybershot]

would setting a z-index work for this?

[srinath]

Hi cybershot,
thanks for reply.
I tried using zindex but no luck.
The scope should go beyond LeftPane to RightPane when used auto .

[cybershot]

what did you set the z-index to? I see most try a high index like 100. then try setting lower z-index to the sidebar

[srinath]

I added z-index:1000 in LeftPane

#LeftPane {
width: 150px; /* optional, initial splitbar position */
margin: 10px 0px 10px 10px;
background: #ffffff;
border: #b6b6b6 1px solid;
overflow:auto;
z-index:1000;
}

is it am i going wrong .?
please suggest me .

thanks.

[Author]

Posts