Question

我有一个左栏的页面，用于存储＆＃34;面板＆＃34;可以将其拖到页面的主要内容区域。将面板拖动到新的＆＃34;区域＆＃34;在左列工作正常，但如果我尝试将其拖入主内容区域，它似乎落后于它，即使使用z-index。我创建了以下内容来说明：JSFiddle

仅供参考，主要内容区域中会有更多区域要拖动，我只是为了这个线程而保持简单。同样在我的应用程序中，面板实际上是Kendo图形，需要在某些样式上使用！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设置为可拖动元素。

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

2 个答案: