jQuery UI .sortable and iFrames - iframe

Question

I have a serious issue with .sortable and all the iframe texteditors out there.
I have the following example code:
html:
<div id="content" style="height: 400px;">
<div><textarea></textarea></div>
<div><textarea></textarea></div>
</div>
script:
$("#content").sortable();
This makes the two textareas draggable. No problems till here... Now lets add the wysiwyg editors...(I tried many of them ckeditor, tinyedit, tinymce, elrte, and so on)
As an example lets do it with tinyMCE:
function ini(){
tinymce.init({
menubar : false,
toolbar1: "bold | link",
selector: "textarea",
});
Ok so this is where the problems are rising. If I know drag and drop the one textarea just a little bit, the editor field is going to disable itself.
What did I try until this moment:
- I added start and stop events to the sortable method, but without success.
- I tried the frameFix: true also without any differences in behaviour.
Anyone with some hints or solutions?
Thx
Cervisias

Answer 1

I figured out a solution. Its a total workaround but it works :)
So basically what I am doing is to save the content of every texteditorfield into an array and putting it back to the editor after the use of the sortable method.
so it looks like:
$("#content").sortable({
start: function(){
newEditors = new Array();
for(i=0; i < $("textarea").length; i++){
var content = tinyMCE.get(tinyMCE.editors[i].id).getContent();
var id = tinyMCE.editors[i].id;
newEditors[i] = {"id":id, "content":content};
}
tinyMCE.remove(); //as a fix for FF
},
stop: function(){
ini(); //re-initiate the tinymce again (if you don't do that, the field wont be editable)
for(var nr in newEditors){
tinyMCE.get(newEditors[nr].id).setContent(newEditors[nr].content);
}
}
});
So if sb has the same problem and figures out an other way to solve it, would be nice to see those solutions too.
Thx
Cervisias