Модифицировать и переключать позиции плавающих элементов

Question

Как можно изменить положение плавающих элементов?Возможно ли это с простым HTML / CSS?Если нет, то что было бы самым простым способом с использованием JavaScript без jQuery и / или без него?

Пример: http://jsbin.com/ufeme3/2

Answer 1

Самый простой способ - выбрать первый элемент и поместить его после третьего, используя метод insertAfter.Их выбирают четвертый элемент и вставляют перед первым элементом в строке, используя insertBefore.Но использование этого метода может привести к ситуации, когда элементы будут находиться в неправильных местах некоторое время в момент перестановки.

Второй способ может выглядеть следующим образом:

1. Обернуть все 5 элементов внекоторая оболочка с position: relative.
2. Перед переключением элементов возьмите позицию (например, метод jQuery position) каждого элемента и установите его для них (top, left и т. д.), дополнительно добавивposition: absolute к ним.
3. Скрыть первый и четвертый элемент - другие элементы останутся на своих позициях, потому что они позиционируются абсолютно.
4. Поместите снятые элементы в правильные места.
5. Удалить ранее добавленные свойства CSS.

Элементы должны оставаться на своих местах и ​​заменяться, не перемещая других.