2

私が望むのは、<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"を指定すると、影の下に戻りますが、ドラッグすることはできなくなります。

これを修正する方法はありますか？

4

1 に答える 1

2

そのため、要素の上にあるボックス シャドウ オーバーレイにより、下の div をクリックできなくなります。

別のdivを追加し、別のmodも作成することで、これを明確にするためにjsfidleの例を更新しました

 <div class="dragMe"> </div>

http://jsfiddle.net/rrETm/4/

これを解決するには、クリックを傍受し、ボックス シャドウ オーバーレイを非表示にしてからクリックをシミュレートし、ボックス シャドウを再表示することが考えられますが、少し複雑に思えます。このアプローチで開始するいくつかのコードは、以下のリンクされた例にあります。

Jqueryパスクリックスルー要素

于 2013-03-18T03:51:56.063 に答える