Grow your CSS skills. Land your dream job.

Drag and Drop with overflow auto

  • # October 7, 2009 at 1:27 pm

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

    # October 10, 2009 at 1:33 pm

    would setting a z-index work for this?

    # October 12, 2009 at 1:47 am

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

    # October 12, 2009 at 1:59 am

    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

    # October 12, 2009 at 2:07 am

    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.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".