Conforme a resposta do Zuul, o problema ocorre ao remover o iframe
do DOM. Por essa razão, minha sugestão é destruir o editor antes da ordenação (fazendo com que ele volte a ser um simples textarea
) e recriá-lo após a mesma.
Em primeiro lugar, usa-se a opção clone
para que o elemento sendo arrastado não seja a própria div
, mas um clone dela (isso evita que o elemento seja removido do DOM ao iniciar a ordenação, mas sim somente escondido):
$("#e").sortable({
helper:"clone",
Dessa forma, o helper ainda se parecerá com o editor sendo movido - só que vazio. O elemento original estará ainda no DOM, intacto, mas invisível.
Como o helper é uma cópia exata do elemento a ser movido, ele também possui um iframe
. Pode-se popular esse iframe
com uma cópia dos dados do próprio editor, para ele se parecer mais com o elemento original. O código abaixo é só um exemplo, provavelmente é possível melhorar mais (a aparência fica bem parecida, salvo por alguns detalhes na fomatação):
start:function(event, ui) {
// Encontra o id do textarea original (melhor usar classes...)
while ( event.originalEvent )
event = event.originalEvent;
var id = $(event.target).closest("#e1, #e2").find("textarea")[0].id;
// Acha os dados do editor e os copia pro helper
var copia = CKEDITOR.instances[id].getData();
ui.helper.find("iframe").contents().find("body").html(copia);
Em seguida, destrói-se o editor no início do processo de ordenar. Como ele está escondido, nenhuma alteração visual é percebida:
CKEDITOR.instances[id].destroy(false);
},
Por fim, ao soltar, recria-se o editor:
stop:function(event) {
while ( event.originalEvent )
event = event.originalEvent;
var id = $(event.target).closest("#e1, #e2").find("textarea")[0].id;
CKEDITOR.replace(id);
}
});
Exemplo no jsFiddle. Um problema desse método é que após se destruir e recriar o editor perde-se todo o histórico de revisões (i.e. undo e redo), bem como qualquer "estado" que o editor guardasse antes da destruição. Infelizmente não tenho nada a sugerir nesse sentido...
Outro pequeno inconveniente é o helper, que idealmente deveria ser uma cópia idêntica do conteúdo sendo movido. Não creio ser simples fazer isso com o editor que usa iframe
(iframe
s são um pouco "chatos" de se trabalhar, devido a questões de segurança), mas talvez seja possível aprimorar o método de clonagem.
Aviso: Cabe notar que usar o sortable
dessa forma é sujeito a um problema de UX: se você clicar na área azul/vermelha e arrastar, tudo ok, mas se você clicar por exemplo em um dos botões do editor e acidentalmente mover o mouse, ele inicia uma ordenação (o que pode ser meio irritante pro usuário).
Um meio de evitar isso seria usar um handle
para restringir em que parte(s) da div
se pode arrastar o elemento - em vez da div
inteira. Exemplo. Ou talvez você consiga algo interceptando o clique na fase de captura e evitando que o drag se inicie quando o mesmo ocorrer dentro do iframe
(não sei como fazer isso usando o sortable
, não existe nenhum método "beforeStart" ou algo desse tipo...).