Flex 하위를 드래그할 때 Flex 상위가 재정렬되지 않음

Question

나는 CSS3을 사용하고 있습니다 flex box에스와 jQuery UI 끌어서 놓기.

제가 신청했는데도 justify-content:space-around; Flex 하위 항목을 드래그하여 Flex 콘텐츠 외부에 놓으면 나머지 항목이 재배열되지 않습니다. justify-content 재산.

이것을 확인하세요 JSFiddle

항목을 끌어낸 후 항목을 자동으로 다시 정렬하고 싶습니다(다음으로 다시 정렬). flex-start , flex-end center 또는 무엇이든...항목이 제거되면 흐름이 흐르기를 원합니다)

이 문제를 어떻게 해결할 수 있나요?

Answer 1

몇 가지 검사를 한 후에 문제를 직접 발견한 것 같습니다.

jQuery UI는 단순히 드래그 앤 드롭되는 요소의 위치를 ​​변경하는 것입니다.다른 드롭 가능 항목에 떨어뜨린 후에도 상위 항목 안에 유지됩니다.따라서 CSS가 보입니다. flex 항목이 재정렬되지 않습니다...

해결책은 드래그 가능 항목을 수동으로 분리하고 드롭 가능 항목에 추가하는 것입니다. drop 같은 이벤트

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

참조: Droppable에 Draggable 추가(SO)