Flex Parent ordnet sich nicht neu an, wenn ein Flex Child herausgezogen wird
Frage
Ich benutze css3 flex box
es 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?
Lösung
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)