0

ページのメインコンテンツ領域にドラッグできる「パネル」を格納する左の列を持つページがあります。パネルを左側の列の新しい「領域」にドラッグすると正常に動作しますが、メイン コンテンツ領域にドラッグしようとすると、z-index を使用しても背後にあるように見えます。説明のために以下を作成しました。

参考までに、メイン コンテンツ エリアにはドラッグ先のエリアがさらにありますが、このスレッドの目的のためにシンプルにしています。また、私のアプリケーションでは、パネルは実際には剣道グラフであり、一部のスタイリングで !important タグを使用する必要があります。

誰でも助けることができますか？

Jスクリプト:

$('.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>
4

2 に答える 2

1

問題としてわかったことの 1 つは、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 を動的に変更したい場合は、以下を参照してみてください: jQuery を使用して最大の z-index を見つける方法

  • より高い z-index を取得する
  • 次に、この z-index + 1 をドラッグ可能な要素に設定します。
于 2013-04-17T11:14:14.703 に答える