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

Question

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

仅供引用，主要内容区域中会有更多区域可供拖动，我只是为了本主题的目的而保持简单。同样在我的应用程序中，面板实际上是 Kendo 图，需要在某些样式上使用 !important 标签。

有人能帮忙吗？

脚本:

$('.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，它工作正常。