Flex Parent Not Rearranging When A Flex Child Is Dragged Out

Question

I'm using css3 flex boxes and jQuery UI drag and drop.

Even though i've applied justify-content:space-around; If i drag a flex child and drop it outside the flex content, the rest of the items are not rearranging in order to honor the justify-content property.

Check this JSFiddle

i want the items to re-arrange themselves after an item is dragged out (rearrange to flex-start , flex-end center or what ever... i want them to flow once an item is removed)

How can i fix this?

Answer 1

Looks like i found the issue myself after some inspecting.

jQuery UI is simply changing the position of the element being dragged and dropped. it stays inside it's parent even after dropping to another droppable. hence it looks the the css flex items are not rearranging...

The solution is to manually detach the draggable and append it to droppable on drop event like

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

Reference: Append Draggable to Droppable (SO)