Genitore flessibile che non riorganizza quando un figlio flessibile viene trascinato

Question

Sto usando CSS3 flex boxs e jQuery UI Trascina e Drop.

Anche se ho applicato justify-content:space-around; se trascinando un bambino flessibile e lasciarlo fuori dal contenuto flessibile, il resto degli elementi non riorganizzando per onorare la proprietà justify-content.

Controlla questo jsfiddle

Voglio che gli articoli si reinsordassero dopo che un articolo viene trascinato (riorganizzare in generatori flex-start, flex-end center o cosa mai ... Voglio che fluissero una volta che un oggetto viene rimosso)

Come posso risolvere questo?

Answer 1

Sembra che abbia trovato il problema me stesso dopo qualche ispezione.

JQuery UI sta semplicemente cambiando la posizione dell'elemento trascinata e rilasciata.Rimane all'interno del suo genitore anche dopo aver lasciato cadere a un altro droppable.Quindi sembra che gli elementi flex CSS non riorganizzano ...

La soluzione è distaccare manualmente il trascinamento e aggiungerlo a Droppable sull'evento drop come

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

.

Riferimento: APPEND DRANGGACK per eseguire il droppable (quindi)