使用两个滚动条时如何将拖动的 div 置于顶部？

Question

使用两个滚动条时如何将拖动的 div 置于顶部？

javascriptjqueryhtmlcssscroller

3

我有两个水平滚动条，需要将div从上面的滚动条拖到下面的滚动条。这个功能正常工作，但问题在于被拖动的div在拖动时会被滚动条边框遮挡。拖动来自jquery-UI，滚动条来自smoothdivscroll。

是否有方法可以修复它，或者我应该从头开始？

这是http://jsfiddle.net/yCESP/中的示例。

以下是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>

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

- Jarno

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nicolae Olariu · Answer 1

在拖放事件期间，您应该尝试使用overflow: hidden和overflow: visible来操作div.scrollWrapper。您还需要重新考虑定位顶部滚动条的方式。

可以在此处找到更新的fiddle（遗憾的是它会在拖动事件中破坏布局）。

在拖动时要监听的拖动事件：

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