동적으로 생성 된 이미지 레이블에 z- 인덱스를 설정하여 이미지에서 숨겨진 레이블이 겹치지 않도록 방지합니다.

Question

끌어서 놓기를 구현할 때 이미지를 몇 개 드래그하여 div에 놓을 수 있으며 각 이미지에 한 번 레이블로 ap 태그를 동적으로 추가 할 수 있습니다. 사용자가 버튼을 클릭하십시오.

현재 2 개의 이미지가 서로 매우 가깝고 (하나는 다른 이미지 위에 있음) 문제가 발생합니다. 상단 이미지의 추가 된 p 태그는 하단 이미지에 의해 숨겨집니다. 나는 각 낙하 한 심상을 위해 z 지수를 경고하는 것을 시도하고, 그것이 "자동"다는 것을 알아 냈다. 나는 각 사업부에 대한 새로운 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

내가 다행 I 수 그 이 이상한 문제에 대한 해결책을 찾아야합니다. 하나의 유용한 플러그인 인 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