the inside HTML became not editable after being covered by other external div such as jquery UI dialogs

I am using CKEDITOR 4 and encountered this problem after I manipulate around multiple dialogs and instances of the div-dialog wrapped ckeditors. Whenever the CKEDITOR div is dragged and then gets covered by another dragged along element, it will be come non-editable and the previous content disappear with just a emty uneditable textarea. 

My temporary solution is capture the click event on the dialog and do

$("#wb_dlg_" + wbID).on('click', function() {
            var cke_content = document.getElementById("cke_wb_editor_"+wbID);
            var frmbody = cke_content.getElementsByTagName("iframe")[0].contentDocument.getElementsByTagName('body')[0];
            $(frmbody).attr('contenteditable',"true");
            $(frmbody).attr('spellcheck',"true");
            $(frmbody).addClass("cke_editable cke_editable_themed cke_contents_ltr cke_show_borders");

            console.log(frmbody);
            alert("click on dialog");
        });

But the downside of this solution is that the original content is lost when I edit and enter new content (the original text disappeared). Thanks in advance.

Update 1 :

I store the content of TEXTAREA by .getData() and found surprisingly that the content stored in the database is actually written at the very beginning before it is covered, rather than the content I edited in after adding the contenteditable attribute to be true manually.