当 Flex 子级被拖出时，Flex 父级不会重新排列答案

【问题标题】：Flex Parent Not Rearranging When A Flex Child Is Dragged Out当 Flex 子级被拖出时，Flex 父级不会重新排列
【发布时间】：2014-05-28 03:44:52
【问题描述】：

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

即使我已经应用了justify-content:space-around;，如果我将一个 flex 子项拖放到 flex 内容之外，其余项目也不会重新排列以符合 justify-content 属性。

我希望项目在拖出项目后重新排列（重新排列到 flex-start、flex-end center 或其他任何...我希望它们在移除项目后流动）

我该如何解决这个问题？

【问题讨论】：

【解决方案1】：

看起来我在检查后自己发现了问题。

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

解决方案是手动分离可拖动对象并将其附加到 drop 事件上的可放置对象

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

【讨论】：