UI do Query - Droppables aninhados / Sortables

Estou tentando criar um aplicativo interativo da web. usando a interface do usuário do Jquery, mas estou preso aqui - não consigo encontrar uma maneira de "aninhar" minhas "caixas" (consulte o violão para obter uma demonstração). Por exemplo, suponha que haja quatro caixas -A, B , C , D. Se A for o pai com altos valores de largura e altura, arrasto e solto b emA - Isso funciona bem. Tento arrastar e soltar outra "caixa"C para dentroA, que também funciona bem. Mas quando eu tento largarD (ou mesmoC, isso não importa) paraB (Aninhamento), parece não funcionar (consulte o violino

Observe que o violino não contém "caixas" separadas, mas apenas uma caixa que é replicada várias vezes. Observe também que ainda não implementei o recurso de classificação (no violino), pois não consegui corrigir o problema de aninhamento.

JS Fiddle:http: //jsfiddle.net/JQwsf

Só para ter certeza de que não estou tentando confundir ninguém aqui, anexei uma imagem.

Qualquer ajuda é realmente muito apreciada. Obrigado

questionAnswers(1)

yourAnswerToTheQuestion