Flex Parent ordnet sich nicht neu an, wenn ein Flex Child herausgezogen wird

Question

Ich benutze css3 flex boxes und jQuery UI ziehen und ablegen.

Obwohl ich mich beworben habe justify-content:space-around; Wenn ich ein Flex-Kind ziehe und es außerhalb des Flex-Inhalts ablege, werden die restlichen Elemente nicht neu angeordnet, um das zu berücksichtigen justify-content Eigenschaft.

Überprüfen Sie dies JSFiddle

ich möchte, dass sich die Elemente nach dem Herausziehen eines Elements neu anordnen (neu anordnen nach flex-start , flex-end center oder was auch immer...ich möchte, dass sie fließen, sobald ein Gegenstand entfernt wurde.)

Wie kann ich das beheben?

Answer 1

Sieht so aus, als hätte ich das Problem nach einigem Inspizieren selbst gefunden.

Die jQuery-Benutzeroberfläche ändert einfach die Position des Elements, das gezogen und abgelegt wird.es bleibt in seinem übergeordneten Element, auch nachdem es auf ein anderes ablegbares Element gefallen ist.daher sieht es so aus wie das CSS flex elemente werden nicht neu angeordnet...

Die Lösung besteht darin, das Ziehbare manuell zu trennen und es an droppable anzuhängen drop veranstaltung wie

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

Referenz: Ziehbar an ablegbar anhängen (SO)