將z-index設置爲動態生成的圖片標籤，以防止圖片中出現重疊標籤

我正在實施拖放操作，用戶可以拖動幾張圖片並將它們拖放到div中，並且我將動態追加ap標籤作爲標籤添加到每張圖片一次用戶點擊一個按鈕。將z-index設置爲動態生成的圖片標籤，以防止圖片中出現重疊標籤

目前我遇到問題時，我有兩個圖像是非常接近彼此（一個在另一個之上）。頂部圖像的附加p標籤將被底部圖像隱藏。我試圖提醒每個丟失圖像的z-index，並發現它是'自動'。我想我需要分配一個新的z-index爲每個格，但我在我追加標籤功能嘗試，它力的工作是期望：

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); 
      } 
     }); 
    });

不過，我得到的是，底部圖像稍後丟棄的圖像不會隱藏上面的圖像標籤，但如果上面的圖像比下面的圖像下落後，上面的圖像標籤被底部圖像隱藏起來。

這是一個非常特殊的情況，我希望我做的讓自己清楚......

希望能得到一些幫助這裏...感謝任何反饋...

來源

2011-11-11 shennyL

做一些拖放操作，直到問題出現爲止......檢查這些元素的z索引。我已經扔你的腳本我認爲你不會得到你的結果，除了Z指標。 – ggzone

我很高興，我能爲這個奇怪的問題找出解決方案。我得到了一個有用的插件，jquery重疊檢查兩個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

來源

2011-11-12 02:12:06 shennyL

將z-index設置爲動態生成的圖片標籤，以防止圖片中出現重疊標籤

回答

相關問題