Flex Parent Not Rearranging When A Flex Child Is Dragged Out
Question
I'm using css3 flex box
es 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?
Solution
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)