Flex Parent no se reorganiza cuando se arrastra a un niño Flex

Question

estoy usando css3 flex boxes y jQuery UI arrastrar y soltar.

Aunque he aplicado justify-content:space-around; Si arrastro un niño flexible y lo dejo fuera del contenido flexible, el resto de los elementos no se reorganizan para respetar el justify-content propiedad.

Mira esto JSFiddle

Quiero que los elementos se reorganicen solos después de arrastrarlos (reorganizarlos para flex-start , flex-end center o lo que sea...quiero que fluyan una vez que se elimina un elemento)

¿Cómo puedo arreglar esto?

Answer 1

Parece que encontré el problema yo mismo después de algunas inspecciones.

jQuery ui está simplemente cambiando la posición del elemento que se arrastra y se cae.Se mantiene dentro de su padre, incluso después de caer a otro gotipable.Por lo tanto, parece que los elementos CSS GENACODICETGODEDOTE no están reorganizando ...

La solución es separar manualmente el arrastre y agregarlo para que se filtre en el evento flex como

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

Referencia: Añadir Draggable a Droppable (SO)