Гибкий Родительский Элемент Не Перестраивается При Перетаскивании Гибкого Дочернего Элемента

Question

Я использую css3 flex boxэс и jQuery UI перетаскивайте.

Несмотря на то, что я подал заявление justify-content:space-around; Если я перетаскиваю дочерний элемент flex и помещаю его за пределы содержимого flex, остальные элементы не перестраиваются в соответствии с justify-content собственность.

Проверь это JSFiddle

я хочу, чтобы элементы переупорядочивались после того, как элемент будет извлечен (переставить на flex-start , flex-end center или что бы то ни было еще...я хочу, чтобы они текли, как только элемент будет удален)

Как я могу это исправить?

Answer 1

Похоже, я сам обнаружил проблему после некоторого осмотра.

Пользовательский интерфейс jQuery просто изменяет положение перетаскиваемого элемента.он остается внутри своего родительского элемента даже после перехода к другому удаляемому объекту.следовательно, это выглядит как css flex элементы не переставляются...

Решение состоит в том, чтобы вручную отсоединить перетаскиваемый объект и добавить его в droppable on drop событие, подобное

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

Ссылка: Добавить перетаскиваемое к удаляемому (SO)