1

私がしなければならないこと: 2 つの div を並べて作成する必要があります。各 div 内には、絶対位置の画像が必要です。これらの画像をある div から別の div にドラッグする必要もあります。

私の問題は、ドラッグされた画像が他の div の後ろに消えることです。これは、黄色の div が青色のコンテナの後ろに消えるという問題を示すjsFiddleです。

私の質問:黄色の div が赤いコンテナーをアンカーとして持っている間に、青いコンテナーに黄色の div の z-index (絶対位置) を認識させる方法はありますか?

いくつかの背景：あるリストから画像をドラッグして、別のソート可能なリストにドロップしたいので、これを達成する必要があります。jQuery UI のドラッグ可能、ドロップ可能、およびソート可能なメソッドでこれを実現したいと考えています。これまでのところ、すべてが簡単で標準的です。

ただし、どちらの画像リストもスライド可能である必要があります。これ自体は、jQuery UI のスライダー メソッドを使用すると比較的簡単に実現できます。ただし、画像をスライドさせるには、絶対位置を操作する必要があります (画像のリストの実際のスライドは、絶対位置を変更することによって実現されます)。したがって、 jsFiddleに示されている相対位置と絶対位置を回避する方法はありません。

いつものように、どんな助けも大歓迎です！

4

1 に答える 1

3

次のいずれかを実行できます。

  1. コンテナー内の要素にのみz-index を適用します。(そして、コンテナーに z-index を適用しないでください。そうしないと、独自のスタック コンテキストが設定され、その中の何かに適用される z-index は、新しいコンテキストに対してのみ相対的になります。)

  2. 2 つのコンテナから position:relative 宣言を削除します。z-index 宣言がないと、位置指定された要素が位置指定されていない要素の前に表示されます。

スタッキング コンテキストのわかりやすい説明は、http: //timkadlec.com/2008/01/detailed-look-at-stacking-in-css/にあります。

更新
jQuery/UI ドラッグ可能の helper:clone オプションを試すことができます。

ドラッグしたいアイテムを「クローン」するため（「ドラッグ表示に使用するため」）、元のアイテムと同じコンテナにバインドされません。ただし、「クローン」アイテムがドラッグされている間、アイテムが元の位置に表示されるという事実に対処する必要があります。

draggable の start イベントと stop イベントを使用して、元のアイテムを非表示にして再び表示することができます。

$('.myDiv')
    .draggable({
        helper: 'clone',
        start: function () {
            $(this).css('visibility', 'hidden');
        },
        stop: function () {
            $(this).css('visibility', 'visible');
        }
    })

...しかし、Andrius が提案するように、アイテムがドロップされたときに何が起こるかに対処する必要があります。そのために、この投稿を見ることをお勧めします: clone node on drag

幸運を。

于 2012-05-14T10:07:55.897 に答える