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

Question

我正在与一个拖放事件调度应用程序作斗争。我有一些相对定位的块，我的draggable的自定义助手在它们后面。我尝试过各种修复方法，例如调整不同块的z索引，使用可拖动的"堆栈"选项等。但唯一有效的方法似乎是从相对块中删除"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/