복제 된 요소에 고유 ID 부여

Question

복제 할 수있는 드래그 가능한 항목이 있습니다. 나는 각각의 복제본을 고유하게하여 각 데이터베이스를 데이터베이스에 삽입 할 수 있기를 원했습니다 (좌표는 나중에 수행됩니다).

$(document).ready(function() { 
    cntb1 = 0; 
    cntb2 = 0; 
    cntb3 = 0; 
$(".droppable").droppable({ 
    accept: '#b1, #b2, #b3',   
     drop: function(event, ui) { 
     if(ui.draggable.attr('id')=='b1'){ 
       cntb1++; //counts clones 
       $(this).append($(ui.helper).clone());    
       $(".droppable .drag").addClass("component"); 
       $(".component").removeClass("drag"); 
       $(".component").resizable({aspectRatio: 'true' }).parent().draggable({ //parent() -> both draggable & resizable work 
         containment: '.droppable', //cursor: 'move', grid: [3,3]       
       }).attr('id', 'b1c'+cntb1); //change id 
       $("#status1").append('b1c'+cntb1); 
      } 
     else if(ui.draggable.attr('id')=='b2'){ 
       cntb2++; //counts clones 
       $(this).append($(ui.helper).clone());    
       $(".droppable .drag").addClass("component"); 
       $(".component").removeClass("drag"); 
       $(".component").resizable({aspectRatio: 'true' }).parent().draggable({ //parent() -> both draggable & resizable work 
         containment: '.droppable', //cursor: 'move', grid: [3,3]       
       }).attr('id', 'b2c'+cntb2); //change id 
       $("#status2").append('b2c'+cntb2); 
      } 
     else if(ui.draggable.attr('id')=='b3'){ 
       cntb3++; //counts clones 
       $(this).append($(ui.helper).clone());    
       $(".droppable .drag").addClass("component"); 
       $(".component").removeClass("drag"); 
       $(".component").resizable({aspectRatio: 'true' }).parent().draggable({ //parent() -> both draggable & resizable work 
         containment: '.droppable', //cursor: 'move', grid: [3,3]       
       }).attr('id', 'b3c'+cntb3); //change id 
       $("#status3").append('b3c'+cntb3); 
      } 

    } 
}); 

$(".drag").draggable({ 
      helper:'clone', 
      appendTo: 'body', //para maka drag padung gawas sa accordion 
      cursor: 'move' 
      }); 
$("#accordion").accordion({     
      autoHeight: false,     
      collapsible: true, 
      active: false 
}); 
}); 

는하지만 문제는 내가 새로운 클론을 만들 때마다 이전 클론의 ID가 새로운 하나의 ID로 대체됩니다 있다는 것입니다. 나는이 같은 ID의의를 스타일링하여 시험 :

 #b1c3{ background:#00FF00; } 
     #b1c2{ background:#CCFF00; } 

내 HTML이 BTW 같다 :

<div id="accordion"> 
<h3><a href="#">Buttons</a></h3> 
    <div class="div-table">   
     <div class="div-table-row"> 
     <div class="div-table-col"><img src="button_final/button_1.gif" id="b1" class="drag"/></div> 
     <div class="div-table-col"><img src="button_final/button_2.gif" id="b2" class="drag"/></div> 
     <div class="div-table-col"><img src="button_final/button_3.gif" id="b3" class="drag"/></div> 
     </div> 
      </div> 
</div> 
<div id="frame" style="border:dotted; height:500px; width:60%; float:left" class="droppable"> 
<h3 id="status1" style="height:30%;"></h3> 
<h3 id="status2" style="height:30%;"></h3> 
<h3 id="status3" style="height:30%;"></h3></div> 

추신. 나는 사람들의 도움으로 모든 것을 모았다. 나는 너에게 내 인생을 빚 졌어!

Answer 1

이 확실히 작동합니다, 변경이 유는 낙하 할에 추가시 ID를 할당해야한다는 것입니다, 이전에 u는 구성 요소 클래스의 모든 요소에 ID를 할당 한 것은 귀하의 경우 잘못이다 . 그래서 단 하나의 변화는 다음과 같습니다 돕는

$(this).append($(ui.helper).clone().attr("id",'b1c'+cntb1)); 

Answer 2

새로 추가/복제 된 요소가 아닌 $(".component") 인 모든 것을 선택합니다.

해당 숫자로만 제한해야합니다. 당신이 할 수있는

것은, 당신이 그것을

//$(this).append($(ui.helper).clone()); 
var newClone = $(ui.helper).clone(); 
$(this).append(newClone); 
//than you can manipulate newClone to add/remove classes. Use find(), etc 

Answer 3

에 복제 된 요소에 ID를 사용하지 않는 것이이 문제를 해결하는 가장 좋은 방법을 참조를 저장할 수 있습니다, 대신 elemtn를 추가하고 그것을 발견하다 클래스 이름 만 사용합니다. 필요한 경우 하나의 상위 오브젝트에 ID를 사용할 수 있지만 실제로 복제 된 오브젝트에서 ID를 유지하면 복제 된 요소에서 ID를 수정하지 않아도됩니다.

복제 할 실제 HTML을 보여 주면 고정 값을 수정할 필요가 있으므로 어떤 id 값을 수정해야하는지 알기 때문에이 ID를 수정하는 데 도움이 될 수 있습니다.

Answer 4

여기에 해결책이 있습니다. 해결책은 크기를 조정하기 전에 구성 요소에 ID를 할당하는 것입니다.

$(".component").removeClass("drag").attr('id', 'b1c'+cntb1); 
        $(".component").resizable({aspectRatio: 'true' }).parent().draggable({ //parent() -> both draggable & resizable work 
          containment: '.droppable', //cursor: 'move', grid: [3,3]       
        }); 

Answer 5

덕분에 모든 사람을! 나는 처음부터 무엇을하려했는지 혼란 스럽다. 그러나 다른 사람이 작업을 수행하고 싶었 어쨌든 경우,이 도움이 될 수 있습니다 :

$(".droppable .drag").addClass("component").attr('id', 'b1c'+cntb1); /*basin if ako e change ang id diri */

$("#b1c"+cntb1).removeClass("drag"); //nya ang id name ako e call instead na ang class

$("#b1c"+cntb1).resizable({aspectRatio: 'true' }).parent().draggable({ containment: '.droppable' });

이 나를 위해 일했다. 그 아이디어에 대해 @Mehul Hingu에게 감사드립니다. :)