jQuery UI가 삭제 가능한 자식 내에 드롭 됨

Question

요소를 컨테이너 내부로 드래그 앤 드롭하려고합니다. 컨테이너에는 드래그 가능한 요소를 삭제할 수있는 하위 컨테이너가 있습니다. 하위 컨테이너 내에서 요소를 드래그하면 하위 컨테이너가 아닌 기본 컨테이너에 요소가 추가됩니다.

파란색 div 안에 빨간색 div를 드래그 한 다음 파란색 div에 방금 추가 한 빨간색 컨테이너 안에 자주색 div를 드래그하십시오.

대신 기본 컨테이너에 추가하고 빨간색 컨테이너는 기본 컨테이너에 추가합니다.

보라색 div에 파란색 div 또는 빨간색 div를 추가하려면 어떻게해야합니까?

Answer 1

중첩 droppables (욕심 여기에 매우 중요) :

/* drop on page canvas */ 
$("#drop").droppable({ 
    accept: ".inside-drag, .drag", 
    drop: function (event, ui) { 
     var target = $(event.target); 
     var dropped = $(ui.draggable).clone().appendTo(target); 
     if (dropped.hasClass('drag')) { 
      dropped.droppable({ 
       accept: ".inside-drag", 
       greedy: true, 
       drop: function (event, ui) { 
        var target = $(event.target); 
        $(ui.draggable).clone().appendTo(target); 
       }, 
      }); 
     } 
    }, 
}); 

Demo