私が望むのは、<ul>
その子要素の上に表示されるボックスシャドウを持つ を持ち、<li>
それらの要素を 内でソート可能にすることだけ<ul>
です。
これがjsfiddleで、コードは次のとおりです。
HTML:
<ul class="shadowed">
<div class="dragMe"></div>
</ul>
CSS:
.shadowed {
width: 256px;
height: 64px;
margin: 100px;
background: #777;
}
.shadowed:before {
content: "";
width: 256px;
height: 64px;
position: absolute;
margin: 100px;
top: 0;
left: 0;
box-shadow: inset 0px 0px 10px 2px #000;
}
.dragMe {
width: 64px;
height: 64px;
background: red;
}
ジャバスクリプト:
$(function() {
$( ".dragMe" ).draggable({
/* try dragging the red square, then remove this line and try again. */
helper: "clone",
revert: "invalid",
stack: ".dragMe"
});
$( ".shadowed" ).droppable().sortable().disableSelection();
});
この例では<ul>
、子供<li>
がいます (赤いボックス)。子要素の<ul>
上に影を表示させる疑似要素の形式のボックス シャドウを「持つ」。
jQuery-UI を介してドラッグ可能になる前の赤いボックスは、予想どおり影の下に表示されます。ただし、この要素をドラッグ可能にすると、影の上に表示されます。この状態で赤いボックスをドラッグすると、期待どおりに動作します。
要素をドラッグ可能にすると、影の前に配置されるのはなぜですか?
さらに、赤いボックスにhelper: "clone"
を指定すると、影の下に戻りますが、ドラッグすることはできなくなります。
これを修正する方法はありますか?