フレックスの子がドラッグアウトされたときに並べ替えられないフレックス

Question

CSS3 flex boxesとjQuery UIドラッグアンドドロップを使用しています。

Flexの子をドラッグしてFlexコンテンツの外側にドロップすると、justify-content:space-around;プロパティを称えるために、残りの項目は並べ替えられていません。

この jsfiddle

アイテムがドラッグアウトされた後にアイテムを再配置するようにしたい（justify-content、flex-start flex-endまたはこれまでに並べ替えることができます。

どうすればいいですか？

Answer 1

は、検査後に問題を見つけたように見えます。

jQuery UIは、ドラッグアンドドロップされている要素の位置を単に変更しています。他の糞を落とした後も親の中に残ります。したがって、CSS flex項目が並べ替えられていないように見える...

解決策は、ドラッグ可能なドラッグ可能な手動で切り離し、それを追加することは

のようなdropイベントでドロップ可能なものに追加することです。

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

.

参照：ドラッグ可能なドラッグ可能な（so）