jqueryUI 可拖动自定义助手落后于相对定位 div

Question

我正在与拖放式事件安排应用程序作斗争。我有一些相对定位的块，我的可拖动对象的自定义助手在它们后面。我尝试了各种修复，例如调整不同块的 z 索引，使用可拖动的 "stack" 选项等。但似乎唯一有效的方法是从相关块中删除 "position: relative"，这真的不是一个选择。

HTML:

<div id="container-one">
    <div class="draggable" id="drag-block"></div>

</div>

<div id="container-two">
    <div class="static-block" id="block-one"></div>
    <div class="static-block" id="block-two"></div>
    <div class="static-block" id="block-three"></div>
</div>

JS:

$(function(){
    $('.draggable').draggable({
        cursorAt: { bottom: 0, left: 20 },
        helper: function( event ) 
        {
            return $( "<div class='drag-helper'><h2><i class='fa fa-plus-circle'></i></h2></div>" );
        }
    });
});

CSS:

#container-one {
    background-color: orange;
    width: 200px;
    height: 400px;
    display: inline-block;
}

#drag-block {
    background-color: purple;
    color: white;
    text-align: center;
    height: 50px;
    width: 50px;

}

#container-two {
    background-color: green;
    height: 400px;
    width: 500px;
    display: inline-block;
}

.static-block {
    height: 80px;
    width: 40px;
    background-color: cornflowerblue;
}

#block-one {
    position: relative;
    top: 0;
    left: 40px;
}

#block-two {
    position: relative;
    top: 50px;
    left: 70px;
}

#block-three {
    position: relative;
    top: 25px;
    left: 140px;
}

.drag-helper {
    color: yellow;
    text-shadow: 1px 1px 2px #363636;
}

p {
    font-size: 14pt;
}

有什么想法吗？ http://jsfiddle.net/voveson/08L32rye/

Answer 1

只需使用 z-index 进行简单修复：

.drag-helper {
    color: yellow;
    text-shadow: 1px 1px 2px #363636;
    z-index: 10; // <---
}

对我来说工作得很好！

http://jsfiddle.net/myawfhx6/1/

jqueryUI 可拖动自定义助手落后于相对定位 div

jqueryUI draggable custom helper goes behind relatively positioned div

css

jquery

jquery-ui