jqueryUI可拖式自定义助手位于相对定位的div之后。

Question

我正在与一个拖放事件调度应用程序战斗。我有一些相对定位的块，我的可拖式定制助手就在它们后面。我尝试过各种修复方法，比如调整不同块的z索引，使用可拖放的“堆栈”选项等等。但是唯一有效的方法似乎是从相对块中移除“位置:相对”，这并不是一个真正的选项。

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>

联署材料：

$(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索引的简单修复：

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

为我工作得很好！

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