Сортируемые блоки с различной высотой

Question

Я пытаюсь сделать сортируемые блоки разной высоты, используя JQuery .sortable().

Но если вы попытаетесь переместить большой блок вправо, то одна из маленьких коробочек переместится вниз и оставит пустое место.

И когда я устанавливаю float: right в родительский div вместо float: left, я не могу правильно перетащить большой блок влево.

Я понимаю, почему это происходит и как работает float, но я не могу найти обходной путь.

jsFiddle sample

UPDATE: Здесь - полная картина того, что я пытаюсь сделать. Все, что я хочу - это иметь возможность создавать эту структуру из пустой страницы, используя только 6 размеров ширины, изменяемого размера и сортируемых элементов.

Answer 1

Теперь работает Изначально у меня была почти рабочая модель с использованием второй обертки div вокруг коротких предметов.Ошибка в моей FF Win 7 (в IE9 все нормально), которая видит небольшую разницу в высоте между большим блоком и группой блоков, поэтому нижнее значение с плавающей точкой "ударяет" по одному на верхний левый (если это большой блок)и не идет влево.Когда я смотрю в Firebug, FF показывает, что вычисленная граница не 1px, а 0.916667px, поэтому я не знаю, в этом ли проблема (исправлена ​​ниже).

См. http://jsfiddle.net/tnLcg/47/. Изначально я включил возможность сортировки между короткими держателями, но я думаю, что правильной функциональностью было бы сделать такой шаг свопом.Возможно, http://www.eslinstructor.net/demo/swappable/swappable_home.html может быть реализован для работы между стеками коротких держателей.

РЕДАКТИРОВАТЬ - Firefox исправлен : я сохранил границу короткого держателя, но установил ее прозрачной (так чтовычисляет так же, как поле двойной высоты), затем использовал относительное расположение элементов внутри, чтобы отрегулировать это, и теперь он работает в FF для меня: РЕДАКТИРОВАТЬ: Улучшенная версия (4 столбца) http://jsfiddle.net/tnLcg/99/.

Answer 2

Там также этот учебник, если вы заинтересованы в чтении его. Надеюсь, вы нашли свой ответ.

edit: хотя это не jquery.

Answer 3

Если вы хотите, чтобы две половины могли перемещаться независимо , разделите их на 2 столбца, а затем используйте параметр connectWith, чтобы сделать их перетаскиваемыми между двумя:

http://jsfiddle.net/ujahd/

Если вы хотите, чтобы две половины оставались сгруппированными вместе , то сгруппируйте их в один делитель:

http://jsfiddle.net/W5VzD/1/

Answer 4

Вы можете попробовать jQuery Masonry для такого рода макетов (если я правильно понял ваш вопрос).