jquery-ui로 중첩 된 드래그 앤 드롭 div 만들기

Question

jquery-ui 끌어다 놓기 플러그인으로 중첩 된 div를 만들고 싶습니다.
나는 이와 같은 것을 만들지 만, child1과 child2에 대해서는 작동하지 않습니다.
Fiddle Link

내 코드는 다음과 같다 :

$(function() { 
    $('.parent,.child1,.child2').draggable({ 
     revert: true 
    }); 
    $('.dest').droppable({ 
     accept: '.parent', 
     drop: function (event, ui) { 
      $('<div class="parent box"></div>').appendTo(this); 
     } 
    }); 
    $('.dest .parent').droppable({ 
     accept: '.child1', 
     drop: function (event, ui) { 
      $('<div class="child1 box"></div>').appendTo(this); 
     } 
    }); 
    $('.dest .parent .child1').droppable({ 
     accept: '.child2', 
     drop: function (event, ui) { 
      $('<div class="child2 box"></div>').appendTo(this); 
     } 
    }); 
}); 

Answer 1

그것은 준비 문서에 때문에 작동하지 않습니다, $ ('이명 령 .parent.')와 $ ('의 최종 도착 .parent .child1.') 어떤 것도 일치하지 않으므로 droppables는 해당 선택자에 대해 초기화되지 않습니다.

당신은

$('.dest').droppable({ 
    accept: '.parent', 
    drop: function (event, ui) { 
     $newElt = $('<div class="parent box"></div>'); 
     $newElt.appendTo(this); 
     $newElt.droppable({...}); 
    } 
}); 

내가 당신의 바이올린 편집 부모가 .dest에 제거 될 때 낙하 할 초기화 (만 생성 .parent 요소에 낙하 할 바인딩)해야합니다 :

You can see the full demo here

을

편집 :

.child1을 삭제할 때 .child2가 하나만 있는지 확인하려면 .append()를 if/else 구조체에 넣고 .find() 함수를 사용하여 length()를 검색하여 요소를 찾음) :

if($(this).find('.child2').length < 1){ //Check if the number of existing .child2 in this .child1 is inferior to 1 
    //do your append here 
}