Sortable и TinyMCE или манипулирование блоками содржащими iframe
Для библиотеки jQuery есть расширение jQuery UI, в котором есть метод Sortable. Благодаря которому можно удобно сортировать блоки на странице, простым перетаскиванием мыши. Этот метод был использован для изменения последовательности элементов в теле страницы (текстовых блоков, котороые я получал делая рерайт статей, фото, и прочих, таких как карта google. После того как идея была реализована и воплощена в жизнь, я столкнулся с одной очень неприятной проблемой. При перемещении элементов содержащих TinyMCE, внутри редактора пропадал контент. На сколько я понял, это было связанно с тем что метод sortable проводя манипуляции с DOM не перемещал содержимое iframe. Так же все скрипты после вставки заново выполнялись, что тоже было не приятно.
Поиски в интернете натолкнули меня на одну простую и не затейливую идею, суть которой сортировать блоки не содержащие контента, а лишь пустые области. А контент находится поверх этого, а его позиционирование происходит с помощью скриптов.
Не затейливый скрипт который надо запускать по кругу:
function redrrr() { $('.pholder').each(function() { var offs = $(this).offset(); ot = parseInt(offs.top); ol = parseInt(offs.left); var aoffs = $('#'+$(this).attr('id')+'agent').offset(); aot = parseInt(aoffs.top); aol = parseInt(aoffs.left); if ((ot-aot > 2 || ot-aot < -2) || (ol-aol > 2 || ol-aol < -2)){ $('#'+$(this).attr('id')+'agent').offset({ top: ot, left: ol}); } }); }
Строчка с условием была вынужденной необходимостью, так как у меня в Firefox происходило постоянное легкое дерганье.
pholder — класс div заполняющих пустые области внутри элементов которые мы сортируем.
id у элементов которые накладываем повторяют id элементов класса pholder с добавленным к ними постфиксом agent.
Теперь у меня сортируются блоки, содержащие абсолютно любой контент, красиво и изящно, а главное удобно и интуитивно понятно.