0

同様の問題に関する別の質問を見つけましたが、解決策を適用する方法の頭も尻尾もできませんでした。私のウェブページは、互いに重なり合うドラッグ可能な画像の単純な組み合わせです. クリックしたときに画像が他の画像の上に表示されるようにするだけです。

各メイジは現在、ドラッグ用のスパン要素として機能しています。ソリューションを機能させるには、すべての個々の画像を div 要素にする必要がありますか? 各画像に初期 z-index を適用する必要がありますか? (現在、Z インデックスは適用されていません)

ここに私が取り組んでいるコードがあります

<div id="wrapper">

<span id="drag" style=""><a href="javascript:void(0)" id="paragraphAnchor">    
<img src="images/logoweb.png" width="198" height="198" style="" /></a></span>

<div id="text">   

<p id='a'>

<span style="background:#0C6;">

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text   
<br/><br/>


<a href="#">website</a>

<br/><br/>

<a href="javascript:void(0)" id="paragraphAnchor5">close</a>


</p>

</span>

および各要素の JQuery

$(document).ready(function()

                        {

                            $('#drag').draggable( { containment: 'window' } );/*.resizable();*/






                        });


 $(document).ready(function()
                       {

                        $('p#a').hide();
                        $('p#b').hide();


                        $('a#paragraphAnchor') .click(function() {
                             return false;
                              }).dblclick(function() 

                                                             {

                                                                 $('p#a').slideToggle('slow');
                                                                 $('p#b').hide();


                                                             });

これは、同様のクエリで見つけたコードです。ソリューションを自分のコードに統合しようとしていますが、どこが間違っているのかわかりません..要素を混乱させているか、私の側でコーディングが悪い可能性があります

JQuery を使い始めたばかりですが、ソリューションに適合するための助けをいただければ幸いです。きっと単純なことなんだろうな

ありがとう ！

4

1 に答える 1

0

あなたのコードは、あなたがやろうとしていると言っていることに特に言及していないようです。画像は 1 つしかなく、クリックすると false が返されます。それをダブルクリックすると、下の非表示の段落が表示されます。(一般に、人々は Web ページ上のものをダブルクリックする必要があるとは思っていません。ほとんどの場合、それを使用しないことをお勧めします。)

そうは言っても、あなたが求めていることは理解できたと思います。幸いなことに、それは非常に簡単です。これがどのように機能するかを示すフィドルです：http://jsfiddle.net/ce5gw/2/

それをいじってみると、それがどのように機能するかがわかります。3 つの赤いブロックは、画像のように動作するように設計された div です。div.imgGoesHere要素を画像に置き換えることができます。それらをドラッグできることに気付くでしょう。ドラッグすると、ドラッグしているものが常に上に表示されます。最初の div をドラッグして、部分的に 2 番目の div の上に配置します。ここで 2 番目をクリックすると、ドラッグしなくても前面に表示されます。問題が解決しました。

それでは、コードについて説明します。

   $('.drag').draggable({
        containment: 'parent',
        stack: '.drag'
    })

クラスdragのすべてをドラッグ可能なアイテムにすることから始めます。それらは、親要素のスペース内でのみドラッグできるように制限されていますdiv.wrapper。必要に応じて、これを「ウィンドウ」に戻すことができます。ここで最も重要なことは、stack: '.drag'. dragこれにより、アイテムをドラッグしているときに、常にz オーダーでクラスのアイテムの上に表示されるように設定されます。

しかし、アイテムをドラッグするのではなく、クリックしたときに前面にポップしたい場合はどうでしょうか? それが次のブロックです。

   .on('click', function () {
        var el = $(this), // The image that was clicked
        max = 0;
        // Find the highest z-index
        $('.drag').each(function () {
            // Find the current z-index value
            var z = parseInt($(this).css("z-index"), 10);
            // Keep either the current max, or the current z-index, whichever is higher
            max = Math.max(max, z);
        });
        // Set the box that was clicked to the highest z-index plus one
        el.css("z-index", max + 1);
    });

これは、リンク先の他の質問から直接得られたものであり、そこではかなりよく説明されています。class の要素dragがクリックされるたびに (これは上記の最初の宣言にチェーンされているため、ここでも class の要素について話していdragます)、これは class のすべての項目を調べdrag、最高の z-index を持つものを見つけて、設定しますクリックされた要素の新しい z-index は、その数値より 1 つ大きくなります。

ご不明な点がございましたら、お気軽にお問い合わせください。

于 2013-02-22T16:23:22.850 に答える