8
В моем угловом приложении я использую ui-sortable для сортировки <ul>.Каковы варианты размещения макетов с макетом с гибкими ячейками с изменяемыми размерами и сортируемыми элементами
Элементы сами по себе изменяемы по размеру.
Это похоже на установку у меня есть:
И я хотел бы, что "4" и "5" использовать пространство на них:
Вот fiddle. Обратите внимание, что это упрощённый пример и что элементы на самом деле изменяемы по размеру пользователем и сортируются.
Библиотеки, такие как кладка, не будут делать, потому что они используют абсолютно позиционированные элементы, что приведет к отмене способа работы ui-sortable, изменение размера не приведет к нажатию на элемент.
Итак, как я могу это достичь?
- Правильно ли я понял, что это невозможно с помощью только решения css? Этот flexbox получит высоту самого высокого элемента и поместит эту высоту в «строку».
- Есть ли какое-либо решение js, которое не будет полагаться на
position: abolute, или, вернее, что оно все равно позволит мне сортировать? - Какие у меня варианты без избавление от библиотек, которые у меня уже есть?
- Каковы мои возможности избавиться от библиотек, которые у меня уже есть?
Ваши элементы, кажется, расположены в столбцах с каждым дочерним элементом в столбце равную ширине. Если это так, то вы действительно можете использовать flexbox для упорядочивания ваших элементов. Просто 3 контейнера div (1 для каждого столбца) с 'display: flex',' flex-direction: column' и присваиваем каждому дочернему div 'flex: 1 1 auto'. Задайте 'width' и' height' ваших контейнеров div. – markE
Это упрощённый пример. Ящики - это любой размер в основном (и измененный пользователем), единственное, что я могу гарантировать, это то, что они сохраняют определенную пропорцию/соотношение. – Trufa
Итак, все элементы растут или сокращаются пропорционально их первоначальным размерам? Тогда мое замечательное решение все еще работает. Во всяком случае, использование внешней библиотеки, такой как масонство или изотоп, возможно, проще, чем использование flexbox и перемещение ваших детей между контейнерами столбцов. BTW. Если вы хотите «перевернуть», вы можете использовать Google «алгоритмы упаковки бинов». Удачи с вашим проектом! – markE