Javascript 如何在使用两个滚动条时将拖动的div置于所有内容的顶部？

我有两个水平滚动条，我需要把div从上滚动条拖到下滚动条。这工作正常，但问题是拖动的div在拖动时会丢失在滚动条边框下。拖动来自

jqueryui

和滚动条

有没有办法修复它，或者我应该从头开始

在这里

下面是jquery插件的列表

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

这是代码

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>

JS

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

---

在拖放事件期间，您应该在

div.scrollWrapper

上玩

overflow:hidden

和

overflow:visible

。你还需要重新思考你定位顶部滚动条的方式

可以找到一个更新的提琴（在拖动事件中很遗憾地破坏了布局）

拖动时拖动要侦听的事件：

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

---

谢谢这有助于我将所有内容包装在另一个溢出的dv中：隐藏，所以现在看起来它工作得非常完美。：）这是。很高兴它有帮助！如果你认为这是有帮助的，你可以把它标记为答案。谢谢，我太匆忙了。滚动可以工作，但当拖动通常位于边界外的内容时，它会在开始处跳过行。所以可以从数字中拖动可见的数字（我更改了，所以它使用标记作为处理程序，这样就可以很容易地滚动到上面的行divs）。