问如何在使用两个滚动器时将拖动的div带到所有的顶部？

EN

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

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

#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;
}

$(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!");
    }
});