Question

我正在与一个拖放事件调度应用程序进行斗争。我有一些相对定位的块，我的draggable的自定义助手就在它们后面。我已经尝试了各种修复，例如调整不同块的z-indices，使用可拖动的“堆栈”选项等。但唯一可行的是从相对块中删除“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 draggable自定义助手落后于相对定位的div

1 个答案: