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