拖放jquery在div标签之间不起作用

Question

我有一个带有左列的页面，其中存储“面板”，可以将其拖到页面的主要内容区域。将面板拖到左列中的新“区域”效果很好，但如果我尝试将它拖到主要内容区域，它似乎在它后面，即使使用 z-index。我创建了以下内容来说明：JSFiddle

仅供参考，主要内容区域中会有更多区域可供拖动，我只是为了这个线程的目的而保持简单。同样在我的应用程序中，面板实际上是剑道图，需要在某些样式上使用 !important 标记。

谁能帮忙？

JScript：

$('.area').droppable({
tolerance: 'fit'
});

$('.panel').draggable({
revert: 'invalid',
stop: function () {
    $(this).draggable('option', 'revert', 'invalid');
}
});

$('.panel').droppable({
greedy: true,
tolerance: 'touch',
drop: function (event, ui) {
    ui.draggable.draggable('option', 'revert', true);
}
});

CSS：

.area {
display:inline-block;
width:100px;
height:100px;
border:1px solid silver;
background-color:yellow;
padding:10px;
z-index: 10;
}
.panel {
display:inline-block;
width:30px;
height:30px;
border:1px solid silver;
background-color:white;
}
#frameContentLeft {
position: absolute !important;
top: 0px !important;
left: 0px !important;
width: 200px !important;
height: 1000px !important;
background-color: blue;
}
#mainContent {
position: absolute !important;
left: 200px !important;
top: 0px !important;
width: 100% !important;
height: 1000px !important;
background-color: red;
}

HTML：

<div id="frameContentLeft">
    <div class="area">
        <div class="panel"></div>
    </div>
    <div class="area">
    </div>
</div>

<div id="mainContent">
    <div class="area"></div>
</div>

Answer 1

您需要设置要移动的元素的 z-index...

http://jsfiddle.net/8HQt6/3/

我只是将.panel 的 z-index 设置为 11，它工作正常。

Answer 2

我发现一个问题是您的 mainContent z-index 高于其他窗格，请尝试执行以下操作：

#mainContent {
    position: absolute !important;
    left: 200px !important;
    top: 0px !important;
    width: 100% !important;
    height: 1000px !important;
    background-color: red;
    z-index:-1;
}

或者增加你正在移动的元素的 z-index。 （请记住，这样做，一旦添加更多具有更高 z-index 的 div，您将得到相同的错误）

如果你想动态改变z-index，你可以参考：How to find the highest z-index using jQuery

• 获取更高的 z-index
• 然后将此 z-index + 1 设置为可拖动元素。