How to bring dragged div to top of everything while using two scrollers?

Question

I have two horizontal scrollers and I need to drag div from upper scroller to lower scroller. This is working fine but the problem is that the dragged div gets lost under the scroller borders while dragged. Dragging comes from jquery-UI and scrollers smoothdivscroll.

Is there a way to fix it or should i start from scratch?

Here it is in http://jsfiddle.net/yCESP/

Here is list of jquery plugins.

jquery-ui-1.10.4.custom.min.js
jquery.mousewheel.min.js
jquery.kinetic.min.js
jquery.smoothdivscroll-1.3-min.js
jquery.ui.touch-punch.min.js

Here is code

HTML

<div id="wrapper">
    <div id="mainColumn">
        <div id="mixedContent2" >
            <div class="koko_koira" style="background-color:#4254a3;color:white;">
                <br/>
                <p>1</p>
            </div> 
            <div class="koko_koira" style="background-color:#4254a3;color:white;">
                <br/>
                <p>2</p>
            </div> 
            <div class="koko_koira" style="background-color:#4254a3;color:white;">
                <br/>
                <p>3</p>
            </div> 
            <div class="koko_koira" style="background-color:#4254a3;color:white;">
                <br/>
                <p>4</p>
            </div> 
            <div class="koko_koira" style="background-color:#4254a3;color:white;">
                <br/>
                <p>5</p>
            </div> 
            <div class="koko_koira" style="background-color:#4254a3;color:white;">
                <br/>
                <p>6</p>
            </div> 
            <div class="koko_koira" style="background-color:#4254a3;color:white;">
                <br/>
                <p>7<br></p>
            </div>
        </div>
        <div id="mixedContent" >
            <div class="contentBox" style="background-color:#4254a3;color:white;">
                <br/>
                <p>FIRST</p>
            </div> 
            <div class="contentBox" style="background-color:white;color:black;">
                <p>SECOND</p>
            </div>
            <div class="contentBox" style="background-color:grey;color:white;">
                <p>THIRD</p>
            </div>
        </div>
    </div>
</div>

CSS

#wrapper {
    z-index:0;
}

#mainColumn {
    z-index:0;
}

#mixedContent {
    width:80%;
    height: 330px;
    position: relative;
    display: block;
    z-index:1;
    border:2px;
    border-style:solid;
    border-color:#093;
}

#mixedContent .contentBox {
    position: relative;
    float: left;
    display: block;
    height: 250px;
    width: 250px;
    border: solid 1px #ccc;
    padding: 10px;
    margin: 0px 5px;
    font-family:Verdana, Geneva, sans-serif;
    font-size:12px;
    text-align:center;
    -webkit-border-radius:5px; 
    -moz-border-radius:5px; 
    border-radius:5px;
    margin:5px 5px 5px 5px;
    box-shadow: 2px 2px 2px #585858;
    z-index:0;
}

#mixedContent .contentBox img {
    margin-bottom: 10px;
}

#mixedContent .contentBox p {
    font-size: 10px;
}

#mixedContent2 {
    width:80%;
    height: 330px;
    position: relative;
    display: block;
    z-index:1;
    border:2px;
    border-style:solid;
    border-color:#06C;
}

.koko_koira {
    position: relative;
    float: left;
    display: block;
    height: 200px;
    width: 128px;
    border: solid 1px #ccc;
    padding: 10px;
    margin: 0px 5px;
    font-family:Verdana, Geneva, sans-serif;
    font-size:12px;
    text-align:center;
    -webkit-border-radius:5px; 
    -moz-border-radius:5px; 
    border-radius:5px;
    margin:5px 5px 5px 5px;
    box-shadow: 2px 2px 2px #585858;
    z-index:50;
}

.koko_koira img {
    margin-bottom: 10px;
}

JS

$(document).ready(function() {
    $("#mixedContent").smoothDivScroll({
        hotSpotScrolling: false,
        touchScrolling: true
    });
});

$(document).ready(function() {
    $("#mixedContent2").smoothDivScroll({
        hotSpotScrolling: false,
        touchScrolling: true
    });
});

$( ".koko_koira" ).draggable({
    revert: "invalid",
    helper: "clone",
    cursor: "move",
});

$( ".contentBox" ).droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {
        $(this)
            .addClass("ui-state-highlight")
            .find("p")
            .html("Dropped!");
    }
});

Answer 1

You should play with overflow: hidden and overflow: visible on div.scrollWrapper during drag/drop events. You also need to rethink the way you're positioning your top scrollers.

An updated fiddle (which sadly breaks up layout on drag event) can be found here.

Drag events to listen to while dragging:

drag: function() {
    $('div.scrollWrapper').css('overflow', 'visible');
},
stop: function() {
    $('div.scrollWrapper').css('overflow', 'hidden');
}