Sortable и TinyMCE или манипулирование блоками содржащими iframe

28 апреля 2010 г.

Для библиотеки 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.

Теперь у меня сортируются блоки, содержащие абсолютно любой контент, красиво и изящно, а главное удобно и интуитивно понятно.

Теги:
рубрика Сайтостроение