当 Flex 子项被拖出时，Flex 父项不会重新排列

Question

我正在使用CSS3 flex boxes 和 jQuery UI 拖放。

虽然我已经申请了 justify-content:space-around; 如果我拖动一个 Flex 子项并将其放在 Flex 内容之外，则其余项目不会重新排列以遵循 justify-content 财产。

检查这个 JSFiddle

我希望项目被拖出后重新排列（重新排列为 flex-start , flex-end center 管他呢...我希望它们在物品被移除后流动）

我怎样才能解决这个问题？

Answer 1

看来我自己检查后发现了这个问题。

jQuery UI 只是改变被拖放元素的位置。即使在下降到另一个 droppable 后，它仍然保留在其父级中。因此它看起来像 css flex 项目没有重新排列...

解决方案是手动分离可拖动并将其附加到可放置 drop 类似事件

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

参考： 将 Draggable 附加到 Droppable (SO)