イメージから隠された重なり合ったラベルを避けるために、動的に生成されたイメージラベルにz-indexを設定します。

Question

ドラッグアンドドロップを実装しています。ユーザーはいくつかのイメージをドラッグしてdivにドロップできます。ユーザーがボタンをクリックします。

現在、私はお互いに非常に近い2つの画像（1つは別の画像の上にある）があるときに問題を抱えています。上部イメージ用に追加されたpタグは、下部イメージによって隠されます。私はそれぞれの落とした画像のz-indexを警告しようとしましたが、それは 'auto'であることがわかりました。私は、各div要素のための新しいZインデックスを割り当てる必要が推測するが、私はラベルを追加する機能で試みたが、それは同様くぼみの仕事は期待：

function generateLabel() { 
     var current = 5000; 
     $('#rightframe img').each(function() { 
     var cImgName = $(this).attr('id'); 
     var width = $(this).width(); 

     // To select the respective div 
     var temp = "div#" + cImgName; 
     $.ajax({ 
      url: '/kitchen/generatelabel', 
      type: 'GET', 
      data: { containerImgName: cImgName }, 
      async: false, 
      success: function (result) { 
       $(temp).append(result); 
       // I guess the each function loop through each div according to the time it is created, so I try to assign a decreasing z-index 
       $(temp).css('z-index', current); 
       current -= 100; 
       // To select the label for the image 
       temp += " p"; 
       // Set label width based on image width 
       $(temp).width(width); 
      } 
     }); 
    }); 

しかし、私がされ得るもの、下の画像を後でドロップした画像は上の画像のラベルを隠すことはありませんが、上の画像が下の画像よりも後にドロップされた場合、上の画像のラベルは下の画像によって非表示になります。

それは非常に特定の状況だと、私は自分自身を明確に行う願う

...

任意のフィードバックを感謝...ここにいくつかの助けを得ることができます

希望...

Answer 1

私はとても嬉しいことができていますこのちょっとした奇妙な問題の解決策を考えてください。 1つの有用なプラグイン、jquery-overlapsが2つのdomをチェックし、それらが互いに重複しているかどうかを確認します。次に私はそれに応じてラベルにZ-インデックスを割り当てます。

念のために誰がこのボトルネックに飛び込む、ここに私の解決策を示すために:)

// To assign an increasing z-index to the label 
     var count = 100; 
     $('#rightdiv p').each(function() { 
      // If any label overlaps with the image (used overlaps plugin) 
      if ($(this).overlaps($('#rightdiv img'))) { 
       // Increase count (the z-index) 
       count += 10; 
       // Set the parent div z-index 1st, if not the label z-index do not have effect 
       $(this).parent().css('z-index', count); 
       $(this).css('z-index', count); 
      } 

     }); 

ありがとう！ ：D