jQuery UI drop在droppable儿童内

Question

我想拖放一个容器内的元素。该容器将具有可拖动元素可以被丢弃的子容器。虽然当我拖动子容器内的元素时，该元素将附加到主容器而不是子容器。

在蓝色div内拖动红色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