Flex Pai Não Reorganizando Quando Um Flex Filho É Arrastado Para Fora

Question

Eu estou usando css3 flex boxes e jQuery UI arrastar e soltar.

Mesmo que eu tenha aplicado justify-content:space-around; Se eu arrastar um flex criança e solte-o fora do flex conteúdo, o resto dos itens não estão reorganizando a fim de honrar o justify-content propriedade.

Verifique isso JSFiddle

eu quero os itens para re-organizar-se depois que um item é arrastado para fora (para reorganizar flex-start , flex-end center ou que nunca o...eu quero que eles fluxo uma vez que um item é removido)

Como posso corrigir isso?

Answer 1

Parece que eu encontrei o problema sozinho após alguns inspeção.

o jQuery UI é simplesmente mudando a posição do elemento a ser arrastados e soltos.ele permanece dentro de ti pai, mesmo depois de ter caído para soltar outro.daí ele se parece com o css flex itens não estão reorganizando...

A solução é separar manualmente o arrastáveis e acrescentá-lo a soltar no drop evento como

ui.draggable.detach().appendTo($(this)); //where this refers to the droppabe

Referência: Acrescentar Direto para Soltar (PARA)